Cordova：getUserMedia() 不再适用于不安全的来源

Posted 2023-03-14

【中文标题】Cordova：getUserMedia() 不再适用于不安全的来源

【英文标题】：Cordova: getUserMedia() no longer works on insecure origins

【发布时间】：2019-03-06 13:35:35

【问题描述】：

情况

在我的 Cordova 混合应用程序（使用 Quasar 框架构建）中，我需要添加视频通话功能。

我需要使用函数getUserMedia()。

在 localhost 上测试时一切正常，但在设备上测试时就不行了。

错误：

[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

这个错误很可能是由于 Cordova 没有在 https 上运行造成的。

尝试：

我已经尝试了所有可以在 Google 上找到的方法，但没有任何效果..

人行横道：

我看到有人建议安装crosswalk 插件。我试过了，但没有任何改变。

权限：

我尝试使用android-permissions 插件请求许可。

但是当它提示请求时，尽管点击了ALLOW按钮，权限却被设置为DENIED_ALWAYS...

我尝试过使用diagnosticcordova 插件，但结果是一样的

问题：

如何在 cordova 应用中使用 getUserMedia()？

编辑 - 解决方案：

@Andre 解决方案是问题的正确解决方案。

我在设备的开发环境中运行应用程序时遇到了该错误。 Quasar 在 192.168.0.18 上运行我的 devServer，这与 localhost 不同，因此不被认为是安全的。

通过在配置中设置https: true，该问题得到解决。

在构建应用程序后，Cordova 在 file:// 上运行，并且在 file:// 协议上没有不安全的来源问题，正如 cmets 中的 @jcesarmobile 所指出的那样。

我在构建时仍然遇到问题，但与此问题本身无关，但涉及权限，我设法使用 cordova-plugin-android-permissions 插件解决了这些问题。

【问题讨论】：

cordova 使用 file:// 加载应用程序，应该仍然可以工作。那么，您的应用网址是什么样的？那么应该是一些类星体问题

是的，应用程序在 file:// 上提供 - 这是完整路径：file:///android_asset/www/index.html#/Home

奇怪，它应该通过文件协议工作。您可以尝试使用 cordova-plugin-ionic-webview，它可以配置为通过 https 服务

谢谢@jcesarmobile，你是对的。在 file:// 协议上没有不安全的问题。我仍然有问题，但由于权限设置不正确。

【参考方案1】：

你不能。

在 http://（不安全来源）上不再支持使用 getUserMedia()，它只能在 https://（安全来源）上工作

出于开发目的

，localhost 被视为通过 HTTP 的安全源，因此如果您能够从 localhost 运行您的服务器，那么您应该能够在该服务器上工作。这就是为什么它适用于您使用 locahost 的情况。

出于生产目的

，请考虑使用 HTTPS。您可以获得免费的 SSL 证书using Let's encrypt。

使用 Quasar 框架，您可以通过编辑 quasar.conf.js 文件来通过 HTTPS 使用 Webpack。 Here are allowed parameters.

// quasar.conf.js
devServer: 
    https: true

它将使用自签名证书。

如果你想使用自己的证书，使用如下：

// quasar.conf.js
devServer: 
  https: 
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
  

【讨论】：

感谢您回复@André。我知道 getUserMedia() 在 HTTP 上不起作用。这里的问题是我没有在 http 或 https 上运行，但我需要它在 cordova 移动应用程序中运行。我认为必须有一种方法可以在 cordova 应用程序上使用 getUserMedia()。

您是想通过 webview 还是在 cordova 内部使用 getUserMedia？

通过网络视图

你的 webview 是如何加载的？

您的答案是实际的解决方案。谢谢！我在 prod 上仍有问题，但由于其他原因。

【参考方案2】：

对于自 cordova-ios@6.0.0 发布以来遇到此问题的任何人，现在有一种更简单的方法可以在 iOS 14.5 或更高版本的 iOS 设备上解决此问题

将以下内容添加到 config.xml 允许将 webview 视为安全上下文：

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

来源：https://cordova.apache.org/announcements/2020/06/01/cordova-ios-release-6.0.0.html

我仍在寻找不需要本地网络服务器的 android 解决方案。