MS Edge(v.111)不安全连接下访问navigator.mediaDevices问题求助

现代浏览器（包括Edge 111）出于安全合规要求，navigator.mediaDevices API仅在安全上下文中提供访问权限。HTTPS协议、localhost（本地回环地址，如http://localhost或http://127.0.0.1）属于默认认可的安全上下文，而普通HTTP环境会直接隐藏该API，导致调用时返回undefined。

针对这个问题，你可以通过以下两种方式解决：

1. 改用HTTPS（生产环境推荐） #

这是符合Web安全标准的长期方案，将网站部署为HTTPS协议后，无需额外修改浏览器设置，即可正常调用navigator.mediaDevices接口，同时也能避免其他安全限制带来的问题。

2. 修改Edge设置（仅用于开发/测试场景） #

如果是本地开发或测试需要在HTTP环境下调试，可以临时将指定的HTTP域名标记为安全上下文，步骤如下：

• 在Edge地址栏输入 edge://flags/#unsafely-treat-insecure-origin-as-secure 并回车
• 找到**"Insecure origins treated as secure"选项，将其状态改为Enabled**
• 在下方输入框中填写需要允许的HTTP地址（例如http://192.168.1.100:8080或http://test.dev），多个地址用逗号分隔
• 点击页面底部的Relaunch按钮重启浏览器，生效后即可在指定的HTTP地址下访问navigator.mediaDevices

特殊情况：本地localhost环境 #

如果你的页面是通过http://localhost或http://127.0.0.1访问的，Edge默认会将其视为安全上下文，无需修改设置就能直接使用API。若此时仍返回undefined，建议检查是否有浏览器插件、防火墙或安全工具拦截了媒体权限请求。

权限请求示例代码 #

设置生效后，调用API时需要主动请求用户授权，示例如下：

async function requestMediaAccess() {
  try {
    // 请求摄像头和麦克风权限
    const mediaStream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    // 成功获取流后的处理逻辑
    console.log('媒体流获取成功', mediaStream);
  } catch (error) {
    // 处理权限拒绝或其他错误
    console.error('媒体流获取失败:', error.message);
  }
}

// 调用函数触发权限请求
requestMediaAccess();

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