使用媒体捕获API

>本文探讨了媒体捕获和流媒体API（getusermedia），使网页能够访问没有插件的网络摄像头和麦克风。 得到包括Chrome，Opera，Firefox和Edge在内的主要浏览器的支持。

>

> API提供视频，音频和图像捕获；控制相机设置（分辨率，帧速率，焦点）；多相机支持；并与其他API集成。 应用程序范围从视频聊天到社交媒体内容创建。需要使用用户权限，并且功能可用性在设备和浏览器之间各不相同。

>

关键功能：

> API的中心

getUserMedia()方法使用MediaStreamConstraints。 enumerateDevices()>帮助通过其deviceId选择特定的设备。 成功的呼叫返回MediaStream对象。

>浏览器兼容性：

API

拥有广泛的支持，可以追溯到Chrome 21，Opera 18和Firefox 17，最近还增加了Edge。 ModernIzr简化了浏览器兼容性检查。 没有现代化，需要进行手动检查以处理浏览器不一致。

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

>或者，没有现代化：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

>视频播放：

html包含a

标签（设置为

和<video>）以显示捕获的流。 JavaScript动态设置视频元素的autoplay（或muted作为后备）。srcObject src

<video id="videoTag" src="" autoplay muted class="view--video__video"></video>

相机访问和权限：

> API优先级用户安全。 启动后，该应用程序请求使用网络摄像头（如果指定）使用网络摄像头（或网络摄像头和麦克风）。

接受一个指定媒体访问要求的对象（

网络摄像头，getUserMedia()均为{video: true}）。{video: true, audio: true}

多个网络摄像头支持：

>检索有关可用媒体输入/输出设备（麦克风，相机，扬声器）的信息。 它返回了一个诺言，可以解决一个设备对象的数组，每个对象都具有MediaDevices.enumerateDevices()，kind和>的属性。 此功能仍然是实验性的。deviceId label

设置视频源：

>

函数将视频标签的源设置为接收到的

。 它使用initializeVideoStream()如果受到支持，则掉回MediaStream srcObject URL.createObjectURL()

>

var initializeVideoStream = function(stream) {
    // ... (code to set video source) ...
};

CSS过滤器：>该应用程序将实时CSS过滤器应用于视频和图像。 JavaScript函数通过预定义的过滤器（灰度，棕褐色，模糊等）循环，将相应的CSS类添加到视频元素中。

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

图像保存：

（IE10）或使用navigator.msSaveBlob的后备和toDataURL>元素保存捕获的图像。 <a>

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

进一步的开发：

未来的可能性包括用于高级过滤和交互式环境的WebGL集成，以及用于音频操作的Web音频API集成。 移动浏览器支持也正在扩展。

（省略原始输入（包括常见问题解答和Microsoft Learning Resources）的其余部分被省略了，因为它在很大程度上是描述性的，并且与代码中所示的媒体捕获API的核心功能不直接相关。摘要。）

以上是使用媒体捕获API的详细内容。更多信息请关注PHP中文网其他相关文章！