ASP.NET Core MVC部署IIS后WebRTC API不支持问题求助

WebRTC的getUserMedia API要求运行在安全上下文中，浏览器仅允许在HTTPS协议或localhost（本地环回地址）下调用该API。直接通过IP地址访问属于非安全上下文，浏览器会阻止API执行，因此触发了"浏览器不支持WebRTC API"的错误提示（实际是API被限制，而非真的不支持）。

1. 为IIS站点配置HTTPS（生产环境推荐） #

• 生成或获取SSL证书：可以使用自签名证书（仅测试用），或申请免费的Let's Encrypt证书
• 在IIS管理器中，找到目标站点，右键选择"编辑绑定"，添加HTTPS绑定，选择对应的证书，端口默认设为443
• 配置完成后，通过https://你的IP地址访问站点，即可正常调用摄像头API

2. 临时开启浏览器非安全上下文例外（仅测试环境使用） #

Chrome/Edge浏览器 #

• 在地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure
• 在输入框中添加你的站点IP地址（例如http://192.168.1.100），启用该选项后重启浏览器

Firefox浏览器 #

• 在地址栏输入about:config，接受风险提示
• 搜索dom.security.https_only_mode，将值改为false
• 再搜索media.devices.insecure.enabled，将值改为true，重启浏览器

3. 优化JS代码的错误提示（可选） #

修改原代码，增加安全上下文判断和更精准的错误提示，方便排查问题：

const video = document.getElementById('webcamVideo');
const canvas = document.getElementById('snapshotCanvas');
const captureButton = document.getElementById('captureButton');

function onStreaming(stream) {
    video.srcObject = stream;
}

function onError(error) {
    console.error('Error accessing the webcam:', error);
    if (error.name === 'NotAllowedError') {
        alert('摄像头访问权限被拒绝，请在浏览器设置中允许权限');
    } else if (error.name === 'NotSupportedError' || error.name === 'SecurityError') {
        alert('当前环境不支持摄像头访问，请使用HTTPS或localhost访问');
    } else {
        alert('访问摄像头出错：' + error.message);
    }
}

function captureImage() {
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
}

captureButton.addEventListener('click', captureImage);

// 先检查安全上下文
if (!window.isSecureContext) {
    alert('请使用HTTPS或localhost访问以启用摄像头功能（非安全上下文限制WebRTC调用）');
} else if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(onStreaming)
        .catch(onError);
} else {
    alert('您的浏览器不支持WebRTC API，请升级浏览器');
}

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