getUserMedia权限被拒绝后，如何允许用户继续正常浏览网站？

你当前的代码在用户拒绝音视频权限时会弹出错误提示，完全可以通过优化错误处理逻辑，实现权限被拒后跳过设备使用流程，让用户正常浏览网站。

先看你的原代码：

let constraints = { audio: true, video: true };

navigator.mediaDevices.getUserMedia(constraints).then(stream => {
    // Do stuff
}).catch(e => alert(`getUserMedia error ${e.name}`))

优化后的实现 #

核心思路是在catch块中区分错误类型，针对权限拒绝的特定场景，不执行干扰用户的操作，直接跳过音视频相关逻辑，让页面其他功能正常运行：

let constraints = { audio: true, video: true };

navigator.mediaDevices.getUserMedia(constraints).then(stream => {
    // 仅当权限允许时，执行音视频相关操作
    // 示例：将视频流渲染到页面元素
    // const videoEl = document.getElementById('user-video');
    // videoEl.srcObject = stream;
}).catch(e => {
    // 针对不同错误类型做差异化处理
    if (e.name === 'NotAllowedError') {
        // 用户拒绝权限，跳过设备逻辑，页面其他功能不受影响
        console.log('用户拒绝音视频权限，将跳过设备使用环节');
    } else {
        // 其他错误（如无可用设备、设备故障等），按需提示用户
        alert(`设备访问出错：${e.name}`);
    }
});

关键说明 #

• 当用户拒绝权限时，会触发NotAllowedError，此时只在控制台记录日志（也可以完全不处理），不会弹出干扰用户的提示，页面的非音视频功能可以正常运行。
• 对于其他类型的错误（比如没有可用的摄像头/麦克风），再弹出提示，避免不必要的干扰。

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