如何在flask和yolov5開發(fā)的html網(wǎng)頁(yè)上成功打開攝像頭並顯示檢測(cè)框？

在使用flask框架和yolov5開發(fā)html網(wǎng)頁(yè)時(shí)，打開攝像頭並進(jìn)行實(shí)時(shí)檢測(cè)是常見的需求。然而，有時(shí)會(huì)遇到無(wú)法成功顯示檢測(cè)框的問(wèn)題。下面我們將逐步分析問(wèn)題並提供解決方案。

首先來(lái)看一下前端代碼：

 
    <div class="row" style="padding:3%;">
        <div class="col-lg-6">
            <h5>輸入數(shù)據(jù):</h5>
            <div>
                <video id="video" autoplay></video>
            </div>
        </div>
        <div class="col-lg-6">
            <h5>輸出結(jié)果:</h5>
            <div class="class=" custom-file-container__image-preview>
                <img  src="/static/imghw/default1.png" data-src="#" class="lazy" id="res" alt="如何在Flask和YOLOv5開發(fā)的HTML網(wǎng)頁(yè)上解決攝像頭無(wú)法顯示檢測(cè)框的問(wèn)題？" >
            </div>
        </div>
    </div>

    <input type="button" onclick="start()" value="開始識(shí)別">
    <input type="button" onclick="stop()" value="暫停識(shí)別">

    <script>
    function start() {
         navigator.mediadevices.getusermedia({ video: true })
      .then(function (stream) {
        var video = document.queryselector(&#39;video&#39;);
        video.srcobject = stream;
        var canvas = document.createelement(&#39;canvas&#39;);
        var ctx = canvas.getcontext(&#39;2d&#39;);

        setinterval(function () {
        var videowidth = video.videowidth;
          var videoheight = video.videoheight;
          canvas.width = videowidth;
          canvas.height = videoheight;
          ctx.drawimage(video, 0, 0, videowidth, videoheight);
          var imagedata = canvas.todataurl(&#39;image/png&#39;,1); // 壓縮圖片// 發(fā)送數(shù)據(jù)到後端$.ajax({
            type: &#39;post&#39;,
            url: &#39;/image_data&#39;,
            data: {
            id :$("#uid").val(),
            image_data: imagedata
            },
            success: function (response) {
              console.log(response);
            }
          });
        }, 1000 / 30); // 每秒30幀})
        $("#res").attr("src", "/img_feed?id=" $("#uid").val())
      .catch(function (error) {
        console.error(error);
      });
    }
</script>

接著是後端代碼：

 # 視頻推流def gen(path):
    cap = cv2.VideoCapture(path)
    while cap.isOpened():
        try:
            # 記錄開始時(shí)間start_time = time.time()
            # 獲取畫面success, frame = cap.read()
            if success:
                im, label, c = d.detect(frame)
                ret, jpeg = cv2.imencode('.png', im)
                if ret:
                    frame = jpeg.tobytes()
                    # 計(jì)算處理時(shí)間elapsed_time = time.time() - start_time
                    print(f"Frame 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()
    cv2.VideoCapture(path)

# 視頻流結(jié)果@app.route('/video_feed')
def video_feed():
    f = request.args.get("f")
    print(f'upload/{f}')
    return Response(gen(f'upload/{f}'),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

# 前臺(tái)推流@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)
    # 對(duì)圖片進(jìn)行處理，例如壓縮、濾波等output = io.BytesIO()
    img.save(output, format='PNG', quality=85)
    output.seek(0)
    # 將處理後的圖片保存到服務(wù)器img.save(f'upload/temp{id}.png')
    with open(f'upload/temp{id}.png', 'wb') as f:
        f.write(output.read())
    return "ok"

用戶反饋說(shuō)在打開攝像頭時(shí)無(wú)法顯示檢測(cè)框，並希望能夠正確識(shí)別圖像的置信度。

問(wèn)題的關(guān)鍵在於以下幾點(diǎn)：

1. 攝像頭路徑問(wèn)題：
   在cv2.videocapture(path) 中，path 參數(shù)需要正確設(shè)置?？梢允且韵聨追N情況：

   • 本地筆記本攝像頭：填寫數(shù)字0
   • ip攝像頭的rtsp地址
   • 本地絕對(duì)路徑文件（如mp4, jpeg 等）

   但是在你的代碼中，gen(f'upload/{f}') 通過(guò)接口傳遞的f 是什麼？這需要明確。

2. 報(bào)錯(cuò)信息：
   沒有提供具體的報(bào)錯(cuò)信息，這使得問(wèn)題診斷更加困難。如果有報(bào)錯(cuò)信息，建議提供出來(lái)，以便進(jìn)一步分析。
3. 接口調(diào)用問(wèn)題：
   你提到的/video_feed 接口在前端代碼中並沒有被調(diào)用。需要確保前端正確調(diào)用這個(gè)接口以顯示檢測(cè)結(jié)果。

為了解決這個(gè)問(wèn)題，我們可以採(cǎi)取以下步驟：

• 檢查攝像頭路徑：確保cv2.videocapture(path) 中的path 參數(shù)設(shè)置正確。如果是本地?cái)z像頭，嘗試使用0。如果是文件路徑，確保使用絕對(duì)路徑或完整路徑。
• 前端調(diào)用後端接口：在前端的start() 函數(shù)中，應(yīng)該調(diào)用/video_feed 接口來(lái)獲取檢測(cè)結(jié)果並顯示在img 標(biāo)籤中。例如，可以在setinterval 函數(shù)內(nèi)添加對(duì)/video_feed 的調(diào)用，並更新img 標(biāo)籤的src 屬性。
• 查看報(bào)錯(cuò)信息：如果有任何報(bào)錯(cuò)信息，仔細(xì)查看並分析錯(cuò)誤原因，可能是權(quán)限問(wèn)題、路徑錯(cuò)誤或其他配置問(wèn)題。

通過(guò)上述步驟，應(yīng)該能夠解決在打開攝像頭時(shí)無(wú)法顯示檢測(cè)框的問(wèn)題，並正確識(shí)別圖像的置信度。

以上是如何在Flask和YOLOv5開發(fā)的HTML網(wǎng)頁(yè)上解決攝像頭無(wú)法顯示檢測(cè)框的問(wèn)題？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！