是否可以使用 Chrome 从浏览器捕获视频（网络摄像头）和音频（麦克风），然后将流保存为视频文件？
我想用它来创建一个类似视频/照相亭的应用程序，允许用户将简单的（30 秒）消息（视频和音频）录制到以后可以观看的文件中。
我已经阅读了文档，但我还没有看到任何关于如何捕获音频和视频的示例，我也没有找到将结果存储在视频文件中的方法。
谁能帮忙？
问问题
53898 次
5 回答
14
MediaStreamRecorder 是一个 WebRTC API，用于记录 getUserMedia() 流（仍在实施中）。它允许 Web 应用程序从实时音频/视频会话创建文件。
<script language="javascript" type="text/javascript">
function onVideoFail(e) {
console.log('webcam fail!', e);
};
function hasGetUserMedia() {
// Note: Opera is unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
// Good to go!
} else {
alert('getUserMedia() is not supported in your browser');
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var streamRecorder;
var webcamstream;
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
webcamstream = stream;
// streamrecorder = webcamstream.record();
}, onVideoFail);
} else {
alert ('failed');
}
function startRecording() {
streamRecorder = webcamstream.record();
setTimeout(stopRecording, 10000);
}
function stopRecording() {
streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
var data = {};
data.video = videoblob;
data.metadata = 'test metadata';
data.action = "upload_video";
jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
alert ('video uploaded');
}
</script>
<div id="webcamcontrols">
<button class="recordbutton" onclick="startRecording();">RECORD</button>
</div>
于 2013-05-21T11:22:33.487 回答
5
目前有几种可用于在 Web 上录制音频和视频的生产就绪解决方案。
桌面浏览器
媒体记录器 API (HTML)
MediaRecorder API (MediaStream Recorder) 依赖于getUserMedia()网络摄像头访问，并受 Firefox 30+ 和 Chrome 49+ 支持。
Flash 客户端 + rtmp 媒体服务器
您将需要嵌入在您的网页中的 Flash (.swf) 应用程序，捕获访问者的网络摄像头和麦克风，对原始视频和音频数据进行编码（使用内置编解码器：H.264、Spark、Nellymoser ASAO 和 Speex）和流式传输记录（通过 rtmp）到媒体服务器的数据。
因为数据是流式传输的，所以一旦您停止录制，所有数据都已经在媒体服务器上（没有上传时间）。另一个优点是，如果客户端计算机崩溃，视频不会丢失。
媒体服务器至少有 3 个选项：
- Red5是免费和开源的（我个人为它的录制过程贡献了代码补丁，我可以保证它工作得很好）
- Wowza（65 美元/月）
- Adobe Media Server Pro（4500 美元）
媒体服务器接收（同样通过流式传输/rtmp，而不是通过 http）数据，并且根据客户端上使用的编解码器和使用的媒体服务器，音频和视频数据在 mp4、flv 或 f4v 文件中多路复用。
这个 Flash 客户端 + 媒体服务器录制过程 - 自 2002 年的 Flash Player 6 以来一直运行良好。
移动浏览器
HTML 媒体捕获
您可以使用设备的本机视频录制应用程序和编解码器使用 HTML 媒体捕获（此处使用屏幕截图进行解释）来录制视频。HTML Media Capture 在本地（在设备上）记录，然后将文件上传（正常的 HTTP 上传过程）到 Web 服务器。
在 iPhone 等 iOS 设备上的 Safari 中使用 HTML 媒体捕获时，它会创建一个无法在 Android 上播放的 .mov 文件。解决方案是使用 FFmpeg 将其转换为 .mp4 服务器端。
在 Android 浏览器中使用 HTML Media Capture 时，最终结果将是一个可在 iPhone 上播放的 .mp4 文件。一些较旧的 Android 手机会创建 .3gp 文件。
HDFVR是一种同时实现（桌面上的 Flash 客户端 + 媒体服务器和移动设备上的 HTML 媒体捕获）的商业解决方案。
于 2015-02-24T15:27:39.790 回答
5
据我所知，没有这样的方法可以将音频和视频一起录制并将它们保存为一个文件。可以将音频捕获并保存为 wav 文件，将视频捕获并保存为 webm 文件。
这是一篇关于如何保存视频的好文章； http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
和一个有用的工具来保存你的音频
于 2013-05-02T13:56:52.500 回答
2
这是我的 github 存储库，它提供了一个用于录制音频 + 视频的库，最后将内容作为块上传到服务器
- 这个支持chrome、Opera
- 上传时间减少，因为 blob 被切片和上传
于 2014-07-13T20:26:11.197 回答
1
使用以下内容：
<input type="file" accept="image/*;capture=camera"> \\ Snapshot
<input type="file" accept="video/*;capture=camcorder"> \\ Video
<input type="file" accept="audio/*;capture=microphone"> \\ Audio
然后将表单视为 php 中的普通文件
于 2013-05-01T13:59:36.047 回答