本章导读：本节实现从摄像头中和麦克风中采集到流数据并且展示出来。推荐阅读方式：理解+实操。
上节我们已经简单的通过getUserMedia方法来调起本机媒体设备，本节将详细的讲解并运用该方法。调用的方式“navigator.mediaDevices.getUserMedia(Constraints)”，其中“Constraints”是参数配置，该方法同样也返回一个Promise。 为了实践这个demo，下面新建了一个网页——demo2.2.html，代码实现如下。
<!-- demo2.2.html -->
<html> <head> <meta charset="UTF-8"> <title>demo 2.2 音视频采集</title> </head> <body> <video autoplay playsinline id="myvideo"></video> </body>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="./js/demo2.2.js"></script>
</html>
在上述代码中，新增了一个外部js库——adapter.js，用于适配不同浏览器的webrtc API，因为在webrtc1.0规范出来之前，各家浏览器厂商已经开始实现自家的webrtc API，不同的浏览器API的名称可能不一样，就拿getUserMedia来说，可能有这三种名称：getUserMedia、webkitGetUserMedia、mozGetUserMedia。对于开发者来说，都要考虑这些情况。 所以代码可能会变成如下的模样。
const getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia
如此，开发者可能疯掉，为了保护广大开发者的精神状态的，构建“和谐”的开发生态环境，谷歌维护了一个适配库——adapter.js，用于适配不同浏览器的API名称，尽可能保证统一API命名规范。该适配库的最新代码地址为：https://webrtc.github.io/adapter/adapter-latest.js，需要注意的是：最新的代码更新会直接体现到“adapter-latest.js”中，所以在实际项目开发中，最好锁定某个adapter.js版本，锁定格式为：https://webrtc.github.io/adapter/adapter-N.N.N.js, 例如 https://webrtc.github.io/adapter/adapter-1.0.2.js 。有了这个库，我们只需按照webrtc的官方规范“navigator.mediaDevices.getUserMedia ”调用即可。
在上述的HTML代码中， 在body标签还添加了一个video标签，id为“myvideo”，用于播放摄像头采集到的实时视频流。接下来开始编写JS逻辑代码。
首先检测对象的可用性。
// demo2.2.js
'use strict' let localVideo = document.getElementById("myvideo"); if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { throw new Error("getUserMedia is not supported"); }
其次编写成功获取流和失败获取流的回调函数，代码如下。
let localVideoElement = document.getElementById("myvideo"); // 读取视频元素
// 获取本地媒体流成功的回调
function getLocalMediaStreamSuccess(mediaStream) {
localVideoElement.srcObject = mediaStream; // 把媒体流对象直接赋值给video标签
}
最后调用getUserMedia，代码如下。
//音视频采集的配置 const mediaStreamConstraints = { video: true,//视频采集 audio: true,//音频采集 }; navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(getLocalMediaStreamSuccess).catch(getLocalMediaStreamException)
上述的mediaStreamConstraints是采集媒体流数据的参数对象，有两个属性：video、audio，这里暂定为设置为true，表示本次将采集视频和音频数据，当然实际的开发中参数配置没有这么简单，后面的会详细讲到。
完整代码如下：
// demo2.2.js
'use strict' let localVideoElement = document.getElementById("myvideo"); if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { throw new Error("getUserMedia is not supported"); } // 获取本地媒体流成功的回调 function getLocalMediaStreamSuccess(mediaStream) { localVideoElement.srcObject = mediaStream; } // 获取本地媒体流失败的回调 function getLocalMediaStreamException(error) { console.log('navigator.getUserMedia error: ', error); } //音视频采集的配置 const mediaStreamConstraints = { video: true, audio: true, }; navigator.mediaDevices.getUserMedia(mediaStreamConstraints) .then(getLocalMediaStreamSuccess).catch(getLocalMediaStreamSuccess)
最终的页面效果如下图2.2.1所示。 （我编辑文章的时候还在老家“闭关”，画面中有些凌乱，读者自行忽略）
图 2.2.1（媒体流采集页面效果）
在成功读取视频流的回调函数中，传进来一个mediaStream流对象，在处理函数getLocalMediaStreamSuccess只需要将该流对象赋值给video对象即可播放，后续的章节会详解讲解媒体流对象，比如媒体流对象中有“媒体轨”的概念、以及管理媒体轨、如何读取媒体流状态等。
至此，音视频的采集的显示问题已经搞定，内容比较简单，当然完整的视频采集内容还没结束。总结：首先，介绍了关于适配库adaper.js的用处，其次学习了“getUserMedia”的用法，调用的方式为“navigator.mediaDevices.getUserMedia(constraints)”，该方法返回一个Promise，异步结果对象是一个媒体流对象，可以直接挂载到多媒体标签video进行播放，constraints为流数据采集的参数，关于该参数，本节讲解的比较少，更详细的参数配置详见下一节。