我要评论
flask+yolov5网页摄像头检测：解决检测框显示问题
本文针对使用flask和yolov5构建的html网页应用中，摄像头检测框无法显示的问题，提供详细的排查步骤和代码分析。
前端代码 (html & javascript):
<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>后端代码 (python - flask):
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)问题排查:
-
摄像头路径: cv2.videocapture(path) 中的 path 必须正确。对于默认摄像头，通常是 0；如果是rtsp流，则使用rtsp地址；如果是文件，则使用完整路径。确保f变量在/video_feed路由中正确传递了视频源路径。
-
错误信息: 仔细检查控制台的错误信息，这能帮助你快速定位问题。
-
文件路径: 使用绝对路径避免相对路径导致的错误。
-
接口调用: 前端代码必须正确调用 /video_feed 接口，例如：$("#res").attr("src", "/video_feed?f=" + $("#uid").val()); 确保$("#uid").val()返回正确的文件名或摄像头标识符。
-
yolov5 模型: 确保yolov5模型正确加载并能够进行检测。 d.detect(frame)这一行是关键，检查模型是否正确预测并返回处理后的图像。
-
图像编码: 确认cv2.imencode('.png', im)正确编码图像。 尝试使用.jpg编码，查看是否有区别。
-
前后端数据类型: 确保前后端数据类型匹配。前端发送的是base64编码的图像数据，后端需要正确解码。
通过仔细检查以上步骤，并结合控制台错误信息，你应该能够找到并解决检测框显示问题。 记得安装必要的库：opencv-python, pillow, flask, requests。 同时，确保你的yolov5模型已经成功运行，并且能够正确地处理图像并返回检测结果。
以上就是如何解决使用flask和yolov5开发html网页时摄像头检测框无法显示的问题？的详细内容，更多请关注代码网其它相关文章！
![Flask-SQLAlchemy中db.metadatas["auth"].tables["user"]究竟是什么意思？](https://images1.3wcode.com/3wcode/20250329/s_0_202503292220035310.jpg)
发表评论