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

Question

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

为了排除我在 StackOverflow 和 web 上找到的一些常见答案：

• 是的，在我的 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

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

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