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 上寻找不需要本地网络服务器的解决方案。
情况
在我的 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 上寻找不需要本地网络服务器的解决方案。