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使浏览器可以与计算机上的媒体设备进行交互。它为高级用例提供了足够的灵活性,界面直观而且很好用。

文章地址:https://webrtc.ventures/2020/03/getusermedia-webrtc-api/

原文作者:Hector Zelaya

 

填写常用邮箱,接收社区更新

WebRTC 中文社区由

运营