如何解決使用Flask和YOLOv5開發HTML網頁時攝像頭檢測框無法顯示的問題?

如何解決使用Flask和YOLOv5開發HTML網頁時攝像頭檢測框無法顯示的問題?

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'--framern'                            b'Content-Type: image/jpegrnrn' + frame + b'rnrn')                 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)

問題排查:

立即學習前端免費學習筆記(深入)”;

  1. 攝像頭路徑: cv2.VideoCapture(path) 中的 path 必須正確。對于默認攝像頭,通常是 0;如果是RTSP流,則使用RTSP地址;如果是文件,則使用完整路徑。確保f變量在/video_feed路由中正確傳遞了視頻源路徑。

  2. 錯誤信息: 仔細檢查控制臺的錯誤信息,這能幫助你快速定位問題。

  3. 文件路徑: 使用絕對路徑避免相對路徑導致的錯誤。

  4. 接口調用: 前端代碼必須正確調用 /video_feed 接口,例如:$(“#res”).attr(“src”, “/video_feed?f=” + $(“#uid”).val()); 確保$(“#uid”).val()返回正確的文件名或攝像頭標識符

  5. YOLOv5 模型: 確保YOLOv5模型正確加載并能夠進行檢測。 d.detect(frame)這一行是關鍵,檢查模型是否正確預測并返回處理后的圖像。

  6. 圖像編碼: 確認cv2.imencode(‘.png’, im)正確編碼圖像。 嘗試使用.jpg編碼,查看是否有區別

  7. 前后端數據類型: 確保前后端數據類型匹配。前端發送的是base64編碼的圖像數據,后端需要正確解碼。

通過仔細檢查以上步驟,并結合控制臺錯誤信息,你應該能夠找到并解決檢測框顯示問題。 記得安裝必要的庫:opencv-python, pillow, flask, requests。 同時,確保你的YOLOv5模型已經成功運行,并且能夠正確地處理圖像并返回檢測結果。

如何解決使用Flask和YOLOv5開發HTML網頁時攝像頭檢測框無法顯示的問題?

? 版權聲明
THE END
喜歡就支持一下吧
點贊6 分享