使用Flask和YOLOv5在网页上实现摄像头实时目标检测
本文探讨如何在Flask框架和YOLOv5模型的基础上，构建一个HTML网页，实现摄像头实时视频流的获取和目标检测结果的显示。 过程中，可能会遇到摄像头无法打开或检测框无法显示等问题，本文将提供相应的解决方案。
前端代码详解
前端HTML页面包含标签用于显示摄像头视频流，以及
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); });}
后端代码详解
后端使用Flask框架，定义两个主要路由：
/image_data: 接收前端发送的图像数据，将其保存到服务器临时文件。/img_feed: 处理图像，使用YOLOv5进行目标检测，并将检测结果图像返回给前端。import cv2import timeimport ioimport base64from flask import Flask, request, Response, render_templatefrom PIL import Imageapp = 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'--framern' b'Content-Type: image/pngrnrn' + frame + b'rnrn') 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网页上成功打开摄像头并显示检测框？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1359416.html
微信扫一扫 
支付宝扫一扫 
