1. Visão Geral

Use Flask+Python+OpenCV para implementar a leitura da câmera de quadros de imagem e streaming de vídeo de páginas da web

2. Casos de uso básicos

Etapa 1: use Flaska estrutura para obter o stream de vídeo

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)

Suplemento: explicação dos parâmetros

No início da função, @app.route('/')a próxima função é executada, nomeadamente index(), correspondente a index.html

Em index.html, o link para a imagem corresponde a flask e o link para a imagem é construído url_for()nesta função.video_feed()

Em video_feed, Response()uma função é usada para retornar dados, e os dados correspondentes são gen()transmitidos pela função.yeild

VideoCamera()A função de leitura no OpenCV é usada principalmente para ler dados de imagem.

Etapa 2: escrever o front-end

templatesCriar index.htmlarquivo no diretório

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

ilustrar:

Crie index.htmlarquivos para facilitar o roteamento de back-end

Etapa 3: demonstração

1. Visualize o console

Insira a descrição da imagem aqui

2. Ver navegador

Insira a descrição da imagem aqui

OpenCV realiza transmissão de streaming de vídeo em tempo real na rede de câmeras

Diretório de artigos

1. Visão Geral

2. Casos de uso básicos

Acho que você gosta