如何解决使用Flask和YOLOv5开发HTML网页时摄像头检测框无法显示的问题？

<div class="row" style="padding:3%;">
    <div class="col-lg-6">
        <h5>输入视频:</h5>
        <video autoplay="" id="video"></video>
    </div>
    <div class="col-lg-6">
        <h5>检测结果:</h5>
        @@##@@
    </div>
</div>

<script>
function start() {
    navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        const video = document.querySelector('video');
        video.srcObject = stream;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        setInterval(() => {
            const videoWidth = video.videoWidth;
            const videoHeight = video.videoHeight;
            canvas.width = videoWidth;
            canvas.height = videoHeight;
            ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
            const imageData = canvas.toDataURL('image/png', 1); // 压缩图片
            $.ajax({
                type: 'POST',
                url: '/image_data',
                data: { id: $("#uid").val(), image_data: imageData },
                success: response => console.log(response)
            });
        }, 1000 / 30); // 每秒30帧
    })
    .catch(error => console.error(error));
    $("#res").attr("src", "/img_feed?id=" + $("#uid").val());
}
</script>

import cv2
import time
import io
import base64
from flask import Flask, request, Response, render_template

app = Flask(__name__)

# 假设 'd' 是你的 YOLOv5 检测对象
# d = ...  #  你的 YOLOv5 模型加载代码

# 视频流生成器
def gen(path):
    cap = cv2.VideoCapture(path)
    while cap.isOpened():
        try:
            start_time = time.time()
            success, frame = cap.read()
            if success:
                im, label, c = d.detect(frame) # YOLOv5 检测
                ret, jpeg = cv2.imencode('.png', im)
                if ret:
                    frame = jpeg.tobytes()
                    elapsed_time = time.time() - start_time
                    print(f"Processing time: {elapsed_time:.3f} seconds")
                    yield (b'--frame\r\n'
                           b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
                else:
                    break
            else:
                break
        except Exception as e:
            print(e)
            continue
    cap.release()

# 视频流路由
@app.route('/video_feed')
def video_feed():
    f = request.args.get("f")
    print(f'Processing video: upload/{f}')
    return Response(gen(f'upload/{f}'), mimetype='multipart/x-mixed-replace; boundary=frame')

# 图片数据处理路由
@app.route('/image_data', methods=['POST'])
def image_data():
    image_data = request.form.get('image_data')
    user_id = request.form.get('id')
    image_data = io.BytesIO(base64.b64decode(image_data.split(',')[1]))
    img = Image.open(image_data) # PIL Image
    img.save(f'upload/temp{user_id}.png')
    return "ok"

if __name__ == '__main__':
    app.run(debug=True)