分类导航

HTML5 发布时间：2022-04-26 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了HTML5 getUserMedia记录网络摄像头,音频和视频，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我想使用它来创建@L_197_1@视频/ Photobooth类似的应用程序，允许用户记录@L_197_1@简单(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>