navigator?.mediaDevices媒体读取失败

<video #popvideo autoplay width="600" height="415"></video>

@ViewChild('popvideo') popvideo: ElementRef;

navigator.mediaDevices
        .getUserMedia(constraints)
        .then(stream => {
          this.stream = stream;
          setTimeout(() => {
            this.popvideo.nativeElement.srcObject = stream;
            this.popvideo.nativeElement.play();
          }, 200);
        })
          console.error(err);
        });
    } else {
      this.message.warning('当前浏览器不支持访问用户媒体设备！');
    }

navigator.mediaDevices 读取失败通常由 浏览器安全策略 或 运行环境不满足要求 导致。

最常见、也最容易被忽略的一条是：页面必须部署在 HTTPS 或 localhost（127.0.0.1）上，否则 navigator.mediaDevices 直接为 undefined，调用 getUserMedia 会立即报错

解决办法:

1. 确认地址栏协议

   • 环境：必须是 https://

   • 调试：用 http://localhost:端口 或 http://127.0.0.1:端口；用 http://192.168.x.x 也会失败

2. 如果暂时无法启用 HTTPS，可对开发机做“降级”处理
   Chrome/Edge 地址栏输入

   chrome://flags/#unsafely-treat-insecure-origin-as-secure

   把你要调试的域名（如 http://dev.my.com）填进去，右侧选 Enabled → Relaunch 重启浏览器即可 。
   仅用于开发自测，生产环境仍需正规 HTTPS 证书。

3. 确认浏览器版本与支持性

   • 桌面端：Chrome 60+、Edge 79+、Firefox 50+、Safari 11+ 均支持；IE 全系列不支持。

   • 移动端：iOS 14.3 之前 getUserMedia 经常为 undefined，需升级系统；Android 5+ 自带 WebView 基本可用 。

4. 检查权限与错误类型
   在代码里 catch 住 Promise，把 err.name 打印出来：

   • NotAllowedError → 用户点了“拒绝”或浏览器默认屏蔽，需要重新请求权限

   • NotFoundError → 设备列表为空，检查摄像头/麦克风是否被系统禁用

   • NotReadableError → 硬件被别的进程占用，或驱动异常

   • SecurityError → 当前 origin 被判定为“不安全”，回到第 1 步解决。

5. 先授权再枚举
   如果你想用 enumerateDevices 拿到设备 label，必须先执行一次 getUserMedia 取得过授权，否则拿到的列表全是空字符串。

6. 真机调试技巧

   • 微信/微博/QQ 内置浏览器经常阉割 WebRTC，最好引导用户用系统浏览器打开。

   • 华为、荣耀手机在 Web 组件里还要额外在 module.json5 声明 ohos.permission.CAMERA 等权限