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

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

javascript python django opencv flask

Javascript 如何将捕获的视频流帧从html发送到flask服务器？,javascript,python,django,opencv,flask,Javascript,Python,Django,Opencv,Flask,我有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 impor

我有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代码（仅相关部分）

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

我搜索并找到了一些javascript代码，以便在客户端访问web cam。代码如下所示

<!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>


WebcamJS测试页面
WebcamJS测试页面
演示简单的320x240捕获&；显示
网络摄像机({
宽度：320，
身高：240，
图像_格式：“jpeg”，
jpeg_质量：90
});
网络摄像头。连接（“#我的摄像头”）；

这段代码工作得很好，但我不知道如何将“Webcam.attach”（“#my_camera”）中的数据帧发送到flask服务器，以使用OpenCV进行处理？我搜索了很多次，但找不到解决方案，可能是因为我是javascript新手

提前感谢您的支持！

SocketIO是在服务器和javascript代码之间建立连接的答案。

这是否回答了您的问题？您可以使用POST逐帧发送视频，也可以查看WebRTC和类似的API。非常感谢您的回答，我使用socketio解决了我的问题。

<!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>