如何获取音视频设备信息和音视频流

持续创作，加速成长！这是我参与「掘金日新计划 · 6月更文挑战」的第28天，点击查看活动详情

MediaDevices的enumerateDevices()方法获取音视频设备信息

获取音视频设备信息，需要使用到的是MediaDevices的enumerateDevices()方法，调用enumerateDevices()方法可获得一个媒体设备列表，包括音频、视频的输入、输出列表，如耳机、麦克风、摄像头等设备；enumerateDevices()方法返回的是一个Promise，可以使用.then方法，获取设备列表的数组。

如何使用

具体使用方法如下：

navigator.mediaDevices.enumerateDevices().then(getDevides).catch(handleError);
// 获取音视频设备列表
function getDevides(devideInfos){
    devideInfos.forEach(function(devideInfo){
        console.log('devideInfo:',devideInfo)
    })
}
// 捕获错误
function handleError(error){
    console.log('err',error)
}

兼容性问题

谷歌浏览器输出结果：

safari浏览器输出结果：

从输出结果可见，在不同浏览器上，我们获取到的设备信息是不同的，在谷歌浏览器上可正常获取到设备的id，但是在safari浏览器只能获取到设备的类型，因此在使用时，我们需要注意兼容性问题。

MediaDevices的getUserMedia()方法获取音视频流

var constraints = {
    video: true,
    audio: true
}
navigator.mediaDevices.getUserMedia(constraints).then(getMediaStream)
function getMediaStream(stream){
    console.log('stream',stream)
    
}

其中constraints为音视频权限，可以选true或者false，video里也可以传具体的宽、高、帧率等信息。 getUserMedia方法返回的是一个Promise，也可以用.then的形式获取到音视频信息。

在控制台调用上述代码时，会弹出调起摄像头、麦克风的弹窗，依次点击确定，就可以打开摄像头。

此时控制台会打印active和id信息

也可以将摄像头信息，直接赋值给video标签，这样，就可以页面中看到摄像头中的画面和麦克风采集到的声音

<video autoplay playsinline id="player"></video>
var videoPlay = document.querySelector('video#player');
function getMediaStream(stream){
   videoplay.srcObject = stream;
}

此时我的摄像头就是被打开的状态，正在寻找关闭摄像头的api，拜拜，下篇文章见。