带有烧瓶的套接字流网络摄像头视频到网页

Question

我想将视频从网络摄像头流式传输到网页。我正在使用这个flask_socketio。我遇到的问题是，每个网页重新连接的流都越来越卡。如果我重新加载页面 5 次，则只有一个冻结的图像。它第一次连接，它工作正常。这是我的代码：

server.py

from flask import Flask
from flask_socketio import SocketIO, send
from flask_cors import CORS
import cv2
import base64

app = Flask(__name__)
app.config['SECRET_KEY'] = 'justasecretkeythatishouldputhere'
socketio = SocketIO(app, cors_allowed_origins="http://localhost:3000")
CORS(app)


cap = cv2.VideoCapture(0)

@socketio.on('connect')
def on_connect(auth):
    print("CONNECTED")

@socketio.on('disconnect')
def test_disconnect():
    print('Client disconnected')


@socketio.on("live")
def live():
    print("I AM LIVE")
    while True:
        ret,frame = cap.read()
        retval, buffer = cv2.imencode('.png', frame)
        data64 = base64.b64encode(buffer.tobytes())
        send(u'data:img/png;base64,' + data64.decode('utf-8'), broadcast=True)
        socketio.sleep(0.001)


if __name__ == '__main__':
    socketio.run(app)

这是客户端代码：

import {useEffect, useState} from 'react'
import './App.css';
import { io } from "socket.io-client";
function App() {
  const [image,setImage] = useState()
  useEffect(()=>{
    const socket = io("http://localhost:5000");
    console.log(socket)
    socket.on('message', function (data) {
      // console.log(data)
      // setText(data)
      console.log("NEW MESSAGE")
      setImage(data)
    });
    socket.emit('live', "");
  },[])
  return (
    <div className="App">
      <img
        src={image}
      />
    </div>
  );
}

export default App;

我猜想多次调用 while(True) 循环，而不终止旧循环，但我不确定。

所以我尝试了一个带有线程和flask_executor的解决方案。这是第二种方法的代码。使用此解决方案，我从客户端成功连接，服务器发送消息，但客户端未收到任何消息。

from flask import Flask
from flask_socketio import SocketIO, emit, send
from flask_cors import CORS
import cv2
import base64
from flask_executor import Executor

app = Flask(__name__)
app.config['SECRET_KEY'] = 'justasecretkeythatishouldputhere'

socketio = SocketIO(app, cors_allowed_origins="http://localhost:3000")
CORS(app)


def foo_main():
    cap = cv2.VideoCapture(0)
    print("4")
    while True:
        ret,frame = cap.read()
        retval, buffer = cv2.imencode('.png', frame)
        data64 = base64.b64encode(buffer.tobytes())
        send(u'data:img/png;base64,' + data64.decode('utf-8'))
        # time.sleep(0.01)
        socketio.sleep(0.1)

executor = Executor(app)


@socketio.on('connect')
def on_connect(auth):
    print("CONNECTED")
    executor.submit(foo_main)

@socketio.on('disconnect')
def test_disconnect():
    print('Client disconnected')


if __name__ == '__main__':
    socketio.run(app)