Question

我有 3 个主要代码（camera.py、main.py、xx.html）在我的本地服务器上完美运行。但是当我将它们上传到 heroku 时，应用程序无法运行，因为 cv2.VideoCapture 没有在客户端触发网络摄像头。

Main.py:

from flask import Flask, render_template,Response,request,jsonify
from camera import VideoCamera
from flask import redirect,url_for
import os
from PIL import Image
from mains.utils import pipeline_model
from wtforms import Form, BooleanField, StringField, PasswordField, validators
from predictors import RegressionPredictor, CNNPredictor
import numpy as np


UPLOAD_FOLDER ='static/upload'

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

def gen(camera):
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'

               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

@app.route('/video_feed')
def video_feed():
    return Response(gen(VideoCamera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':

    app.run(debug=True)

camera.py：

import cv2


face_cascade=cv2.CascadeClassifier("haarcascade_frontalface_alt2.xml")
ds_factor=0.6


class VideoCamera(object):
    def __init__(self):
        self.video = cv2.VideoCapture(0)

    def __del__(self):
        self.video.release()


    def get_frame(self):

        ret,frame = self.video.read()
        frame = cv2.resize(frame,None,fx=ds_factor,fy=ds_factor,interpolation=cv2.INTER_AREA)
        gray = cv2.cvtColor(frame,cv2.COLOR_BGR2GRAY)
        face_rects = face_cascade.detectMultiScale(gray,1.3,5)
        for (x,y,w,h) in face_rects:
            cv2.rectangle(frame,(x,y),(x+w,y+h),(0,255,0),2)
            break

        ret,jpeg = cv2.imencode('.jpg',frame)
        return jpeg.tobytes()

.html 代码（仅相关部分）

<img id="bg" src="{{url_for('video_feed')}}" alt="">

正如我上面提到的，代码在我的浏览器上打开我的网络摄像头并检测我的脸。

我搜索并找到了一些 javascript 代码来访问客户端的网络摄像头。代码如下；

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebcamJS Test Page</title>

<body>


    <h1>WebcamJS Test Page</h1>
    <h3>Demonstrates simple 320x240 capture &amp; display</h3>

    <div id="my_camera"></div>

    <!-- First, include the Webcam.js JavaScript Library -->
    <script type="text/javascript" src="static/webcam.min.js"></script>

    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach( '#my_camera' );
    </script>

</body>
</html>

此代码运行良好，但我不知道如何将数据帧从“Webcam.attach('#my_camera') 发送到烧瓶服务器以使用 OpenCV 处理它？我搜索了很多，但可能找不到解决方案因为我是 JavaScript 新手。

提前感谢您的支持！

Answer 1

SocketIO 是在服务器和 javascript 代码之间建立连接的答案。 Please check this repo for more information.

Please check this one to get OpenCV integrated version of above code

如何将捕获的视频流帧从 html 发送到 Flask 服务器？

1 个答案: