有没有办法在 JavaScript 中检测浏览器权限（特别是相机和麦克风）而不提示上述权限？

Question

我的目的是根据用户的浏览器权限向用户显示正确的消息，即。如果尚未授予权限，则显示“允许访问”之类的内容，如果已提供权限，则根本不显示用户反馈。

但是使用 navigator.mediaDevices.getUserMedia()，仅取决于承诺的成功或失败，我才能知道状态。这会导致消息（允许访问消息）显示一小段时间，这不太好。

message.info("Please allow access");
navigator.mediaDevices.getUserMedia(constraints).then((stream)=> {
  console.log("received accesss");
}).catch(err => console.log(err));

顺便说一句，我正在使用 React，但任何库的问题都是一样的。此外，navigators.permissions API 仍处于实验阶段，Safari 不支持，因此需要跨浏览器的方式来解决此问题。提前致谢。

Answer 1

Permissions API应该能够做到这一点。

对于你会做的相机

const permission = await navigator.permissions.query( { name: "camera" } );

和麦克风

const permission = await navigator.permissions.query( { name: "microphone" } );

这将返回一个PermissionStatus对象，其.state设置为'granted'、'denied'或'prompt'。

但不幸的是，正如您所指出的，camera权限microphone仍然仅在 Chrome 中受支持。

在不支持的浏览器中，你可以尝试读取.label设备的信息，如果设置了这个值，你就拥有一些权限，否则要么会提示，要么被拒绝。

const not_granted = !(await navigator.mediaDevices.enumerateDevices())[0].label;

但请注意，它只是告诉您您没有被授予任何权限。您很可能只有麦克风的信息，即使您的应用程序被拒绝访问摄像头，它仍然会暴露该信息。