navigator.mediaDevices 未定义

Posted 2023-02-19

【中文标题】navigator.mediaDevices 未定义

【英文标题】：navigator.mediaDevices is undefined

【发布时间】：2021-12-10 10:22:46

【问题描述】：

因此，我制作了一个 WebRTC 屏幕共享应用程序，作为 Chrome 远程桌面和其他常见远程桌面/游戏流服务的自托管替代方案。

我的困境不是navigator.mediaDevices undefinded。每当我通过 file:/// 方案启动应用程序时，它都能完美运行； 与 Mozilla 文档中提到的 https:// 相同。但问题是我不想托管它，因为它存在一些主要的安全问题 (s)。那么我如何在192.168.XXX.XXXX 上托管它而不给出错误呢？ （我想将它托管在我的本地网络上，以便在其他移动设备上进行测试。）

【问题讨论】：

你是用移动设备实现的，并通过192.168.xxx.xxx的局域网连接到主机吗？？我无法让它工作，因为我不知道如何在 safari 或其他移动浏览器中保护它

我最终因为其他原因放弃了这个项目，但我使用下面的答案重试了它，它运行良好。见：***.com/a/60964352/11849788

【参考方案1】：

具有 getUserMedia、getDisplayMedia 和 enumerateDevices 等功能的 API 需要 secure context，从 http: 访问这些功能的来源一直是 removed in Chrome back in 2019

对于开发，最简单的解决方案可能是创建自签名证书。

--更新--

对于开发来说，最简单的解决方案是从 localhost 运行，因为这被认为是安全的 - 请参阅 https://blog.mozilla.org/webrtc/camera-microphone-require-https-in-firefox-68/ 和 https://w3c.github.io/webappsec-secure-contexts/#localhost

评论来自：Vlad Dinulescu

【讨论】：

实际上，对于开发来说，最简单的解决方案是从 localhost 运行，因为这被认为是安全的 - 请参阅 blog.mozilla.org/webrtc/… 和 w3c.github.io/webappsec-secure-contexts/#localhost

【参考方案2】：

在 Mozilla 开发人员中 去about:config 设置为真 media.devices.insecure.enabled 和 media.getusermedia.insecure.enabled

【讨论】：

我接受的答案在技术上是正确的，但这对于快速原型设计非常有用。如果您无法像上面的答案那样在 localhost 上托管，我会推荐这个。

MilkyDeveloper - 你不能在其他设备上使用你的本地主机服务器

我在 Chrome 和 Brave 中尝试 about:config 时有点发疯，但该页面似乎只存在于 Firefox 中。