Record video and audio and upload to the server

Question

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.
I have tried below solution's

• WebRTC
  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
  

  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.
  } 
  

  How to extract object from this stream so I can save it or upload to the server?

• RecorRTC
  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

  • In chrome I am getting two Blob 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 FFMPEG to convert and merge the files on sever.
  • 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 Array memory out of exception for recording more that 4 min and when blob size exceed 10 MB

• MediaStreamRecorder
  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

  • Take blob chunk on interval and post it to the server

  • Convert blob chunk in small video file using FFMPEG

  • At the end merge all the small file into final using FFMPEG complete video file

  • 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
  • Also video start hanging for long video

I am now thinking to record video using pure javascript WebRTC UserMedia API but now I am really shocked because there is not even single article which explain How to record video with audio and upload to server. Every article or answer showing only get UserMedia and show stream in video tag 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.

Answer 1

I know this answer comes late, but now there's a standard forming to do this natively: MediaRecorder, supported in Chrome and Firefox right now.

There is a sample for the client side functionality you want here. You can then take the blob and upload it as part of a POST request to the server. This way you get WebM which you could still transcode on the server (e.g. using ffmpeg).