HTML5 getUserMedia记录网络摄像头,包括音频和视频

Question

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

我想用它来创建一个类似于视频/照片光滑的应用程序,允许用户将一条简单的(30秒)消息(包括视频和音频)记录到以后可以观看的文件中.

我已经阅读了文档,但我还没有看到有关如何捕获音频和视频的任何示例,我也没有找到将结果存储在视频文件中的方法.

谁可以帮忙？

Answer 1

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>

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

Answer 2

据我所知,没有这种方法可以将音频和视频一起录制并将它们保存为一个文件.可以将音频捕获并保存为wav文件,将视频保存为webm文件.

这是一篇关于如何保存视频的精彩文章; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

并且保存您的音频非常有用

https://github.com/mattdiamond/Recorderjs

Answer 3

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

桌面浏览器

媒体记录器 API (HTML)

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

Flash 客户端 + rtmp 媒体服务器

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

因为数据是流式传输的，所以只要您停止录制，所有数据都已经在媒体服务器上（没有上传时间）。另一个优点是如果客户端计算机崩溃，视频不会丢失。

媒体服务器至少有 3 个选项：

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

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

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

移动浏览器

HTML 媒体捕获

您可以使用 HTML Media Capture（此处通过屏幕截图进行说明）使用设备的本机视频录制应用程序和编解码器录制视频。HTML Media Capture 在本地（在设备上）记录，然后将文件上传（正常的 HTTP 上传过程）到 Web 服务器。

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

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

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

Answer 4

使用以下内容：

<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 中的普通文件