在 WebRTC 中，如何以更佳的方式申请 `getUserMedia` 媒体权限？

2023-09-29 03:23:08

更佳的 getUserMedia 媒体权限申请方式

1. 权限申请配置

在申请 getUserMedia 媒体权限时，我们需要提供一个配置对象，其中包含要申请的权限类型、是否强制申请以及是否显示权限请求说明。我们应该根据实际情况合理配置这些选项，以确保用户能够清楚地了解我们的权限申请意图。

const constraints = {
  audio: true,
  video: {
    facingMode: "user"
  }
};

2. 成功时的媒体流预览及销毁处理

当 getUserMedia 媒体权限申请成功时，我们需要对获取到的媒体流进行预览和销毁处理。我们可以通过创建一个新的 MediaStream 对象来预览媒体流，并将其附加到视频或音频元素上进行播放。在媒体流不再需要时，我们需要及时将其销毁，以释放资源。

const video = document.querySelector("video");

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    video.srcObject = stream;
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

video.onended = () => {
  stream.getTracks().forEach((track) => {
    track.stop();
  });
};

3. 失败时的通用提示处理

当 getUserMedia 媒体权限申请失败时，我们需要向用户展示一个友好的提示，以便用户了解失败的原因并重新进行权限申请。我们可以通过使用 alert() 或 confirm() 函数来实现这一点。

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "NotFoundError") {
      alert("摄像头或麦克风未连接，请检查设备是否正常工作。");
    } else if (error.name === "PermissionDeniedError") {
      alert("您已拒绝了摄像头或麦克风的使用权限，请重新进行权限申请。");
    } else {
      alert("未知错误，请稍后重试。");
    }
  });