如何以编程方式请求媒体权限？

Question

摄像头和麦克风在 Chrome 中被手动屏蔽（如下图所示）：

使用 twilio-video 库方法创建本地媒体轨道 createLocalAudioTrack 和 createLocalVideoTrack 会引发下一个异常：

DOMException: Permission denied
code: 0
message: "Permission denied"
name: "NotAllowedError"

尝试使用浏览器原生getUserMedia时如下：

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .catch(error => {
    console.log(error)
  })

它的控制台在 catch 块中记录了相同的异常：

DOMException: Permission denied

问题：是否可以在创建本地媒体轨道之前提前知道没有权限（在浏览器中手动阻止摄像头和麦克风）并以编程方式请求此类创建曲目的权限（显示请求权限的弹出窗口）？

Answer 1

请注意，在我撰写本文时，这仍是实验领域

您可以使用Permissions.query()查询权限：

const permissionDescriptors = [
  {name: 'camera'},
  {name: 'microphone'},
];

const permissions = await Promise.all(permissionDescriptors.map(async descriptor => ({
  descriptor,
  status: await navigator.permissions.query(descriptor),
})));

for (const {descriptor, status} of permissions) {
  console.log(
    descriptor.name, // 'camera' | 'microphone'
    status.state, // 'granted' | 'denied' | 'prompt'
  );
}

您将能够使用Permissions.request() 请求权限。但是，目前任何浏览器都不支持此功能。

今天，最好尝试访问MediaStream，并捕获并处理潜在的异常：

let mediaStream;
try {
  const constraints = { audio: true, video: true };
  mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
}
catch (ex) {
  if (ex instanceof DOMException) {
    if (ex.name === 'NotAllowedError') {
      // handle permission denied
    }
    else if (ex.name === 'NotFoundError') {
      // handle media not found
    }
    else {
      // handle unexpected DOMException
    }
  }
  else {
    // handle unexpected error
  }
}

if (!mediaStream) {
  // handle no stream
}
else {
  // do something with stream
}