如何在Flask和YOLOv5开发的HTML网页上成功打开摄像头并显示检测框？-Python教程-PHP中文网

如何在Flask和YOLOv5开发的HTML网页上成功打开摄像头并显示检测框？

霞舞

发布： 2025-03-15 10:08:11

原创

951人浏览过

如何在flask和yolov5开发的html网页上成功打开摄像头并显示检测框？

使用Flask和YOLOv5在网页上实现摄像头实时目标检测

本文探讨如何在Flask框架和YOLOv5模型的基础上，构建一个HTML网页，实现摄像头实时视频流的获取和目标检测结果的显示。过程中，可能会遇到摄像头无法打开或检测框无法显示等问题，本文将提供相应的解决方案。

前端代码详解

前端HTML页面包含<video></video>标签用于显示摄像头视频流，以及<img src="https://img.php.cn/upload/article/001/246/273/174200449476734.jpg" alt="如何在Flask和YOLOv5开发的HTML网页上成功打开摄像头并显示检测框？"><script> function start() { navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { const video = document.querySelector('video'); video.srcObject = stream; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); setInterval(function() { 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: function(response) { console.log(response); $("#res").attr("src", "/img_feed?id=" + $("#uid").val()); // 更新结果图像 } }); }, 1000 / 30); // 每秒30帧 }) .catch(function(error) { console.error(error); }); } </script><h4>后端代码详解</h4> <p>后端使用Flask框架，定义两个主要路由：</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/2000"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679953098868.png" alt="码上飞"> </a> <div class="aritcle_card_info"> <a href="/ai/2000">码上飞</a> <p>码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="码上飞"> <span>138</span> </div> </div> <a href="/ai/2000" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="码上飞"> </a> </div> <ol> <li> <code>/image_data: 接收前端发送的图像数据，将其保存到服务器临时文件。

/img_feed: 处理图像，使用YOLOv5进行目标检测，并将检测结果图像返回给前端。

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

app = Flask(__name__)

#  ... (YOLOv5 模型加载代码，假设名为 'd') ...

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/png\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('/img_feed')
def img_feed():
    f = request.args.get("id")
    return Response(gen(f'upload/temp{f}.png'), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/image_data', methods=["POST"])
def image_data():
    image_data = request.form.get('image_data')
    id = request.form.get('id')
    image_data = io.BytesIO(base64.b64decode(image_data.split(',')[1]))
    img = Image.open(image_data)
    img.save(f'upload/temp{id}.png')
    return "ok"

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

登录后复制

问题排查与解决方案

摄像头权限: 确保浏览器允许网页访问摄像头。
cv2.VideoCapture 参数: cv2.VideoCapture(0) 通常用于访问默认摄像头。如果使用其他摄像头，需要更改参数。对于视频文件，需要提供正确的文件路径。
YOLOv5 模型路径: 确保YOLOv5模型正确加载，并且路径设置正确。
错误信息: 仔细检查控制台的错误信息，例如网络错误、模型加载错误等。
文件路径: 使用绝对路径来避免文件路径问题。
后端接口调用: 确认前端代码正确调用 /img_feed 接口来获取检测结果。

通过仔细检查代码、配置和错误信息，并参考以上解决方案，可以有效解决摄像头无法打开或检测框无法显示的问题，从而成功构建一个基于Flask和YOLOv5的网页实时目标检测应用。记得安装必要的库：opencv-python, flask, Pillow, torch (以及YOLOv5相关的依赖)。

以上就是如何在Flask和YOLOv5开发的HTML网页上成功打开摄像头并显示检测框？的详细内容，更多请关注php中文网其它相关文章！