摄像头访问在本地主机上有效,但在使用 https 的服务器上 chrome 上失败

Camera access works on localhost but fails on chrome on server with https

我们的应用程序正在实施一项涉及扫描二维码的功能,扫描仪组件是使用 @zxing/browser 开发的,它在本地主机上运行良好(在 chrome 和 firefox 上测试,使用 macOS,Android, 和 iOS).

当我们将它部署到我们的测试环境(通过 HTTPS 提供服务)时,它停止在桌面和 android 上工作 chrome。 Firefox 在两者上仍然工作正常,chrome 仅在 iOS 上工作。

调试该问题时,报错为:

error: DOMException: Permission denied
code: 0
message: "Permission denied"
name: "NotAllowedError"

无论通过设置定义的权限如何,都会发生此错误,它可以通过设置允许、询问或(显然)拒绝的权限来复制。

我能够将 Scanner 组件提取到沙箱中,令我惊讶的是,它在那里运行良好。

您可以在此处检查沙箱:Scanner component sandbox

我很感激任何关于它的 inputs/insights,因为我有点不知道接下来要检查什么才能在我们的环境中正常使用它 运行。

提前谢谢你。

经过一些研究,我们发现摄像头在测试环境中被遮挡的原因是 feature policy header. In our application, it's added via asp.net web.config,因为我们在本地主机上没有这个,所以它可以正常工作。

这将完全阻止对相机的访问:

<add name="Feature-Policy" value="camera 'none'" />

为了启用并允许浏览器请求权限,我们需要将其设置为:

<add name="Feature-Policy" value="camera 'self'" />