DOMException: 权限被拒绝 - navigator.mediaDevices.getUserMedia();答案

【问题标题】：DOMException: Permission denied - navigator.mediaDevices.getUserMedia( );DOMException: 权限被拒绝 - navigator.mediaDevices.getUserMedia();
【发布时间】：2021-06-05 01:05:31
【问题描述】：

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

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

是的，在我的 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 后端应用程序。

【问题讨论】：

您是否从 https:// 提供您的网页？
是的。我最初认为这是一个 localhost 错误，但今天我能够在我们的 HTTPS:// 生产服务器上对其进行测试。结果相同。

标签： javascript reactjs webrtc webcam getusermedia

【解决方案1】：

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

确保Feature-Policy: camera: none 不存在于您的响应标头中。

【讨论】：

如果您有 Rails 后端，请确保检查 application.rb，因为功能策略可能隐藏在那里。