HTML5 getUserMedia录制网络摄像头，包括音频和视频 [英] HTML5 getUserMedia record webcam, both audio and video

问题描述

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

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

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

谁可以提供帮助？

解决方案

MediaStreamRecorder是一个WebRTC API for录制getUserMedia（）流（仍在执行中）。它允许网络应用程序从现场音频/视频会话创建文件。

 < script language =javascripttype =text / javascript> 
函数onVideoFail（e）{
 console.log（'webcam fail！'，e）; 
}; 
 
函数hasGetUserMedia（）{
 //注意：Opera没有前缀。 
 return !!（navigator.getUserMedia || navigator.webkitGetUserMedia || 
 navigator.mozGetUserMedia || navigator.msGetUserMedia）; 
} 
 
 if（hasGetUserMedia（））{
 //好的去！ 
} else {
 alert（'getUserMedia（）在您的浏览器中不受支持'）; 
} 
 
 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'）; 
} 
 
函数startRecording（）{
 streamRecorder = webcamstream.record（）; 
 setTimeout（stopRecording，10000）; 
} 
函数stopRecording（）{
 streamRecorder.getRecordedData（postVideoToServer）; 
} 
函数postVideoToServer（videoblob）{
 
 var data = {}; 
 data.video = videoblob; 
 data.metadata ='测试元数据'; 
 data.action =upload_video; 
 jQuery.post（http://www.foundthru.co.uk/uploadvideo.php，data，onUploadSuccess）; 
} 
函数onUploadSuccess（）{
 alert（'video uploaded'）; 
} 
 
< / script> 
 
< div id =webcamcontrols> 
< button class =recordbuttononclick =startRecording（）;> RECORD< / button> 
< / div> 
  

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

Is it possible to use Chrome to capture video (webcam) and audio (microphone) from the browser and then save the stream as video file?

I would like to use this to create a video/photobooth-like application that allows users to record a simple (30 second) message (both video and audio) to files that can later be watched.

I have read the documentation but I have not (yet) seen any examples on how to capture both audio & video, also I did not find a way yet to store the results in a video file.

Who can help?

解决方案

MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams( still under implementation) . It allows web apps to create a file from a live audio/video session.

<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/

这篇关于HTML5 getUserMedia录制网络摄像头，包括音频和视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！