title: sending video stream from client to server with xmlhttpresponse
body: <p>I am trying to create a face detection web application.
  The app works this way.
  1-The user navigates to the url
  2-The camera starts on the client machine
  3-Each frame is then sent to the server for face detection
  4-Processed frame is then displayed on the web page</p>
  
  <p>now my question is this that whenever i am doing this at localhost it is almost running at realtime but when i am hosting this on aws the response time is so less the video lags about so much is there any reason for it or there is any another way to do it which will be good please help .</p>
  
  <p><strong>html page javascript code to send and receive</strong> </p>
  
  <pre><code>    video.addEventListener('play', function() {
              var $this = this; //cache
  
              // loop function to send video frames continuously
              (function oop() {
  
              // Till the video is playing
              if (!$this.paused &amp;&amp; !$this.ended) {
  
  
                  console.log($this.videoWidth);
                  console.log($this.videoHeight);
                  // draws the video frames to the canvas created
                  context.drawImage($this, 0, 0,200,200);
  
  
                  // generates the data from the canvas for each frame
                  var data = canvas.toDataURL('image/png');
                  //sending data using XMLHttpRequest (easy to use)
                  var xhr = new XMLHttpRequest();
                  // specify the method = POST for sending 
                  // url - which will be recieving our data
                  xhr.open("POST","http://127.0.0.1:5000/camera", true);
                  // transmit the frame to specified url
                  xhr.send(data);
                  // console.log(value)
  
  
                  //receving the frames   
                  var str = "data:image/jpeg;base64,";
                  var request = new XMLHttpRequest();
                  request.open('GET','http://127.0.0.1:5000/camera');
                  request.responseType = 'text';
                  request.onload = function() {   
                      var value = str.concat(request.response);   
                      img.src=value
                      // console.log(value)
                  };
                  request.send();
  
  
                  // specify the rate the function will iterate
                  setTimeout(oop, 1000 / 30); // drawing at 30fps
  
              }
              })();
  
          }, 0);
  
      }, false);
  </code></pre>
  
  <p><strong>server side code</strong></p>
  
  <pre><code>    from flask import request, Flask, render_template
      import base64
      import cv2
      import numpy as np
      from PIL import Image
      import io
      from flask_cors import CORS
  
  
      app=Flask(__name__)
      CORS(app)       # used for cross origin request handling
      # important -- otherwise we won't be able to send image to webpage
  
      count=0
      main_source=0
  
      # index function execute when traffic occur at '/'
      @app.route("/")
      def index():
          return render_template('index.html')
  
  
      @app.route('/camera', methods=['POST','GET'])
      def camera():
          if request.method == 'POST':
              # reading the image (byte stream)
              data=request.stream.read()
              # seperating data from the header {data:image/png;....}
              data=str(data).split(',')[1]
  
              global count
              global main_source
              count+=1
  
              ''' starting conversion of html-base64 data to cv-numpy array '''
              # decoding base64 data
              img = base64.b64decode(data)
              # generating numpy array from decoded data
              npimg = np.frombuffer(img, dtype=np.uint8)
              # generating 3d array from 1d
              source = cv2.imdecode(npimg, 1)
              ''' conversion finished '''
  
  
              ''' applying face detection on captured image '''
              # defining classifier --- haarcascade face classifier                                               
              face_cascade=
              cv2.CascadeClassifier('haarcascade_frontalface_default.xml')
              face_img = source.copy()
              # get faces from the image
              face_rects = face_cascade.detectMultiScale(face_img,scaleFactor=1.2)
              # draw rectangle over each face in image
              for (x,y,w,h) in face_rects: 
                  cv2.rectangle(face_img, (x,y), (x+w,y+h), (255,255,255), 10) 
              ''' face detection finished '''
  
  
              ''' conversion of image again to base64 for html '''
              face_img = face_img[...,::-1]                               # bgr to rgb
              im = Image.fromarray(face_img.astype("uint8"), mode='RGB')  # using pillow image library
              rawBytes = io.BytesIO()
              im.save(rawBytes, "JPEG")                                   # saving image to buffer
              rawBytes.seek(0)                                            # return to the start of the file
              encoded_string = base64.b64encode(rawBytes.read())          # read from file buffer and convert to base64
              ''' conversion to base64 finished '''
  
  
              main_source=encoded_string
              return ""
  
          else:
              print("return")
              if type(main_source)==int:
                  return ""
              return main_source
  
  
      if __name__ == "__main__":
          app.run()
  </code></pre>
  
  <p>thanks in advance.</p>