OpenCV视频WebSocket流传输仅显示首帧问题求助

我尝试将一个OpenCV视频流仓库中的图像/视频通过Socket传输至云端服务器，测试时使用Live Server托管网页，以websocket作为数据传输机制。网页能显示内容，但仅展示运行代码后摄像头捕获的首帧；虽能接收更多帧，但内容均相同。通过cv2.imshow()排查发现VideoStream未输出新帧，但原仓库代码运行正常。

以下是我修改/新增的代码部分：

修改的generate函数片段 #

async def generate():
    ...
    # yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' +
    #        bytearray(encodedImage) + b'\r\n')
    yield encodedImage.tobytes()

编写的main.py #

import argparse
import asyncio
import threading
import aioschedule as schedule

from webstreaming import detect_motion
from socket_helper import socket_serve

if __name__ == '__main__':
    loop = asyncio.new_event_loop()
    asyncio.set_event_loop(loop)

    # 构造参数解析器并解析命令行参数
    ap = argparse.ArgumentParser()
    ap.add_argument("-i", "--ip", type=str, required=True,
                    help="设备的IP地址")
    ap.add_argument("-o", "--port", type=int, required=True,
                    help="服务器的临时端口号（1024至65535）")
    ap.add_argument("-f", "--frame-count", type=int, default=32,
                    help="构建背景模型所用的帧数")
    args = vars(ap.parse_args())
    # 启动一个线程执行运动检测
    t = threading.Thread(target=detect_motion, args=(
        args["frame_count"],))
    t.daemon = True
    t.start()

    asyncio.get_event_loop().run_until_complete(socket_serve())
    asyncio.get_event_loop().run_forever()

编写的socket_helper.py #

import time
import websockets
from websockets.sync.client import connect
from webstreaming import generate

HOST_NAME = "localhost"
SOCKET_PORT = 15000
wsConn = any

async def stream_cam_handler(websocket):
    print(f"stream_cam_handler")
    async for frame in generate():
        time.sleep(0.2)
        await websocket.send(frame)

async def handler(websocket, path):
    global wsConn
    wsConn = websocket

    data = await websocket.recv()
    reply = f"Data received as:  {data}!"

    await websocket.send(reply)

    await stream_cam_handler(websocket)


def socket_serve():
    start_server = websockets.serve(handler, "localhost", 15000)
    return start_server

网页代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Pi Video Surveillance</h1>
    <img id="img_vid_feed" src="/" alt="video_feed">
    <br>

    <script>
        let image = document.getElementById("img_vid_feed");
        const ws = new WebSocket('ws://localhost:15000');
        ws.binaryType = "blob";
 
        ws.addEventListener('open', function (event) {
            ws.send('Connection Established');
        });

        ws.onmessage = function (event) {
            image.src = URL.createObjectURL(event.data);
        };
        
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者rminaj