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

Question

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

但是使用 navigator.mediaDevices.getUserMedia()，仅根据 promise 的成功或失败，我就可以知道状态。这会导致消息(允许访问消息)显示一小段时间，这不太好。

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' 的对象。

但不幸的是，正如您所指出的，相机和麦克风权限仍然仅在 Chrome 中受支持。

---

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

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

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