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使浏览器可以与计算机上的媒体设备进行交互。它为高级用例提供了足够的灵活性,界面直观而且很好用。
文章地址:https://webrtc.ventures/2020/03/getusermedia-webrtc-api/
原文作者:Hector Zelaya