使用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 flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/984" title="Frase"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680021196501.png" alt="Frase" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/984" title="Frase">Frase</a>
<p>Frase是一款出色的长篇 AI 写作工具，快速创建seo优化的内容。</p>
</div>
<a href="/ai/984" title="Frase" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</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相关的依赖)。
