如何從我的多線程相機代碼中返回 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') }}"/>