[英]Record video and audio and upload to the server
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. 我知道使用WebRTC我们可以从网络摄像头和麦克风获取流。 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.
我发现了很多关于相同的文章,但没有一个解释了如何从该流中提取blob并保存或上传到服务器。 What I got is up to get userMediaStream and show it in browser by creating blob object URL
我得到的是获取userMediaStream并通过创建blob对象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 RecorRTC
RecordRTC is library written by Mauz Khan for video/video recording which is good actually. RecordRTC是由Mauz Khan编写的用于视频/视频录制的库,实际上很好。 Using this library I am able to record the video and audio, But there some issues with this as below
使用这个库,我能够录制视频和音频,但是有一些问题,如下所示
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. Blob
对象一个用于音频,一个用于视频,为了生成最终文件,我需要将这些文件合并到最终视频文件中。 I am using FFMPEG
to convert and merge the files on sever. FFMPEG
转换和合并服务器上的文件。 Array memory out of exception
for recording more that 4 min
and when blob size exceed 10 MB
Array memory out of exception
超过4 min
,当blob大小超过10 MB
MediaStreamRecorder MediaStreamRecorder
This is another library by Mauz Khan which gives recorded blob after specific time interval. 这是Mauz Khan的另一个库,它在特定的时间间隔后给出记录的blob。 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 在间隔上获取blob块并将其发布到服务器
Convert blob chunk in small video file using FFMPEG
使用
FFMPEG
在小视频文件中转换blob块
At the end merge all the small file into final using FFMPEG
complete video file 最后使用
FFMPEG
完成视频文件将所有小文件合并到最终
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
. 我现在正在考虑使用纯javascript
WebRTC UserMedia API
录制视频,但现在我感到非常震惊,因为甚至没有一篇文章解释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. 每个文章或答案只显示
get UserMedia and show stream in video tag
作为上例中的显示代码。 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 know this answer comes late, but now there's a standard forming to do this natively: MediaRecorder , supported in Chrome and Firefox right now. 我知道这个答案来得很晚,但现在有一个标准的形成原则: MediaRecorder ,现在支持Chrome和Firefox。
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.
然后,您可以获取blob并将其作为POST请求的一部分上载到服务器。 This way you get WebM which you could still transcode on the server (eg using ffmpeg).
通过这种方式,您可以获得仍可在服务器上进行转码的WebM(例如,使用ffmpeg)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.