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 plete 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 pleted 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.

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 plete 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 pleted 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.

• javascript
• html
• audio
• video
• webrtc

Share Improve this question Follow asked Aug 31, 2015 at 13:31 Dipak TelangreDipak Telangre 1,99344 gold badges2323 silver badges4949 bronze badges 6

• There is no native way of saving the stream. – Robert Commented Aug 31, 2015 at 15:13
• @Robert Is there any alternative way for Video recording through browser, even flash or other technology. I have seen lot of websites implemented video recording function. How they do ? – Dipak Telangre Commented Aug 31, 2015 at 16:11
• I don't understand why this down voted? So I can't ask questions again ! – Dipak Telangre Commented Aug 31, 2015 at 19:00
• 1 firefox supports direct screen capture( as .webm), but chrome doesn't, that's why you need to capture audio(as .wav) and video( as .webm) and merge them together in server side. One thing that I noticed in firefox recording as chunks is, you do not use FFMPEG to merge them, you just need to append all the files in the right sequence, at least that was the case when I recorded audio in firefox. – mido Commented Sep 1, 2015 at 2:15
• 3 @mido22 I think you are right about the firefox , I should not use FFMPEG . When I tried to merge files with FFMPEG it show warning as file does not have content length and final file would be corrupted and result of the merged file is corrupted one. This is happening because each chunk might not contain the header information and FFMPEG might be trying to find the header information from the chunk file. Thanks for your reply I will try to merge file directly without FFMPEG – Dipak Telangre Commented Sep 1, 2015 at 7:09

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

I know this answer es 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).