OpenCV：将视频流式传输到网页浏览器/HTML页面

在本教程中，您将学习如何通过Flask和Python使用OpenCV将视频从网络摄像头流式传输到网页浏览器/HTML页面。

您的车被偷过吗?

我的车在周末就被偷了。让我告诉您，我很生气。

我不能透露太多的细节，因为这个案件还在调查中，但以下是我可以告诉您的:

大约六个月前，我和妻子从康涅狄格州的诺沃克搬到了宾夕法尼亚州的费城。我有一辆车，我不经常开，但还是留着它以备不时之需。

我们小区很难找到停车的地方，所以我需要一个车库。

我听说有个车库，就报名了，开始把车停在那里。

直到上个星期天。

我和妻子来到车库取车。我们打算开车到马里兰去看望我的父母，吃一些螃蟹(马里兰的螃蟹很有名)。

我走到我的车旁，取下车衣。

我立马就蒙圈了——这不是我的车。

我的车#$&@去哪里了?

几分钟后我就意识到一个现实——我的车被偷了。

在过去的一周中，我为即将出版的《树莓派电脑视觉》一书正在做的工作被打断了——我一直在与停车场的主人、费城警察局和我车上的GPS跟踪服务打交道，想弄清楚到底发生了什么。

在事情解决之前，我不能公开透露任何细节，但是让我告诉您，我正埋头处理警察报告、律师信件、还有保险索赔等一大堆的文件。

我希望下个月这个问题能得到解决——我讨厌分心，尤其是让我远离我最喜欢做的事情——教计算机视觉和深度学习。

我成功地利用我的挫折启发了一篇新的安全相关的计算机视觉博客帖子。

在这篇文章中，我们将学习如何使用Flask和OpenCV将视频流式传输到网页浏览器中。

您可以在不到5分钟的时间内将此系统部署到树莓派上:

• 简单地安装所需的包/软件并启动脚本
• 然后打开您的计算机/智能手机浏览器，并导航到URL/IP地址，就可以看到传输过来的视频了（并且确保您的任何东西没有被偷）。

没什么比一个小视频证据更能抓住小偷了。

当我继续与警察、保险等处理文书工作时，您就可以开始用树莓派相机武装自己，无论您在哪里生活和工作，都可以抓住坏人。

要学习如何使用OpenCV和Flask将视频流式传输到一个网页浏览器的HTML页面，请继续阅读!

OpenCV——将视频流式传输到网页浏览器/HTML页面

在本教程中，我们将首先讨论Flask，它是一个用于Python编程语言的微型web框架。

我们将学习运动检测的基本知识，以便我们可以将它应用到我们的项目中。我们将通过一个背景减法器来实现运动检测。

在此基础上，我们将Flask与OpenCV结合，这样我们就能够:

1. 访问来自树莓派相机模块或USB网络摄像头的帧。
2. 处理帧并应用一个任意的算法(这里我们将使用背景去除/运动检测，但您也可以应用图像分类，对象检测等)。
3. 将结果流式传输到一个网页页面/网页浏览器。

此外，我们将涉及的代码将能够支持多个客户端(即，不止一个人/网页浏览器/标签页能同时访问流媒体)，这是您在网上看到的绝大多数例子都无法处理的。

把所有这些过程块放在一起，我们就会得到一个能够执行运动检测的家庭监控系统，然后它会将视频结果流式传输到您的网页浏览器中。

让我们开始吧!

Flask web框架

图1:Flask是Python的一个微型web框架(image source)。

在本节中，我们将简要讨论Flask web框架以及如何在您的系统中安装它。

Flask是一个非常流行的用Python编程语言编写的微型web框架。

与Django一样，Flask是使用Python构建web应用程序时最常见的web框架之一。

但是，与Django不同的是，Flask非常轻量，这使得使用它构建基本的web应用程序非常容易。

正如我们将在本节中看到的，我们只需要一小部分代码就可以使用Flask实现实时流式传输视频——其余的代码包括(1)OpenCV和访问我们的视频流，或者(2)确保我们的代码是线程安全的，并且可以处理多个客户端。

如果您需要在一个机器上安装Flask，您只需要简单地按以下命令进行操作:

安装了它之后，您可以继续安装NumPy、OpenCV和imutils:

注意:如果您想要完整安装包括“非免费”(专利)算法的OpenCV，那您一定要从源代码来编译OpenCV。

项目结构

在我们继续之前，让我们看看我们项目的目录结构: