2.2、视频采集（一）：初步采集

本章导读：本节实现从摄像头中和麦克风中采集到流数据并且展示出来。推荐阅读方式：理解+实操。

　上节我们已经简单的通过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标签
}

//获取本地媒体流失败的回调

function getLocalMediaStreamException(error) {

　console.log('navigator.getUserMedia error: ', error);

}

最后调用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为流数据采集的参数，关于该参数，本节讲解的比较少，更详细的参数配置详见下一节。