无法通过 https 读取未定义的属性“getusermedia”

Question

我有一个反应应用程序，应该记录来自麦克风的音频并将其发送到后端。麦克风输入是通过 navigator.mediaDevices.getUserMedia 实现的。该页面在本地主机和我的 WiFi 网络中的其他设备上完美运行（为此我必须使用 https 启动我的 React 应用程序）。但是当我用这个网站测试它时： http: //appsimulator.net/webapp/?frame =apple_iphone_6_v，我收到以下错误：TypeError：无法读取未定义的属性“getUserMedia”。我不知道为什么无法通过该网站测试该应用程序。

Answer 1

MDN 文档MediaDevices.getUserMedia()中直接回答了这个问题：

注意：如果当前文档未安全加载，navigator.mediaDevices则会出现undefined，并且无法使用getUserMedia()。有关此问题以及与使用相关的其他安全问题的更多信息，请参阅安全性getUserMedia()。

AppSimulator.net 的呈现方式并不安全，因此此调用始终会以您观察到的方式失败。通过 HTTPS 提供页面。

Answer 2

我使用本地网络端口时遇到此错误。我决定以localhost代替192.168.100.4进行测试，并且它有效：

[Vue] App running at: 
   - Location: http://localhost:5000/ #works
   - Network: http://192.168.100.4:5000/ #error