title: Record video and audio and upload to the server
body: <p>I want to add video recording functionality to the website. I have been searching and trying every possible available solution but nothing yet working fine. <br/>  I have tried below solution's  </p>
  
  <ul>
  <li><p><code>WebRTC</code>  <br/> I know using WebRTC we can get the stream from the webcam and microphone. I have found plenty much article about the same but none of them explained how to extract blob from that stream and save it or upload to server. What I got is up to get userMediaStream and show it in browser by creating blob object URL <br/></p>
  
  <pre><code>navigator.getUserMedia  = navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia;
  
  var video = document.querySelector('video');
  
  if (navigator.getUserMedia) {
    navigator.getUserMedia({audio: true, video: true}, function(stream) {
     video.src = window.URL.createObjectURL(stream);
  }, errorCallback);
  } else {
    video.src = 'somevideo.webm'; // fallback.
  } 
  </code></pre>
  
  <p>How to extract object from this stream so I can save it or upload to the server?</p></li>
  <li><p><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecorRTC</a> <br/> RecordRTC is library written by Mauz Khan for video/video recording which is good actually. Using this library I am able to record the video and audio, But there some issues with this as below </p>
  
  <ul>
  <li>In chrome I am getting two <code>Blob</code> object one for Audio and one for Video, In order to generate final file I need to merge that files into final video file. I am using <code>FFMPEG</code> to convert and merge the files on sever. </li>
  <li>Its works fine with short video although taking long time to convert files on server, But issue start with the long recording files. I am getting <code>Array memory out of exception</code>  for recording more that <code>4 min</code> and when blob size exceed <code>10 MB</code> </li>
  </ul></li>
  <li><p><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/MediaStreamRecorder">MediaStreamRecorder</a> <br/> This is another library by Mauz Khan which gives recorded blob after specific time interval. I thought this will solve my memory exception issue. So I implemented it as below </p>
  
  <ul>
  <li><p>Take blob chunk on interval and post it to the server </p></li>
  <li><p>Convert blob chunk in small video file using <code>FFMPEG</code></p></li>
  <li><p>At the end merge all the small file into final using <code>FFMPEG</code> complete video file </p></li>
  <li>Issue with this is when small blob chunk saved into small video file there seems to be starting byte of file corrupted so it get hanged at starting time of each small file and after merging of all the file into final completed video, video gets hang and there 'trrrrrr' noise sound after each interval </li>
  <li>Also video start hanging for long video </li>
  </ul></li>
  </ul>
  
  <p>I am now thinking to record video using pure javascript <code>WebRTC UserMedia API</code> but now I am really shocked because there is not even single article which explain <code>How to record video with audio and upload to server</code>. Every article or answer showing only <code>get UserMedia and show stream in video tag</code> as show code in above example. I already spend lot of time on this. please suggest any solution. It will be also fine if there is any paid library or service.   </p>