javascript 初始拒绝后使用 getUserMedia() 重新提示权限
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15993581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
reprompt for permissions with getUserMedia() after initial denial
提问by Geuis
How do we go about requesting camera/microphone access with getUserMedia() after being denied once?
在被拒绝一次后，我们如何使用 getUserMedia() 请求访问相机/麦克风？
I'm working with getUserMedia to access the user's camera and pipe the data to a canvas. That bit all works fine.
我正在使用 getUserMedia 访问用户的相机并将数据通过管道传输到画布。这一点一切正常。
In testing, I hit deny once. At this point in Chrome and Firefox, any subsequent requests with getUserMedia() default to the denied state.
在测试中，我击中了一次拒绝。此时，在 Chrome 和 Firefox 中，任何带有 getUserMedia() 的后续请求都默认为拒绝状态。
We obviously don't want to annoy the hell out of our users by requesting permissions for camera/microphone on every page load after being denied. That's already annoying enough with the geolocation api.
我们显然不想在被拒绝后在每个页面加载时请求摄像头/麦克风的权限来惹恼我们的用户。地理定位 api 已经够烦人了。
However, there has to be a way to request it again. Simply because a user hit deny once doesn't mean they want to deny webcam access for all time.
但是，必须有一种方法可以再次请求它。仅仅因为用户点击一次拒绝并不意味着他们想一直拒绝网络摄像头访问。
I've been reading about the spec and googling around for a while but I'm not finding anything explicitly about this problem.
我一直在阅读规范并在谷歌上搜索了一段时间，但我没有找到任何关于这个问题的明确信息。
Edit: Further research, it appears that hitting Deny in Chrome adds the current site to a block list. This can be manually accessed via chrome://settings/content. Scroll to Media. Manage Exceptions, remove the blocked site(s).
编辑：进一步研究，似乎在 Chrome 中点击拒绝会将当前站点添加到阻止列表中。这可以通过 chrome://settings/content 手动访问。滚动到媒体。管理例外，删除被阻止的站点。
Linking to chrome://settings/content doesn't work (in the case where we want to add a helpful link to let people re-enable permissions).
链接到 chrome://settings/content 不起作用（在我们想要添加有用的链接以让人们重新启用权限的情况下）。
The whole UX for dealing with permissions around getUserMedia stinks. =(
处理 getUserMedia 周围权限的整个 UX 很糟糕。=（
回答by jrullmann
jeffreyveon's answer will help reduce the chance that your user will choose deny, since she will only have to choose once.
jeffreyveon 的回答将有助于减少您的用户选择拒绝的机会，因为她只需选择一次。
In case she does click deny, you can provide a message that explains why you need the permission and how to update her choice. For example:
如果她确实单击了拒绝，您可以提供一条消息，解释您为什么需要许可以及如何更新她的选择。例如：
navigator.getUserMedia (
// constraints
{
video: true,
audio: true
},
// successCallback
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
},
// errorCallback
function(err) {
if(err === PERMISSION_DENIED) {
// Explain why you need permission and how to update the permission setting
}
}
);
回答by jeffreyveon
Use HTTPS. When the user gives permission once, it's remembered and Chrome does not ask for permission for that page again and you get access to the media immediately. This does not provide you a way to force the permission bar on the user again, but atleast makes sure you don't have to keep asking for it once the user grants the permission once.
使用 HTTPS。当用户授予一次权限时，它会被记住，Chrome 不会再次请求该页面的权限，您可以立即访问媒体。这不会为您提供再次强制用户使用权限栏的方法，但至少可以确保一旦用户授予权限一次，您就不必继续要求它。
If your app is running from SSL (https://), this permission will be persistent. That is, users won't have to grant/deny access every time.
如果您的应用程序从 SSL (https://) 运行，则此权限将是持久的。也就是说，用户不必每次都授予/拒绝访问权限。
See: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
请参阅：http: //www.html5rocks.com/en/tutorials/getusermedia/intro/
回答by Philippe Sultan
Chrome implements the Permissions APIin navigator.permissions, and that applies to both cameraand microphonepermissions too.
Chrome 实现了Permissions APIin navigator.permissions，这也适用于camera和microphone权限。
So as of now, before calling getUserMedia(), you could use this API to query the permission state for your camera and microphone :
所以到目前为止，在调用之前getUserMedia()，你可以使用这个 API 来查询你的相机和麦克风的权限状态：
navigator.permissions.query({name: 'microphone'})
.then((permissionObj) => {
console.log(permissionObj.state);
})
.catch((error) => {
console.log('Got error :', error);
})
navigator.permissions.query({name: 'camera'})
.then((permissionObj) => {
console.log(permissionObj.state);
})
.catch((error) => {
console.log('Got error :', error);
})
On success, permissionObj.statewould return denied, grantedor prompt.
成功时，permissionObj.state将返回denied,granted或prompt。
Useful SF question/answer here
有用的SF问题/答案在这里
For a cross browser solution, one simple approach can be to monitor the time difference between when the getUserMedia()Promise is called, and when it is rejected or resolved, like so :
对于跨浏览器解决方案，一种简单的方法可以是监视getUserMedia()Promise 被调用与被拒绝或解决之间的时间差，如下所示：
// In the Promise handlers, if Date.now() - now < 500 then we can assume this is a persisted user setting
var now = Date.now();
navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(function(stream) {
console.log('Got stream, time diff :', Date.now() - now);
})
.catch(function(err) {
console.log('GUM failed with error, time diff: ', Date.now() - now);
});
This Medium articlegives more details.
这篇Medium 文章提供了更多细节。
Hope this helps!
希望这可以帮助！
回答by user6254696
Please be aware of below points.
请注意以下几点。
1. Localhost: In Localhost Chrome Browser asking permission only one time and Firefox every pageload.
1. Localhost: In Localhost Chrome Browser asking permission only one time and Firefox every pageload.
2. HTTPS: Both Browsers Chrome and Firefox asking permission only one time.
2. HTTPS: Both Browsers Chrome and Firefox asking permission only one time.
回答by Adrian Lynch
The updated answer to this is that Chrome (currently testing on 73) no longer continuously prompts for camera access when the request is over HTTP.
对此的更新答案是，当请求通过 HTTP 时，Chrome（目前在 73 上测试）不再持续提示相机访问。
Firefox however, does.
然而，Firefox 确实如此。
