4.2　获取用户媒体数据

获取用户媒体数据用的是mediaDevices.getUserMedia()方法，这个方法会提醒用户需要使用音频/视频输入设备，比如摄像头、屏幕共享或者麦克风。如果用户给予许可，就可以成功返回数据流，MediaStream对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用，错误异常就会被捕获。类似地，PermissionDeniedError或者NotFoundError对象作为它的参数。注意，有可能以上两种情况都不会出现，因为不要求用户一定作出选择（允许或者拒绝）。语法如下所示。

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
    /* 使用这个stream */
})
.catch(function(err) {
    /* 处理error */
});

参数constraints即为MediaStreamConstaints对象，指定了请求使用媒体的类型，还有每个类型所需要的参数。

当调用成功后，then中指定的函数就被调用，包含了媒体流的MediaStream对象作为它的参数，你可以把媒体流对象赋值给合适的元素，然后使用它，就像下面的代码所示，video为一个视频对象，将其数据源指定为返回的stream。

video.srcObject = stream;

当调用catch失败时，catch中指定的函数就会被调用，MediaStreamError对象作为它唯一的参数，此对象基于DOMException对象构建。错误码描述如下：

·PermissionDeniedError：使用媒体设备请求被用户或者系统拒绝。

·NotFoundError：找不到constraints中指定的媒体类型。

以前的API是直接使用navigator.getUserMedia()来采集数据的，包括了适用于多种浏览器前缀的代码。由于支持WebRTC标准的主流浏览器（如Chrome，FireFox，Safari，Edge等）的实现有一定差异，所以这里我们通常需要做一些适配工作，适配的代码如下所示。为了方便测试，需要统一采用navigator.getUserMedia()来获取音视频数据。

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

这种使用方式已经被废除，现在使用MediaDevices.getUserMedia()来获取媒体数据。为了兼容老的应用程序，可以使用这种方式。