我们如何在拒绝一次后使用getUserMedia()请求摄像头/麦克风访问?
我正在使用getUserMedia来访问用户的摄像头并将数据传输到画布。这一切都很好。
在测试中,我打了一次否认。此时在Chrome和Firefox中,任何带有getUserMedia()的后续请求都默认为拒绝状态。
我们显然不希望通过在拒绝后的每个页面加载时请求摄像头/麦克风的权限来惹恼我们的用户。对地理位置api来说已经足够烦人了。
然而,必须有一种方法再次请求它。仅仅因为用户点击拒绝一次并不意味着他们想要一直拒绝网络摄像头访问。
我一直在阅读关于规范和谷歌搜索一段时间,但我没有找到任何明确的问题。
编辑: 进一步的研究表明,在Chrome中点击Deny会将当前网站添加到阻止列表中。这可以通过chrome:// settings / content手动访问。滚动到媒体。管理例外,删除被阻止的网站。
链接到chrome:// settings / content不起作用(如果我们想添加一个有用的链接,让人们重新启用权限)。
用于处理getUserMedia周围权限的整个UX很糟糕。 =(
答案 0 :(得分:16)
使用HTTPS。当用户授予一次权限时,会记住该内容,并且Chrome不会再次请求该页面的权限,您可以立即访问该媒体。这并没有为您提供再次强制用户权限栏的方法,但至少确保您在用户授予权限一次后不必继续请求它。
如果您的应用程序是通过SSL(https://)运行的,则此权限将是持久的。也就是说,用户不必每次都允许/拒绝访问。
请参阅:http://www.html5rocks.com/en/tutorials/getusermedia/intro/
答案 1 :(得分:13)
jeffreyveon的回答将有助于减少用户选择拒绝的机会,因为她只需选择一次。
如果她点击拒绝,您可以提供一条消息,说明您需要权限的原因以及如何更新她的选择。例如:
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
}
}
);
答案 2 :(得分:3)
Chrome浏览器在navigator.permissions
中实现了Permissions API
,这同样适用于camera
和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);
})
成功后,permissionObj.state
将返回denied
,granted
或prompt
。
有用的SF问题/答案here
对于跨浏览器解决方案,一种简单的方法可以是监视调用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);
});
此Medium article提供了更多详细信息。
希望这会有所帮助!
答案 3 :(得分:1)
请注意以下几点。
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.
答案 4 :(得分:0)
对此的最新答案是,当通过HTTP请求时,Chrome(当前在73上进行测试)不再继续提示摄像机访问。
但是,Firefox是。