录制视频和音频并上传到服务器 [英] 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

• 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是由Mauz Khan编写的用于视频/视频录制的库，实际上很好。使用这个库，我能够录制视频和音频，但是有一些问题，如下所示

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

• 在Chrome中我得到两个 Blob 对象一个用于音频，一个用于视频，为了生成最终文件，我需要将这些文件合并到最终视频文件中。我正在使用 FFMPEG 来转换和合并服务器上的文件。


• 虽然需要很长时间才能在服务器上转换文件，但它可以很好地处理短视频，但问题是从长记录文件开始。我收到异常的数组内存，用于记录 4分钟的更多内容以及当blob大小超过 10 MB

• 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
这是Mauz Khan的另一个库，它在特定时间间隔后给出记录的blob。我认为这将解决我的内存异常问题。所以我在下面实现了它

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

• 在间隔上获取blob块并将其发布到服务器

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

使用 FFMPEG

在小视频文件中转换blob块最后将所有小文件合并到最终使用 FFMPEG 完整的视频文件

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

我现在正在考虑使用纯javascript WebRTC UserMedia API 录制视频，但现在我真的感到震惊，因为甚至没有一篇文章解释如何录制带有音频的视频并上传到服务器。每个只显示的文章或答案都会获得UserMedia并在视频代码中显示流，如上例所示。我已经花了很多时间在这上面。请提出任何解决方案。如果有任何付费图书馆或服务，也可以。

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.

推荐答案

我知道这个答案来得很晚，但是现在有一个标准的形成原则： MediaRecorder ，目前支持Chrome和Firefox。

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.

此处提供了您想要的客户端功能示例。
然后，您可以获取blob并将其作为POST请求的一部分上传到服务器。通过这种方式，您可以获得仍可在服务器上进行转码的WebM（例如，使用ffmpeg）。

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

这篇关于录制视频和音频并上传到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！