reprompt for permissions with getUserMedia() after initial denial

Question

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. =(

Answer 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
    }
   }
);