title: How to convert blob into image to preprocess and recognition in flask or django?
body: <p>I am working on a Project which involves real-time video streaming and gesture recognition. however, I found lots of resources to get a real-time video stream from client-side to server-side, but nothing works fast and simple to implement. I have tried AIORTC, but I don't understand.</p>
  <p>I don't know how to use webRTC in Django or Flask for such a task, please help me if you have any kind of idea about webRTC with python. Or help me to resolve this issue,</p>
  <p>I am trying to get frames from javascript to flask as a blob, but I don't know how to recreate image from a blob,
  I have tried <code>base64.b64decode()</code> but it doesn't work.</p>
  <p>here is my getImage.html file</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Post an Image test&lt;/title&gt;
          &lt;script src=&quot;https://webrtc.github.io/adapter/adapter-latest.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;style&gt;
          /* mirror the image */
          video, canvas {
          transform: scale(-1, 1); /*For Firefox (&amp; IE) */
          -webkit-transform: scale(-1, 1); /*for Chrome &amp; Opera (&amp; Safari) */
      }
      &lt;/style&gt;
      &lt;body&gt;
      &lt;video id=&quot;myVideo&quot; height=&quot;480&quot; width=&quot;640&quot; autoplay&gt;&lt;/video&gt;
      
      &lt;script&gt;
      
          let v = document.getElementById(&quot;myVideo&quot;);
      
          //create a canvas to grab an image for upload
          let imageCanvas = document.createElement('canvas');
          let imageCtx = imageCanvas.getContext(&quot;2d&quot;);
      
          //Add file blob to a form and post
          function postFile(file) {
              let formdata = new FormData();
              formdata.append(&quot;image&quot;, file);
              let xhr = new XMLHttpRequest();
              xhr.open('POST', 'http://localhost:5000/image', true);
              xhr.onload = function () {
                  if (this.status === 200)
                      console.log(this.response);
                  else
                      console.error(xhr);
              };
              xhr.send(formdata);
          }
      
          //Get the image from the canvas
          function sendImagefromCanvas() {
      
              //Make sure the canvas is set to the current video size
              imageCanvas.width = v.videoWidth;
              imageCanvas.height = v.videoHeight;
      
              imageCtx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);
      
              //Convert the canvas to blob and post the file
              imageCanvas.toBlob(postFile, 'image/jpeg');
          }
      
          //Take a picture on click
          v.onclick = function() {
              console.log('click');
              sendImagefromCanvas();
          };
      
          window.onload = function () {
      
              //Get camera video
              navigator.mediaDevices.getUserMedia({video: {width: 640, height: 480}, audio: false})
                  .then(stream =&gt; {
                      v.srcObject = stream;
                  })
                  .catch(err =&gt; {
                      console.log('navigator.getUserMedia error: ', err)
                  });
      
          };
      
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>here is server.py file</p>
  <pre><code>from flask import Flask, request, Response
  import time
  import base64
  import cv2
  import base64
  
  PATH_TO_TEST_IMAGES_DIR = './images'
  
  app = Flask(__name__)
  
  @app.route('/')
  def index():
      return Response(open('./static/getImage.html').read(), mimetype=&quot;text/html&quot;)
  
  # save the image as a picture
  @app.route('/image', methods=['POST'])
  def image():
  
      blob = request.files['image']  # get the image
      f = ('%s.jpeg' % time.strftime(&quot;%Y%m%d-%H%M%S&quot;))
      print(&quot;images saved!!!!!!!&quot;)
      print(blob)
      blob.save('%s/%s' % (PATH_TO_TEST_IMAGES_DIR, &quot;realTime.jpeg&quot;))
      data=base64.b64decode(blob)
      print(data)
      return Response(&quot;%s saved&quot; % f)
  
  if __name__ == '__main__':
      app.run(debug=True, host='localhost')
  </code></pre>
  <p>You have same problem then connect me using <strong><a href="http://www.satyamskillz.me" rel="nofollow noreferrer">www.satyamskillz.me</a></strong></p>
  <p>If you don't understand my issue then comment below.</p>
  <p>Any kind of help will be appreciated.</p>