How to programmatically request media permissions?

Question

Camera and microphone are manually blocked in Chrome (as shown in a picture below):

Local media tracks are created using twilio-video library methods createLocalAudioTrack and createLocalVideoTrack which throws the next exception:

DOMException: Permission denied
code: 0
message: "Permission denied"
name: "NotAllowedError"

When trying to use browser native getUserMedia as follows:

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .catch(error => {
    console.log(error)
  })

it console logs the same exception in the catch block:

DOMException: Permission denied

The question: is it possible to know in advance, before creating local media tracks, that there are no permissions to do it (camera and microphone are manually blocked in a browser) and programmatically request such permissions (show popup requesting the permissions) to create the tracks?

Answer 1

Note that, at the time I'm writing, this is still experimental territory

You can query permissions using Permissions.query():

const permissionDescriptors = [
  {name: 'camera'},
  {name: 'microphone'},
];

const permissions = await Promise.all(permissionDescriptors.map(async descriptor => ({
  descriptor,
  status: await navigator.permissions.query(descriptor),
})));

for (const {descriptor, status} of permissions) {
  console.log(
    descriptor.name, // 'camera' | 'microphone'
    status.state, // 'granted' | 'denied' | 'prompt'
  );
}

You will be able to request permissions using Permissions.request(). However, this is not currently supported in any browser.

Today, it's better to just try to access the MediaStream, and catch and handle a potential exception:

let mediaStream;
try {
  const constraints = { audio: true, video: true };
  mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
}
catch (ex) {
  if (ex instanceof DOMException) {
    if (ex.name === 'NotAllowedError') {
      // handle permission denied
    }
    else if (ex.name === 'NotFoundError') {
      // handle media not found
    }
    else {
      // handle unexpected DOMException
    }
  }
  else {
    // handle unexpected error
  }
}

if (!mediaStream) {
  // handle no stream
}
else {
  // do something with stream
}