基于OpenCV与Flask实现网络实时视频流传输

引言与背景

许多用户希望在家中或办公室部署网络摄像头或监控设备，以便随时随地查看实时视频直播。

相比传统闭路电视（CCTV），IP摄像机（Internet Protocol Camera）因具备更高分辨率且布线成本更低而更受青睐。IP摄像机是一种数字设备，可通过IP网络接收控制指令并传输图像数据，无需本地存储设备。大多数IP摄像机基于RTSP（实时流协议），而标准互联网浏览器本身并不直接支持该协议，因此需要额外的处理机制来在网页中展示视频。

01.如何使用Web浏览器查看实时流媒体

计算机视觉旨在让计算机从数字图像或视频中获取高层级理解。为实现这一目标，本文将使用Python中的OpenCV模块，并借助Flask Web框架在Web浏览器中展示实时视频流。在深入编码之前，我们先简要介绍这两个核心模块。若已熟悉，可直接跳转至后续步骤。

根据Wikipedia的定义，Flask是一个用Python编写的微型Web框架。它被归类为微框架，因为不强制依赖特定工具或库，也没有内置数据库抽象层、表单验证或其他提供通用功能的第三方组件。

根据GeeksForGeeks的描述，OpenCV是一个用于计算机视觉、机器学习和图像处理的庞大开源库，目前在实时系统操作中发挥着关键作用。

环境搭建与核心库介绍

02.操作步骤

详细实现步骤

第1步-安装Flask和OpenCV：

可通过执行“pip install flask”和“pip install opencv-python”命令进行安装。开发环境建议使用PyCharm IDE来构建Flask应用。

第2步-导入必要的库，初始化flask应用程序：

接下来，我们将导入所需库并初始化Flask应用实例。

#Import necessary libraries
from flask import Flask, render_template, Response
import cv2
#Initialize the Flask app
app = Flask(__name__)

第3步-使用OpenCV捕获视频：

创建一个VideoCapture()对象以启动相机并读取视频的第一帧。你可以指定视频文件路径，或使用数字指定本地摄像头。对于本地网络摄像头，传递参数“0”即可触发；若要从IP摄像机捕获实时源，则需提供RTSP链接作为参数。

camera = cv2.VideoCapture(0)
'''
for ip camera use - rtsp://username:password@ip_address:554/user=username_password='password'_channel=channel_number_stream=0.sdp' 
for local webcam use cv2.VideoCapture(0)
'''

第4步-添加窗口并从相机生成帧：

gen_frames()函数进入一个循环，不断从相机获取帧并以响应块形式返回。该函数请求摄像机提供一帧，将其格式化为Content-Type为image/jpeg的响应块，并生成yield输出。具体代码实现如下：

def gen_frames(): 
 while True:
  success, frame = camera.read() # read the camera frame
  if not success:
   break
  else:
   ret, buffer = cv2.imencode('.jpg', frame)
   frame = buffer.tobytes()
   yield (b'--frame\r\n'
     b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n') # concat frame one by one and show result

第5步-为网络应用的默认页面定义应用路由：

路由指应用程序的URL模式（如myapp.com/home）。@app.route("/")是Flask提供的Python装饰器，用于在应用中分配URL以便运行。

@app.route('/')
def index():
 return render_template('index.html')

该装饰器指示@app，当用户访问指定域名（如本地服务器的localhost：5000）时，执行index()函数。Flask使用Jinja模板库渲染模板，我们利用模板在浏览器中呈现显示视频流的HTML页面。

第6步-定义视频供稿的应用路由：

@app.route('/video_feed')
def video_feed():
 return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

“/video_feed”路由返回流式响应。由于该流需在网页中显示图像，其URL被设置在img标签的“src”属性中（见下方的“index.html”）。浏览器会自动更新图像元素，通过在其中显示JPEG图像流来呈现视频，这得益于大多数浏览器对multipart响应格式的支持。

以下是我们的index.html文件内容：

<body>
<div class="container">
 <div class="row">
  <div class="col-lg-8 offset-lg-2">
   <h3 class="mt-5">Live Streaming</h3>
   <img src="{{ url_for('video_feed') }}" width="100%">
  </div>
 </div>
</div>
</body>

第7步-启动Flask服务器：

if __name__ == "__main__":
 app.run(debug=True)

调用app.run()将Web应用本地托管在[localhost：5000]上。

设置“debug = True”可确保无需每次更改后重新运行应用，只需在服务器运行时刷新网页即可查看更新。

项目结构与运行结果

项目结构：

项目保存在名为“摄像机检测”的文件夹中，通过运行“app.py”文件启动。运行后，应用将托管在本地服务器的5000端口上。

• 在“app.py”运行后，只需在网络浏览器中输入“localhost：5000”即可访问Web应用。
• app.py — 这是上述创建的Flask应用程序主文件。
• 模板- 此文件夹包含“index.html”文件，Flask渲染模板时必需。所有HTML文件均置于该文件夹下。

运行'app.py'后的效果如下：

点击提供的URL，Web浏览器将打开实时视频流。由于使用了VideoCapture（0），网络摄像头画面将显示在浏览器中：

此处展示了来自IP摄像机或网络摄像机的实时视频流，适用于安全监控等场景。

代码链接：https://github.com/NakulLakhotia/Live-Streaming-using-OpenCV-Flask

本文关于基于OpenCV的网络实时视频流传输的实现到此结束，更多相关OpenCV实时视频流传输内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！