HTTP环境下getUserMedia报错求助（.NET Core+JavaScript）

问题根源 #

现代浏览器出于安全规范，MediaDevices.getUserMedia API仅允许在安全上下文（Secure Context）中调用：

• localhost被浏览器默认判定为安全上下文，所以本地测试正常
• 普通HTTP（非HTTPS）的线上环境不属于安全上下文，此时navigator.mediaDevices会返回undefined，触发Cannot read properties of undefined (reading 'getUserMedia')错误

解决方案 #

1. 升级线上服务器为HTTPS（生产环境必选）

这是合规且安全的根本解决方式，将服务器切换为HTTPS后即可正常调用API。
针对.NET Core部署的配置方式：

• IIS部署：在IIS中绑定SSL证书，配置HTTPS端口（默认443）
• Kestrel部署：修改appsettings.json启用HTTPS：

  "Kestrel": {
    "Endpoints": {
      "Https": {
        "Url": "https://*:443",
        "Certificate": {
          "Path": "你的证书文件路径.pfx",
          "Password": "证书密码"
        }
      }
    }
  }
  

• 可使用Let's Encrypt免费证书完成HTTPS配置

2. 临时调试方案（仅用于测试，禁止生产环境）

若需临时在HTTP环境调试，可修改浏览器安全设置绕过限制：

• Chrome/Edge：
  1. 打开浏览器内置配置页：Chrome输入chrome://flags/#unsafely-treat-insecure-origin-as-secure，Edge输入edge://flags/#unsafely-treat-insecure-origin-as-secure
  2. 启用「将不安全来源视为安全」选项，添加你的线上服务器HTTP地址（如http://your-domain.com）
  3. 重启浏览器生效

3. 代码兼容优化

在调用API前增加安全检查，避免报错并给出用户友好提示：
修改JS中的startRecording函数：

async function startRecording() {
    try {
        // 检查是否为安全上下文
        if (!isSecureContext) {
            alert('请切换至HTTPS协议访问，以启用音频录制功能');
            return;
        }
        // 检查浏览器是否支持媒体设备API
        if (!navigator.mediaDevices) {
            alert('当前浏览器不支持音频录制，请升级浏览器后重试');
            return;
        }
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        // 原有逻辑代码保持不变...
    } catch (error) {
        console.error('Error accessing microphone:', error);
    }
}

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