我的目的是根据用户的浏览器权限向用户显示正确的消息,即。如果尚未授予权限,则显示“允许访问”之类的内容,如果已提供权限,则根本不显示用户反馈。
但是使用 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 不支持,因此需要跨浏览器的方式来解决此问题。提前致谢。
最佳答案
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;
但请注意,它仅告诉您您没有被授予任何权限。您很可能只有麦克风的信息,即使您的应用程序被拒绝访问摄像头,它仍然会暴露该信息。
关于javascript - 有没有办法在 JavaScript 中检测浏览器权限(特别是相机和麦克风)而不提示上述权限?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65488195/