title: Record video stream from webcam and upload blob to server
body: <p>so I have a site that can record a video stream from the users webcam and convert it to a blob using <code>getUserMedia()</code>. I now want to send this blob to the server so the video can be saved and processed. I am having trobule sending a blob file via ajax, I have tried using both the formData + XMLHttpRequest() method as well as pure ajax. It is imperetive for my application that users can record video and immediately send this video to my server. </p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>so HTML:</p>
  
  <pre><code>    &lt;div class="demo"&gt;
      &lt;video id="preview" autoplay width="400" height="300"&gt;&lt;/video&gt;
      &lt;video id="recording" width="400" height="300" style="display:none;" controls&gt;&lt;/video&gt;
  
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar"&gt;&lt;/div&gt;
          &lt;span&gt;01:00&lt;/span&gt;
      &lt;/div&gt;
      &lt;button class="record"&gt;Record&lt;/button&gt;
      &lt;button class="upload"&gt;Upload&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant JS functions: </p>
  
  <pre><code>function captureVideo () {
      const preview = document.querySelector('video#preview');
      const recording = document.querySelector('video#recording');
      navigator.mediaDevices.getUserMedia({video: true}).then((stream) =&gt; {
          preview.srcObject = stream;
          preview.captureStream = preview.captureStream || preview.mozCaptureStream;
          return new Promise(resolve =&gt; preview.onplaying = resolve);
      }).then(() =&gt; {
          let recorder = new MediaRecorder(preview.captureStream());
          let data = [];
  
          recorder.ondataavailable = event =&gt; data.push(event.data);
          recorder.start();
          log(recorder.state + " for " + (60000/1000) + " seconds...");
  
          let stopped = new Promise((resolve, reject) =&gt; {
              recorder.onstop = resolve;
              recorder.onerror = event =&gt; reject(event.name);
          });
  
          $('button.stop').click(function () {
              recorder.stop();
          });
  
          return Promise.all([ stopped ]).then(() =&gt; data);
      }).then ((recordedChunks) =&gt; {
          let recordedBlob = new Blob(recordedChunks, {
              type: "video/webm"
          });
          recording.src = URL.createObjectURL(recordedBlob);
          $('#preview').hide();
          $('#recording').show();
          log("Successfully recorded " + recordedBlob.size + " bytes of " +
              recordedBlob.type + " media.");
          $('button.upload').click(function() {
              sendVideoToAPI(recordedBlob);
          });
      }).catch(log);
  }
  function sendVideoToAPI (blob) {
  
      let fd = new FormData();
      let file = new File([blob], 'recording');
  
      fd.append('data', file);
      console.log(fd); // test to see if appending form data would work, it didn't this is completely empty. 
  
  
      let form = new FormData();
      let request = new XMLHttpRequest();
      form.append("file",file);
      request.open("POST",  "/demo/upload", true);
      request.send(form); // hits the route but doesn't send the file
      console.log(request.response) // returns nothing
  
      // I have also tried this method which hits the route and gets a response however the file is not present in the request when it hits the server. 
      // $.ajax({
      //     url: Routing.generate('upload'),
      //     data: file,
      //     contentType: false,
      //     processData: false,
      //     error: function (res) {
      //         console.log(res);
      //     },
      //     success: function(res) {
      //         console.log(res);
      //     }
      // });
  }
  </code></pre>