navigator.getUserMedia() 在移动设备上不起作用

Posted

技术标签:

【中文标题】navigator.getUserMedia() 在移动设备上不起作用【英文标题】:navigator.getUserMedia() doesn't work on mobile 【发布时间】:2022-01-12 16:06:06 【问题描述】:

在使用 Angular 开发视频聊天时,我遇到了这个问题。

ngOnInit() 
  navigator.mediaDevices && navigator.mediaDevices.getUserMedia(audio:true, video: true)
    .then(res=> console.log(res))
    .catch(err => console.log("err: ", err));

控制台结果:

错误:DomException:无法启动视频源

这在桌面/Chrome 上运行良好,但在 android/Chrome 上无法运行。 我在 Nox App Player 和 Bluestacks 等 Android 模拟器上进行了测试。

我已经使用此命令托管了 Angular 项目。

ng serve --host MY_IP_ADDRESS --disable-host-check --ssl

【问题讨论】:

【参考方案1】:

这里是 Twilio 开发者宣传员。

当您在 Android 设备上进行测试时,您是在 localhost 还是通过 HTTPS 进行测试?您只能在安全域或本地主机上使用getUserMedia

如果我需要在设备上进行测试,我使用ngrok 与我的本地主机建立隧道。然后,您可以通过 HTTPS 访问 ngrok URL。

这可能不起作用的另一个原因是您在另一个应用程序或浏览器选项卡中使用相机,并且设备一次只允许从一个应用程序访问相机。

对于模拟器,请确保您在模拟器中正确配置了相机。

【讨论】:

没错,我之前使用 ngrok 将我的本地主机作为 https 服务,正如我上面提到的,我使用 ng serve --host MY_IP_ADDRESS --disable-host-check --ssl 命令将我的本地主机托管为 https,但它不起作用。 相机是否被其他应用程序使用? 它没有被其他应用程序使用。 也许是个愚蠢的问题,但您是否尝试过关闭设备然后重新打开,然后尝试加载相机? 另外,您能否在您的设备上试用此测试应用程序,看看它是否有效:philnash.github.io/mediadevices-camera-selection。我之前在此页面上成功使用过 Android 设备,所以如果你不能,它可能只是你的设备。

以上是关于navigator.getUserMedia() 在移动设备上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Navigator.getUserMedia()

iOS 中浏览器的 navigator.getUserMedia 的原生替代方案是啥?

iOS Safari 移动浏览器的 navigator.getUserMedia 替代 API?

有没有办法像 navigator.getUserMedia() 一样在 Chrome 中设置默认捕获设备? (谷歌浏览器)

如何在Chrome for iOS中使用getUserMedia

从 JavaScript 访问麦克风输入