HTML5 getUserMedia录制网络摄像头视频和音频

Question

HTML5 getUserMedia录制网络摄像头视频和音频

htmlgetusermedia

32

是否可以使用Chrome从浏览器中捕获视频（网络摄像头）和音频（麦克风），然后将流保存为视频文件？

我想用它来创建一个类似于视频/照片展示的应用程序，允许用户记录一个简单的（30秒）消息（包括视频和音频），以便稍后观看。

我已经阅读了文档，但尚未找到如何捕获音频和视频的示例，也没有找到一种方法将结果存储在视频文件中。

谁能帮忙？

- Harm Kabisa

5个回答

5

据我所知，目前没有一种方法可以同时录制音频和视频并将它们保存为一个文件。但是，可以将音频保存为wav文件，视频保存为webm文件。

以下是如何保存视频的好文章： http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia 这是一个有用的工具来保存您的音频： https://github.com/mattdiamond/Recorderjs

- TarranJones

5

目前有几种可用的生产就绪解决方案，用于在网络上录制音频和视频。

桌面浏览器

MediaRecorder API (HTML)

MediaRecorder API（MediaStream Recorder）依赖于 getUserMedia() 来访问网络摄像头，并且受 Firefox 30+ 和 Chrome 49+ 支持。

Flash 客户端 + rtmp 媒体服务器

您需要一个 Flash (.swf) 应用程序嵌入到网页中，捕获访问者的摄像头和麦克风，使用内置编解码器：H.264、Spark、Nellymoser ASAO 和 Speex 对原始视频和音频数据进行编码，并通过 rtmp 流式传输记录的数据 到媒体服务器。

由于数据是流式传输的，一旦停止录制，所有数据已经在媒体服务器上（无需上传时间）。另一个优点是，如果客户端计算机崩溃，视频不会丢失。

您至少有三个选项可以选择媒体服务器：

Red5是免费且开源的（我个人为其录制过程贡献了代码补丁，可以保证其运行良好）
Wowza（每月65美元）
Adobe Media Server Pro（4500美元）

媒体服务器通过流/rtmp接收数据，并根据客户端使用的编解码器和媒体服务器使用的编解码器，将音频和视频数据多路复用在mp4、flv或f4v文件中。

这个Flash客户端+媒体服务器录制过程自2002年Flash Player 6以来一直运行良好。

移动浏览器

HTML媒体捕获

您可以使用HTML媒体捕获（此处有截图解释）来使用设备的本机视频录制应用程序和编解码器记录视频。 HTML媒体捕获在本地记录（在设备上），然后将文件上传（正常的HTTP上传过程）到Web服务器。

在iOS设备上使用Safari的HTML媒体捕获时，例如iPhone，它会创建一个无法在Android上播放的.mov文件。解决方案是使用FFmpeg在服务器端将其转换为.mp4。

在Android浏览器中使用HTML媒体捕获的最终结果将是可在iPhone上播放的.mp4文件。一些旧的Android手机会创建.3gp文件。

实现两者的商业解决方案（Flash客户端+桌面媒体服务器和移动HTML媒体捕获）是HDFVR。

- octavn

2

这是我的Github仓库，提供了一个用于录制音频+视频并将内容作为块上传到服务器的库。

支持Chrome、Opera浏览器
由于切片和上传Blob，上传时间被缩短

Html_Audio_Video_Recorder

- imal hasaranga perera

0

请使用以下内容：

<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 中将表单视为普通文件处理

- AgeDeO

也许可以在这里看一下：http://www.html5rocks.com/en/tutorials/getusermedia/intro/ - AgeDeO

这是HTML媒体捕获规范，不幸的是它只适用于移动设备。它在大部分情况下运行良好，唯一的例外是在iOS上尝试仅录制音频时仍会弹出视频录制器。 - octavn

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

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

- kongaraju · Accepted Answer

MediaStreamRecorder是用于记录getUserMedia()流的WebRTC API（仍在实现中）。它允许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>

http://www.w3.org/TR/mediastream-recording/