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

Cordova: getUserMedia() no longer works on insecure origins

情况

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

我需要使用函数getUserMedia()

在本地主机上测试时一切正常,但在设备上测试时它不起作用。

错误:

[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...

我试过使用 diagnostic cordova 插件,但结果是一样的

问题:

如何在 cordova 应用程序中使用 getUserMedia()

编辑 - 解决方案:

@Andre 的解法是该题的正确解法

我在设备的开发环境中 运行 运行该应用程序时遇到了该错误。 Quasar 运行 我的 devServer 位于 192.168.0.18,与本地主机不同,因此不被认为是安全的。

通过在配置中设置 https: true,该问题已解决。

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

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

你不能。

不再支持在 http://(不安全来源)上使用 getUserMedia(),它只能在 https://(安全来源)上使用

  • 出于开发目的,localhost 被视为 HTTP 上的安全来源,因此如果您能够从 localhost 运行 您的服务器,您应该能够在该服务器上工作。这就是为什么它适用于您使用 locahost 的案例。
  • 出于生产目的,考虑使用 HTTPS。您可以获得免费的 SSL 证书 using Let's encrypt.

借助 Quasar 框架,您可以通过编辑 quasar.conf.js file. Here are allowed parameters.

通过 HTTPS 使用 Webpack
// 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'),
  }
}

自从 cordova-ios@6.0.0 发布以来,对于任何来到这里的人来说,现在有一种更简单的方法可以在 iOS 设备上解决这个问题 iOS 14.5 或更高

将以下内容添加到 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 上寻找不需要本地网络服务器的解决方案。