How to receive a webcam video stream in flask route?

Question

I'm developing an application that has a client(html&js) and a server(flask) The client will open the Webcam(HTML5 api) -> send a video stream to server -> server will return other streams with a json/text stream

I don't want to do pooling.

I was researching something about video stream, but every article and example o internet that I found, use the webcam by OpenCV or a local video and does get the real-time webcam's video and send to the server.

Here are the principal examples that I found

Server:

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

Client: 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>

Another problem is that I can't make pooling with snapshots, I need to send the video stream to the server to work with frames there.

Someone know how can I send the WebCam video stream to flask?

tks

Answer 1

You should probably use stream_with_context around your stream generator to stream your response. You can't return a regular response because there is nothing that tells the client not to close the connection.

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