桌面浏览器

Question

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

我想用它来创建一个类似于视频/照片的应用程序，允许用户将简单的（30秒）消息（包括视频和音频）录制到以后可以观看的文件中。

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

谁可以提供帮助？

Answer 1

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/

Answer 2

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

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

以及保存音频的有用信息

https://github.com/mattdiamond/Recorderjs

Answer 3

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

桌面浏览器

MediaRecorder API（HTML）

MediaRecorder API（MediaStream Recorder）依靠getUserMedia()进行网络摄像头访问和is supported by Firefox 30+ and 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 Media Capture（explained here with screenshots）使用设备的原生视频录制应用和编解码器录制视频。 HTML Media Capture在本地（在设备上）记录，然后将文件上传（正常的HTTP上载过程）到Web服务器。

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

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

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

Answer 4

这是我的github repo，它提供了一个用于录制音频+视频的库，最后将内容作为块上传到服务器

这支持chrome，Opera
上传时间减少，因为blob被切片并上传

Html_Audio_Video_Recorder

Answer 5

使用以下内容：

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

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

5 个答案:

桌面浏览器

移动浏览器