HTTPS环境下Chrome/Opera未弹出摄像头麦克风权限弹窗问题排查

Chrome、Opera等基于Chromium内核的浏览器，对摄像头、麦克风这类高敏感权限的申请有强制的用户手势（User Activation）触发要求，Firefox、Safari目前未强制执行该限制，因此会正常弹出权限申请提示。
你当前的代码是在页面加载流程中自动调用navigator.mediaDevices.getUserMedia，没有关联任何用户主动交互行为，会被Chromium内核直接判定为非用户主动发起的权限请求，静默拦截不弹出提示。
该拦截规则的核心判定逻辑：

• 仅对摄像头、麦克风、屏幕录制、弹窗这类高敏感权限生效
• 有效触发手势仅包括用户主动发起的点击、触摸、键盘确认等操作，页面自动加载、定时器触发、脚本无交互直接调用都不属于有效触发源
• 规则优先级高于站点本地权限配置，哪怕权限查询结果为prompt（即默认询问状态）、当前处于安全上下文，非用户触发的申请依然会被静默拦截
  这个拦截属于内核层面的硬规则，和站点访问历史、用户账号状态无关，因此即使使用无访问记录的全新设备、全新用户账号测试，问题依然会复现。

快速验证方式 #

打开Chrome开发者工具的Console面板，手动执行你写的getUserMedia调用代码，会发现权限弹窗可以正常弹出。这是因为控制台手动输入执行代码的场景，会被浏览器判定为存在用户主动操作的有效上下文。

修复方案 #

不要在页面自动执行的初始化逻辑中直接调用getUserMedia，将调用逻辑绑定到用户主动触发的交互事件回调中即可，参考实现：

const userMediaConstraints = {
    video: true,
    audio: true
};
// 绑定到按钮点击事件，由用户主动操作触发
document.querySelector('#startCaptureBtn').addEventListener('click', async () => {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(userMediaConstraints);
        console.log("Media stream captured.", stream);
    } catch (err) {
        console.error("媒体流获取失败", err);
    }
})

注意：浏览器记录的用户手势状态有效期很短，不要在点击回调中做过长时间的异步等待后再调用getUserMedia，否则手势状态过期后依然会被拦截。

内容的提问来源于stack exchange，提问作者Artem Ermakov