DOMException：权限被拒绝 - navigator.mediaDevices.getUserMedia( );

Question

我正在尝试使用 navigator.mediaDevices.getUserMedia() 访问网络摄像头（更具体地说是 phone 摄像头）。但是，无论我尝试什么，我都没有收到 'allow use of the camera' 的提示。我主要使用 Chrome。但是，我尝试了 Brave & Edge，结果相同。 Firefox 确实提供提示，尽管仅适用于桌面。我在任何移动浏览器上都没有成功。

排除我在 Whosebug 和网络上找到的一些常见答案：

是的，我的 mac 已获得许可（也在 Windows 上进行了测试）
不，我过去没有拒绝过许可
我已经尝试了 localhost 和我们的 https:// 生产服务器

我已经尝试了多次代码迭代，但都没有成功。这是执行工作的当前代码块：

  async function enableVideoStream() {
    try {
      console.log('In useUserMedia =>');
      const stream = await navigator.mediaDevices.getUserMedia(
        {
          audio: false,
          video: { facingMode: 'environment' },
        },
      );
      setMediaStream(stream);
    } catch (err) {
      console.log('err =>', err);
    }
  }

这是我的控制台日志输出：

In useUserMedia =>
err => DOMException: Permission denied

这是 React 前端，Rails 后端应用。

Answer 1

检查您的应用程序 headers。功能策略具有在客户端阻止硬件的能力。

确保 Feature-Policy: camera: none 不存在于您的回复中 headers。

DOMException：权限被拒绝 - navigator.mediaDevices.getUserMedia( );

DOMException: Permission denied - navigator.mediaDevices.getUserMedia( );

javascript

webcam

webrtc

getusermedia

reactjs