reprompt for permissions with getUserMedia() after initial denial
Solution 1
jeffreyveon's answer will help reduce the chance that your user will choose deny, since she will only have to choose once.
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
}
}
);
Solution 2
Chrome implements the Permissions API
in navigator.permissions
, and that applies to both camera
and microphone
permissions too.
So as of now, before calling getUserMedia()
, you could use this API to query the permission state for your camera and microphone :
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.state
would return denied
, granted
or prompt
.
Useful SF question/answer here
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 :
// 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 article gives more details.
Hope this helps!
Solution 3
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.
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.
See: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Solution 4
Please be aware of below points.
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.
Solution 5
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.
Firefox however, does.
Geuis
Updated on July 08, 2022Comments
-
Geuis almost 2 years
How do we go about requesting camera/microphone access with getUserMedia() after being denied once?
I'm working with getUserMedia to access the user's camera and pipe the data to a canvas. That bit all works fine.
In testing, I hit deny once. At this point in Chrome and Firefox, any subsequent requests with getUserMedia() default to the denied state.
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.
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).
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).
The whole UX for dealing with permissions around getUserMedia stinks. =(
-
Rui Marques over 10 yearsHTTPs on Firefox won't persist this permission.
-
xdumaine about 9 yearsThis now works in firefox, but the "Always Share" option is a bit hidden under the dropdown arrow.
-
Vivek Ranjan almost 9 yearsCan I avoid clicking allow on camera access when page loads. Can it be controlled using JavaScript
-
jib over 8 years"Always share" is a bit hidden in Firefox the same way "Always deny" is. OP's problem does not happen in Firefox.
-
mido over 8 yearsto make it work in firefox:
about:config
-> setmedia.navigator.permission.disabled
flag as true, original answer -
Flo Schild over 7 yearsNo you cannot, and fortunately!!! It would allow websites, apps and whatever to access media devices of people without their consent, which would be a privacy rape...
-
Victoria Stuart over 7 yearsThank you mido: that was damned annoying - works now (access local USB webcam in localhost file:/// webpage served in Firefox 50 after initially denying that webcam). Cripes. :-/
-
Jonathan over 4 yearsHow do I force it to pop up? It's acting like I have no permissions over HTTP to my local device.
-
anup over 3 yearsaccording to developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions permissions isn't supported on Internet Explorer, Safari, Safari IOS, and Android web view. Do you know any other method that can be used here.I have also asked a question regarding this stackoverflow.com/questions/64679982/…
-
ffigari over 2 yearsat the moment Firefox does not support the
camera
permission name