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

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

Note that, at the time I'm writing, this is still experimental territory

您可以使用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
}

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

How to programmatically request media permissions?

javascript

getusermedia

twilio-video