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

前端之家收集整理的这篇文章主要介绍了HTML5 getUserMedia记录网络摄像头,音频和视频前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用Chrome从浏览器捕获视频(网络摄像头)和音频(麦克风),然后将流保存为视频文件

我想使用它来创建一个视频/ Photobooth类似的应用程序,允许用户记录一个简单(30秒)的消息(视频和音频)的文件,以后可以观看。

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

谁可以帮助?

解决方法

MediaStreamRecorder是用于记录getUserMedia()流(仍在实现)的WebRTC API。它允许网络应用程序从现场音频/视频会话创建文件
<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/

原文链接:https://www.f2er.com/html5/169405.html

猜你在找的HTML5相关文章