即使在安全环境中，Chrome 也不会提示用户访问摄像头和/或麦克风

Question

I have a webpage served via https with the following script:

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

navigator.mediaDevices.getUserMedia(userMediaConstraints)
    .then(stream => { 
        console.log("Media stream captured.")
    });

When I open it in Firefox or Safari, a prompt asking for permission to use camera and microphone appears. But not in Chrome or Opera. There the access is blocked by default and I have to go to site settings and manually allow the access, which is set to Default(ask).

• window.isSecureContext is true .
• navigator.permissions.query({name:'camera'}) resolves to name: "video_capture", onchange: null, state: "prompt" .

It looks like Chrome and Opera should show prompt, but they do not. I tested it on a different machine with different user that had no prior history with the website with the same result.

What could be wrong?

Answer 1

You've said you've tried Safari, which suggests to me you're on a Mac.

This issue on the Chrome issues list fits your description really well. (I got there from this on the webrtc/samples GitHub project.) It comes down to a Mac OS security setting. Quotingcomment #3 :

Please check in Mac system preferences > Security & Privacy > Privacy > Microphone, that Chrome is checked.

(In your case since you want video, you'd also probably have to tick the box under Security & Privacy > Privacy > Camera or similar.)

Answer 2

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.