Chrome不提示用户的相机和/或麦克风访问，即使在安全的情况下

Question

我有一个网页服务通过https与以下脚本:

const userMediaConstraints = {
video: true,
audio: true
};
navigator.mediaDevices.getUserMedia(userMediaConstraints)
.then(stream => { 
console.log("Media stream captured.")
});

当我在Firefox或Safari中打开它时，会出现要求允许使用相机和麦克风的提示。但在Chrome或Opera中却不行。默认情况下，访问被阻止，我必须去网站设置并手动允许访问，这被设置为默认(请求)。

• window.isSecureContext是true
• navigator.permissions.query({name:'camera'})解析为name: "video_capture", onchange: null, state: "prompt"。

看起来Chrome和Opera应该显示提示，但他们没有。我在不同的机器上测试了它，不同的用户没有使用该网站的历史，结果相同。

怎么了?

Answer 1

你说你试过Safari，这说明你用的是Mac。

Chrome问题列表中的这个问题非常符合您的描述。(我从webrtc/samplesGitHub项目上得到了这个。)这归结为Mac OS的安全设置。引用注释#3:

请检查Mac系统偏好设置>安全,隐私比;隐私比;麦克风，Chrome被检查。

(在你的情况下，因为你想要视频，你可能还需要勾选安全&隐私比;隐私比;相机或类似设备)

Answer 2

事实证明，在HTML中或在Javascript页面加载中具有自动播放属性的视频会阻止Chrome显示提示。

导致这个问题的HTML:

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

导致这个问题的Javascript:

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

我猜这个问题与Chrome自动播放策略有关。也许，Chrome认为我的网站提供了糟糕的用户体验，并阻止了提示?

我从HTML中删除了<video>，并更改了Javascript以在getUserMedia上创建相关的DOM:

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

现在我得到了提示。