Record video and audio and upload to the server
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).
Related videos on Youtube
Dipak Telangre
Coder, Traveler & Dreamer !!! Checkout and Subscribe to my channel @ https://www.youtube.com/user/dipaktelangre/
Updated on June 21, 2022Comments
-
Dipak Telangre almost 2 years
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 URLnavigator.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 usingFFMPEG
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 that4 min
and when blob size exceed10 MB
- In chrome I am getting two
-
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 belowTake 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 explainHow to record video with audio and upload to server
. Every article or answer showing onlyget 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 over 8 years@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 asfile 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 andFFMPEG
might be trying to find the header information from the chunk file. Thanks for your reply I will try to merge file directly withoutFFMPEG
-
-
Peck_conyon over 6 yearsCan you please provide a sample to post the blob to MVC action in C# ? I tried different ways but the parameter always null
-
geekonaut over 6 yearsI have no idea about MVC in C#, but if you need to POST a Blob in JavaScript, see stackoverflow.com/questions/13333378/…