Question

我正在开发一个具有客户端（html＆js）和服务器（烧瓶）的应用程序客户端将打开Webcam（HTML5 api）->向服务器发送视频流->服务器将返回带有json /文本流的其他流

我不想做池化。

我正在研究有关视频流的内容，但是我发现的每一篇文章和示例或Internet都使用OpenCV的网络摄像头或本地视频，并确实获取了实时网络摄像头的视频并发送到服务器。

这是我发现的主要例子

服务器：


    from flask import Flask, render_template, Response
    import cv2

    app = Flask(__name__)

    camera = cv2.VideoCapture(0)  # I can't use a local webcam video or a local source video, I must receive it by http in some api(flask) route

    def gen_frames():  # generate frame by frame from camera
        while True:
            success, frame = camera.read()  # read the camera frame
            if not success:
                break
            else:
                ret, buffer = cv2.imencode('.jpg', frame)
                frame = buffer.tobytes()
                yield (b'--frame\r\n'
                       b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')  # concat frame one by one and show result


    @app.route('/video_feed')
    def video_feed():
        """Video streaming route. Put this in the src attribute of an img tag."""
        return Response(gen_frames(),
                        mimetype='multipart/x-mixed-replace; boundary=frame')


    @app.route('/')
    def index():
        """Video streaming home page."""
        return render_template('index.html')


    if __name__ == '__main__':
        app.run(host='0.0.0.0')

客户： camera.js

          //--------------------
          // GET USER MEDIA CODE
          //--------------------
              navigator.getUserMedia = ( navigator.getUserMedia ||
                                 navigator.webkitGetUserMedia ||
                                 navigator.mozGetUserMedia ||
                                 navigator.msGetUserMedia);

          var video;
          var webcamStream;

          function startWebcam() {
            if (navigator.getUserMedia) {
               navigator.getUserMedia (

                  // constraints
                  {
                     video: true,
                     audio: false
                  },

                  // successCallback
                  function(localMediaStream) {
                      video = document.querySelector('video');
                     video.src = window.URL.createObjectURL(localMediaStream);
                     webcamStream = localMediaStream;
                  },

                  // errorCallback
                  function(err) {
                     console.log("The following error occured: " + err);
                  }
               );
            } else {
               console.log("getUserMedia not supported");
            }  
          }


          //---------------------
          // TAKE A SNAPSHOT CODE
          //---------------------
          var canvas, ctx;

          function init() {
            // Get the canvas and obtain a context for
            // drawing in it
            canvas = document.getElementById("myCanvas");
            context = canvas.getContext('2d');
          }

          function snapshot() {
             // Draws current image from the video element into the canvas
            context.drawImage(video, 0,0, canvas.width, canvas.height);
            webcamStream.stop();
            var dataURL = canvas.toDataURL('image/jpeg', 1.0);
            document.querySelector('#dl-btn').href = dataURL;

            $.ajax({
              type: "POST",
              contentType: false,
              cache: false,
              processData: false,
              async: false,
              url: "/upload",
              data: { 
                imgBase64: dataURL
              }
            }).done(function(o) {
              console.log('saved'); 
      // If you want the file to be visible in the browser 
      // - please modify the callback in javascript. All you
      // need is to return the url to the file, you just saved 
      // and than put the image in your browser.
    });

          }

index.html

    <!DOCTYPE html>
    <html>

      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
      <script src="camera.js"></script> 

      </head>
      <body onload="init();">
        <h1>Take a snapshot of the current video stream</h1>
       Click on the Start WebCam button.
         <p>
        <button onclick="startWebcam();">Start WebCam</button>
        <button type="submit" id="dl-btn" href="#" download="participant.jpeg" onclick="snapshot();">Take Snapshot</button> 
        </p>
        <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video>
      <p>

            Screenshots : <p>
          <canvas  id="myCanvas" width="400" height="350"></canvas>  
      </body>
    </html>

另一个问题是我无法与快照建立池，我需要将视频流发送到服务器以在其中处理帧。

有人知道如何将WebCam视频流发送到烧瓶？

tks

Answer 1

嘿，这可能会帮助你在烧瓶中进行视频流

#!/usr/bin/env python
from flask import Flask, render_template, Response
from camera import Camera

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')

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

    if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

Answer 2

您可能应该在流生成器周围使用 stream_with_context 来流式传输您的响应。您无法返回常规响应，因为有任何信息告诉客户端不要关闭连接。

https://flask.palletsprojects.com/en/1.1.x/api/#flask.stream_with_context

接收烧瓶路径中的网络摄像头视频流

2 个答案: