使用Flask和YOLOv5开发HTML网页时，摄像头无法显示检测框和识别图像置信度解决方法

本文针对使用Flask和YOLOv5构建HTML网页实时目标检测时，摄像头画面无法显示检测框和置信度的问题，提供了解决方案。问题可能源于前端未正确调用后端`/video_feed`接口获取视频流，后端`cv2.VideoCapture`路径错误或YOLOv5检测结果未正确绘制到图像上，以及前后端缺乏完善的错误处理机制。文章分析了前端JavaScript代码和后端Python代码，并针对摄像头路径、视频流接口调用、错误处理以及YOLOv5检测结果显示等方面提出了具体的解决方案，帮助开发者快速排查并解决问题，实现实时目标检测功能。

本文分析了使用Flask和YOLOv5开发HTML网页时，摄像头实时检测无法显示检测框和置信度的问题，并提出了可能的解决方案。

前端代码使用JavaScript捕获摄像头画面并将其发送到后端进行处理：

<div class="row" style="padding:3%;">
    <div class="col-lg-6">
        <h5>输入数据:</h5>
        <div><video autoplay="" id="video"></video></div>
    </div>
    <div class="col-lg-6">
        <h5>输出结果:</h5>
        <div class="custom-file-container__image-preview">
            <img src="/uploads/20250412/174445206267fa39dec3686.jpg" alt="如何解决在使用Flask和YOLOv5开发HTML网页时，摄像头无法显示检测框和识别图像置信度的问题？"></div>
    </div>
</div>

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

        setInterval(function () {
            var videoWidth = video.videoWidth;
            var videoHeight = video.videoHeight;
            canvas.width = videoWidth;
            canvas.height = videoHeight;
            ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
            var imageData = canvas.toDataURL('image/png',1); // 压缩图片
            // 发送数据到后端
            $.ajax({
                type: 'POST',
                url: '/image_data',
                data: {
                    id :$("#uid").val(),
                    image_data: imageData
                },
                success: function (response) {
                    console.log(response);
                }
            });
        }, 1000 / 30); // 每秒30帧
    })
    .catch(function (error) {
        console.error(error);
    });
}
</script>

后端Python代码使用OpenCV处理图像并进行视频流传输：

import cv2
import time
import io
import base64
from flask import Flask, request, Response
from PIL import Image

app = Flask(__name__)

# ... (假设d.detect函数已定义，用于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"frame 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'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')
    uid = request.form.get('id')
    try:
        image_data = io.BytesIO(base64.b64decode(image_data.split(',')[1]))
        img = Image.open(image_data)
        img.save(f'upload/temp{uid}.png')
        return "ok"
    except Exception as e:
        print(f"Error processing image: {e}")
        return "error"

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

问题可能原因及解决方案：

1. cv2.VideoCapture(path) 路径错误: path 应为正确的摄像头索引 (例如 0 为默认摄像头) 或 RTSP 地址。 前端代码应将正确的摄像头信息传递给后端。

2. 前端未调用 /video_feed: 前端代码缺少调用 /video_feed 接口的代码。 应在 start() 函数中添加以下代码：

   $("#res").attr("src", "/video_feed?f=temp" + $("#uid").val());

3. 错误处理: 后端代码缺少更全面的错误处理。 建议使用 try...except 块捕获并处理可能的异常，例如文件IO错误、图像处理错误等。 同时，前端也应该处理AJAX请求失败的情况。

4. YOLOv5 检测结果显示: 后端代码的 d.detect(frame) 函数应该返回包含检测框和置信度的结果，并将其整合到 im 中，然后才能正确显示。 需要仔细检查 d.detect 函数的实现以及如何将检测结果绘制到图像上。

5. 图片格式: 确保 cv2.imencode('.png', im) 编码后的图片格式与前端显示的图片格式一致。

通过修正以上几点，特别是摄像头路径、前端调用后端视频流接口以及完善错误处理机制，就能解决这个问题。 记住检查YOLOv5的检测结果是否正确地绘制在图像上。 如果问题仍然存在，请提供完整的错误日志信息，以便进一步排查。

今天关于《使用Flask和YOLOv5开发HTML网页时，摄像头无法显示检测框和识别图像置信度解决方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！