录制视频和音频并上传到服务器。

Question

录制视频和音频并上传到服务器。

17

我希望在网站上添加视频录制功能。我已经搜索并尝试了所有可能的解决方案，但目前还没有一个好用的。
我已经尝试了以下解决方案：

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

我现在考虑使用纯javascript的WebRTC UserMedia API记录视频，但现在我真的很震惊，因为甚至没有一篇文章能够解释如何录制带有音频并上传到服务器的视频。每篇文章或答案都只展示“获取UserMedia并在视频标签中显示流”的代码，就像上面的例子一样。我已经花了很多时间在这上面，请建议任何解决方案。如果有付费库或服务也可以。

- Dipak Telangre

没有本地保存流的方式。 - Robert

@Robert 是否有通过浏览器进行视频录制的替代方法，即使是使用Flash或其他技术。我已经看到很多网站实现了视频录制功能。他们是如何做到的？ - Dipak Telangre

我不明白为什么这个被踩了？那么我就不能再问问题了！ - Dipak Telangre

1

火狐浏览器支持直接屏幕捕获（以“.webm”格式），但谷歌浏览器不支持，这就是为什么你需要在服务器端捕获音频（以“.wav”格式）和视频（以“.webm”格式）并将它们合并在一起的原因。我注意到在火狐浏览器中录制的一个问题是，你不需要使用FFMPEG来合并它们，你只需要按正确的顺序附加所有文件，至少在我录制火狐浏览器中的音频时是这样的。 - mido

3

@mido22，我认为你关于Firefox的观点是正确的，我不应该使用 FFMPEG。当我尝试使用FFMPEG合并文件时，它会显示警告文件没有内容长度，最终文件将会损坏，且合并后的文件结果是损坏的。这是因为每个块可能不包含标头信息，而 FFMPEG 可能正在尝试从块文件中查找标头信息。谢谢你的回复，我将尝试直接合并文件而不使用 FFMPEG。 - Dipak Telangre

可能是如何使用WebRTC和基于服务器的对等连接记录网络摄像头和音频的重复问题。 - winner_joiner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- geekonaut · Accepted Answer

我知道我回答晚了，但现在有一个正在形成的标准可以本地执行此操作：MediaRecorder，目前在Chrome和Firefox上已支持。这里有一个客户端功能的示例here。然后，您可以将Blob作为POST请求的一部分上传到服务器。这样，您就可以获得WebM格式的视频，您仍然可以在服务器上转码（例如使用ffmpeg）。