Reprompt for Permissions With Getusermedia() After Initial Denial

How to re-ask for permission for a video camera or microphone in JavaScript after decline in JavaScript

You can't "reask" when the user has denied access from it.

What you can do however is to monitor when they will change this setting, by listening to the PermissionStatus.onchange event (that is in Chromium based browsers, Firefox still doesn't support the camera value).

So you'd do:

// after you caught denial
const status = await navigator.permissions.query({name: "camera"});
status.addEventListener("change", (evt) => {
  // request again
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(handleStream)
    .catch(handleDeny);
}, { once: true });

getUserMedia permission denied after clicking the "allow" button

I changed the webcam and it's working.
So apparently Microsoft Lifecam VX-7000 doesn't work on Ubuntu 12.04 with navigator.getUserMedia because this cam works on Windows 7 (at least with Chrome).

Chrome does not prompt user for camera and/or microphone access even in secure context

It turns out, having video with autoplay attribute in HTML or similar lines on page load in Javascript prevent Chrome from showing the prompt.

HTML that causes this problem:

<video autoplay="true"></video>

Javascript that causes this problem:

localVideo = document.createElement('video');
videoContainer.append(localVideo);
localVideo.setAttribute('id','localVideo');        
localVideo.play();

My guess is that the issue has to do with Chrome autoplay policy. Perhaps, Chrome treats my website as providing bad user experience and blocks the prompt?

I removed <video> from HTML and altered Javascript to create a relevant DOM on getUserMedia:

let localStream = new MediaStream();
let localAudioTrack;
let localVideoTrack;
let localVideo;

const userMediaConstraints = {
    video: true,
    audio: true
};

navigator.mediaDevices.getUserMedia(userMediaConstraints)
    .then(stream => { 
        localAudioTrack = stream.getAudioTracks()[0];
        localAudioTrack.enabled = true;
        localStream.addTrack(localAudioTrack);

        localVideoTrack = stream.getVideoTracks()[0];
        localVideoTrack.enabled = true;
        localStream.addTrack(localVideoTrack);

        localVideo = document.createElement('video');
        videoContainer.append(localVideo);
        localVideo.setAttribute('id','localVideo');
        localVideo.srcObject = localStream;
        localVideo.muted = true;

        localVideo.play();
    });

And now I get the prompt.

---

Related Topics