title: How to stream live video frames from client to flask server and back to the client?
body: <p>I am trying to build a client server architecture where I am capturing the live video from user's webcam using getUserMedia(). Now instead of showing video directly in <code>&lt;video&gt;</code> tag, I want to send it to my flask server, do some processing on frames and throw it back to my web page. </p>
  
  <p>I have used socketio for creating a client-server connection.
  This is the script in my <strong>index.html</strong>. Please pardon my mistakes or any wrong code.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;video autoplay="true" id="videoElement"&gt;
  
      &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
  
      var socket = io('http://127.0.0.1:5000');
  
      // checking for connection
      socket.on('connect', function(){
        console.log("Connected... ", socket.connected)
      });
  
      var video = document.querySelector("#videoElement");
  
  
      // asking permission to access the system camera of user, capturing live 
      // video on getting true.
  
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
          .then(function (stream) {
  
            // instead of showing it directly in &lt;video&gt;, I want to send these frame to server
  
            //video_t.srcObject = stream
  
            //this code might be wrong, but this is what I want to do.
            socket.emit('catch-frame', { image: true, buffer: getFrame() });
          })
          .catch(function (err0r) {
            console.log(err0r)
            console.log("Something went wrong!");
          });
      }
  
      // returns a frame encoded in base64
      const getFrame = () =&gt; {
          const canvas = document.createElement('canvas');
          canvas.width = video_t.videoWidth;
          canvas.height = video_t.videoHeight;
          canvas.getContext('2d').drawImage(video_t, 0, 0);
          const data = canvas.toDataURL('image/png');
          return data;
      }
  
  
      // receive the frame from the server after processed and now I want display them in either 
      // &lt;video&gt; or &lt;img&gt;
      socket.on('response_back', function(frame){
  
        // this code here is wrong, but again this is what something I want to do.
        video.srcObject = frame;
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>In my <strong>app.py</strong> - </p>
  
  <pre><code>from flask import Flask, render_template
  from flask_socketio import SocketIO, emit
  
  app = Flask(__name__)
  socketio = SocketIO(app)
  
  @app.route('/', methods=['POST', 'GET'])
  def index():
      return render_template('index.html')
  
  @socketio.on('catch-frame')
  def catch_frame(data):
  
      ## getting the data frames
  
      ## do some processing 
  
      ## send it back to client
      emit('response_back', data)  ## ??
  
  
  if __name__ == '__main__':
      socketio.run(app, host='127.0.0.1')
  </code></pre>
  
  <p>I also have thought to do this by WebRTC, but I am only getting code for peer to peer.</p>
  
  <p>So, can anyone help me with this?
  Thanks in advance for help. </p>