WebRTC入门：API深度解析——getUserMedia

WebRTC由多个执行不同功能以建立媒体会话的API组成。我们将在本系列中回顾WebRTC的那些API。首先，我们从getUserMedia开始。getUserMedia使浏览器与媒体设备（即麦克风和摄像头）进行交互。

调用getUserMedia时，它会提示是否允许访问媒体设备。该提示仅在安全环境中可用，比如本地主机和在HTTPS下提供服务的站点。

调用getUserMedia API

最初，我们可以在navigator.getUserMedia上找到getUserMedia。尽管在某些浏览器上这个操作仍然可行，我们不建议这样做。因为它被标记为已弃用。我们的首选选项是navigator.mediaDevices.getUserMedia。

getUserMedia的基本语法为：

navigator.mediaDevices.getUserMedia(constraints)

默认情况下，此代码会返回一个promise，该promise会被解析为媒体流。用户可以直接使用它，也可以与async / await一起使用。

//getUserMedia using raw promises

navigator.mediaDevices.getUserMedia({video: true, audio: true})

.then(stream => … )

.catch(err => … )

//getUserMedia using async/await

async function getMedia() {

let stream = null

try {

stream = navigator.mediaDevices.getUserMedia({video: true, audio: true})

…

} catch(err) {

…

}

}

promise接收一个表明API所需媒体属性的约束参数，此参数由两部分组成：video和audio。最简形式下，它们的值可以是允许使用设备的布尔值（boolean）。因此{video：true，audio：false}表示getUserMedia将尝试获取视频轨道，而不是音频轨道。

getUserMedia API中的约束操作

除了布尔值（boolean），约束操作还允许选择对象。这使用户可以自定义结果轨道的属性。可用的自定义包括音量、音轨和视频大小的延迟值或前置后置摄像头选择（如果摄像头可用的话）。

navigator.mediaDevices.getUserMedia(

{

video: {

height: 480,

width: 640,

facingMode: "user"

},

audio: true

}

)

示范使用getUserMedia API

现在，让我们自己动手创建一个自定义视频轨道的可行示例。Clone repo,然后安装依赖项。

clone https://github.com/agilityfeat/webrtc-apis-indepth

cd webrtc-apis-indepth

npm install

npm run gum

打开浏览器，将页面跳转到http：// localhost：8080。选择所需的视频质量，然后单击“获取媒体”。

（使用getUserMedia API视频流的屏幕截图）

现在，选择其他质量。然后单击“更改媒体”。

（选择其他质量后，使用getUserMedia API视频流的屏幕截图）

让我们看看内部发生了什么变化。“获取媒体”触发操作，该操作调用getUserMedia并将生成的媒体流分配给视频元素。然后，视频轨道的应用约束就显示了。

async function obtainMedia() {

changeMedia.style.display = "block";

getMedia.style.display = "none";

stream = await navigator.mediaDevices.getUserMedia({

video: {

height: { exact: parseInt(quality.value) }

}

});

localVideo.srcObject = stream;

settings.innerText = JSON.stringify(

stream.getVideoTracks()[0].getConstraints()

);

}

getMedia.addEventListener("click", obtainMedia);

getMedia.addEventListener("touchstart", obtainMedia);

当点击“更改媒体”时，视频的大小可以通过调用applyConstraints（）来改变。

async function changeMediaProperties() {

const videoTrack = stream.getVideoTracks()[0];

const constraints = videoTrack.getConstraints();

constraints.height = parseInt(quality.value);

await videoTrack.applyConstraints(constraints);

settings.innerText = JSON.stringify(

stream.getVideoTracks()[0].getConstraints()

);

}

changeMedia.addEventListener("click", changeMediaProperties);

changeMedia.addEventListener("touchstart", changeMediaProperties);

结论：

getUserMedia API使浏览器可以与计算机上的媒体设备进行交互。它为高级用例提供了足够的灵活性，界面直观而且很好用。