16

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.

Dipak Telangre
  • 1,792
  • 4
  • 19
  • 46
  • There is no native way of saving the stream. – Robert Aug 31 '15 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 Aug 31 '15 at 16:11
  • I don't understand why this down voted? So I can't ask questions again ! – Dipak Telangre Aug 31 '15 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 Sep 01 '15 at 02: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 Sep 01 '15 at 07:09
  • Possible duplicate of [How to record webcam and audio using webRTC and a server-based Peer connection](http://stackoverflow.com/questions/16571044/how-to-record-webcam-and-audio-using-webrtc-and-a-server-based-peer-connection) – winner_joiner Aug 05 '16 at 06:32

1 Answers1

3

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

geekonaut
  • 5,714
  • 2
  • 28
  • 30
  • Can you please provide a sample to post the blob to MVC action in C# ? I tried different ways but the parameter always null – Peck_conyon Feb 01 '18 at 03:50
  • I have no idea about MVC in C#, but if you need to POST a Blob in JavaScript, see https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob – geekonaut Feb 01 '18 at 09:23