1。概要

Flask + Python + OpenCV を使用して、画像フレームのカメラ読み取りと Web ページのビデオストリーミングを実装します。

2. 基本的な使用例

ステップ 1:Flaskフレームワークを使用してビデオストリームを取得する

from flask import Flask, render_template, Response
import cv2
"""
  本工具，是用openCV获取摄像头的实时视频流，实时显示在前端中
  注意：index.html 文件，需要存放在 templates目录中
"""

# 定义 VideoCamera 类表示一个视频摄像头对象
class VideoCamera(object):
    def __init__(self):
        # 通过 OpenCV 获取实时视频流
        self.video = cv2.VideoCapture(0)

    def __del__(self):
        # 在对象销毁时释放视频捕获对象
        self.video.release()

    def get_frame(self):
        # 从视频捕获中读取一帧图像
        success, image = self.video.read()

        # 因为 OpenCV 读取的图像并非 JPEG 格式，所以要用 motion JPEG 模式需要先将图像转码成 jpg 格式图像
        ret, jpeg = cv2.imencode('.jpg', image)

        # 返回转码后的 JPEG 图像数据（以字节形式）
        return jpeg.tobytes()


# 创建 Flask 网络应用对象
app = Flask(__name__, static_folder='./static')


# 定义主页路由
@app.route('/')
def index():
    # 使用 jinja2 模板渲染 index.html 文件并返回给客户端
    return render_template('index.html')


# 定义生成器函数 gen，用于不断输出视频流帧
def gen(camera):
    while True:
        # 从 VideoCamera 对象获取一帧图像
        frame = camera.get_frame()

        # 使用 generator 函数输出视频流，每次请求输出的 content 类型是 image/jpeg
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')


# 定义视频流地址的路由
@app.route('/video_feed')
def video_feed():
    # 返回 Response 对象，通过 gen(VideoCamera()) 生成视频流响应
    # 使用 multipart/x-mixed-replace 内容类型，其中 boundary=frame 表示分隔符为 frame 来分隔不同的数据部分
    return Response(gen(VideoCamera()), mimetype='multipart/x-mixed-replace; boundary=frame')


# 当脚本作为主程序运行时，启动 Flask 应用在 0.0.0.0:5000 地址上，并开启调试模式
if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True, port=5000)

補足：パラメータの説明

関数の先頭で、@app.route('/')次の関数、つまりindex.htmlに対応するindex()が実行されます。

Index.html では画像へのリンクが flask に相当し、url_for()この関数内でvideo_feed()画像へのリンクが構築されます。

video_feed では、Response()関数を使用してデータを返し、対応するデータがgen()関数によってストリーミングされます。yeild

VideoCamera()OpenCVのread関数は主に画像データの読み込みに使用されます。

ステップ 2: フロントエンドを作成する

ディレクトリにファイルtemplatesを作成するindex.html

<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <h1>Video Streaming Demonstration</h1>
    <img src="{
     
     { url_for('video_feed') }}">
  </body>
</html>

例証します:

index.htmlバックエンドルーティングを容易にするファイルを作成する

ステップ 3: デモ

1. コンソールを表示する

ここに画像の説明を挿入します

2. ブラウザを表示する

ここに画像の説明を挿入します

OpenCVはカメラネットワーク上でリアルタイム映像ストリーミング配信を実現します

記事ディレクトリ

1。概要

2. 基本的な使用例

おすすめ