仅使用 javascript/html5 获取麦克风/网络摄像头记录流

Get mic/webcam record stream using javascript/html5 only

本文关键字:网络 摄像头 记录 麦克风 html5 javascript 获取      更新时间:2023-09-26

我制作了一个需要使用 java 脚本和 html5(无 flash)录制来自 PC/移动麦克风/相机的流的 Web 应用程序。 我该怎么做?

有两种方法,getusermedia 和使用输入的传统方法,这是 ios6 允许的:

旧方式:

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

当前方式:

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
  }, onFailSoHard);
} else {
  video.src = 'somevideo.webm'; // fallback.
}

这些示例是从此处复制的。 HTML5Rocks也有许多工作示例。

navigator.getUserMedia ( constraints, successCallback, errorCallback );
  • 带有示例的简短描述
  • 应用程序接口
  • 支持的浏览器