如何从我的多线程相机代码中返回 OpenCV 帧以显示在 Flask 中？

Question

我正在使用基于我复制的一些代码的多线程一次将 Flask 应用程序应用于 stream 4 摄像头网络摄像头馈送。 如何通过下面的 return Response() 从 gen_frames() 返回捕获的相机帧以显示在我的网站上

@camera.route('/video_feed0')
def video_feed0():
    #Video streaming route. Put this in the src attribute of an img tag
    thread0.start()
    return Response(thread0.run(), mimetype='multipart/x-mixed-replace; boundary=frame')

完整代码在这里：

from flask import Blueprint, render_template, redirect, url_for, request, flash, Response
import cv2
import threading

camera = Blueprint('camera', __name__)

class camThread(threading.Thread):
    def __init__(self, previewName, camID):
        threading.Thread.__init__(self)
        self.previewName = previewName
        self.camID = camID
        
    def run(self):
        print("Starting " + self.previewName)
        gen_frames(self.previewName, self.camID)
        yield gen_frames()
        
def gen_frames(previewName, camID):  # generate frame by frame from camera
    camerafeed = cv2.VideoCapture(camID)
    camerafeed.set(3, 640)
    camerafeed.set(4, 480)
    print('opening camera 0')
    while True:
        # Capture frame-by-frame
        success, frame = camerafeed.read()  # read the camera frame
        if not success or camerafeed is None:
            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

thread0 = camThread("Camera 0", 0)
thread1 = camThread("Camera 1", 1)
thread2 = camThread("Camera 2", 2)
thread3 = camThread("Camera 3", 3)
            
@camera.route('/camerafeed')
def cameraindex():
    return render_template('camera.html')

@camera.route('/video_feed0')
def video_feed0():
    #Video streaming route. Put this in the src attribute of an img tag
    thread0.start()
    return Response(thread0.run(), mimetype='multipart/x-mixed-replace; boundary=frame')

@camera.route('/video_feed1')
def video_feed1():
    #Video streaming route. Put this in the src attribute of an img tag
    thread1.start()
    return Response(thread1.run(), mimetype='multipart/x-mixed-replace; boundary=frame')

@camera.route('/video_feed2')
def video_feed2():
    #Video streaming route. Put this in the src attribute of an img tag
    thread2.start()
    return Response(thread2.run(), mimetype='multipart/x-mixed-replace; boundary=frame')

@camera.route('/video_feed3')
def video_feed3():
    #Video streaming route. Put this in the src attribute of an img tag
    thread3.start()
    return Response(thread3.run(), mimetype='multipart/x-mixed-replace; boundary=frame')

Answer 1

如果要向网页显示单个提要，可以在 html 页面中的 img 标签内进行，如下所示：

<img src="{{ url_for('video_feed0') }}"/>
<img src="{{ url_for('video_feed1') }}"/>
<img src="{{ url_for('video_feed2') }}"/>
<img src="{{ url_for('video_feed3') }}"/>