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屋!