2.2、音视频采集（一）

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

　本节将用到的API——“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>

在上述的代码中，在body标签添加了一个video标签，id为“myvideo”，用于展示通过摄像头采集到的实时视频流。对应的js逻辑代码放置在demo2.2.js中。在js中，首先要做对象可用性判断，代码如下。

'use strict'
let localVideo = document.getElementById("myvideo");
if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia)
{
    throw new Error("getUserMedia is not supported");
}

在webrtc1.0规范出来之前，各家浏览器厂商已经开始实现自己的webrtc API，不同的浏览器可能API的名称不一样，就拿getUserMedia来讲，可能有这三种名称：getUserMedia、webkitGetUserMedia、mozGetUserMedia。对于开发者来讲都要要考虑这些情况。所以，代码可能会变成这样。

const getUserMedia = navigator.mediaDevices.getUserMedia | navigator.mediaDevices.webkitGetUserMedia |  navigator.mediaDevices.mozGetUserMedia

如此就会给开发者带来不便，于是谷歌维护了一个适配库——adapter.js。地址为：https://webrtc.github.io/adapter/adapter-latest.js（最新版本的adapter），最新的代码随时会更改到“adapter-latest.js”中，所以在实际项目开发中，最好锁定某个版本，版本格式为：https://webrtc.github.io/adapter/adapter-N.N.N.js, 例如 https://webrtc.github.io/adapter/adapter-1.0.2.js 。

　　接下来，编写获取流成功的回调函数，代码如下。

let localVideoElement = document.getElementById("myvideo"); // 读取视频元素

// 获取媒体流成功
function getLocalMediaStreamSuccess(mediaStream) {

　　localVideoElement.srcObject = mediaStream; // 把媒体流对象直接赋值给 
}

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

function getLocalMediaStreamException(error) {

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

}

接下来开始，调用getUserMedia，代码如下。

//音视频采集的配置
const mediaStreamConstraints = {
    video: true,//视频采集
    audio: true,//音频采集
};
navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(getLocalMediaStreamSuccess).catch(gotLocalMediaStreamError)

完整代码如下：

// 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(gotLocalMediaStreamError)

2.2、音视频采集（一）

猜你喜欢