android - ionic-webview 中的 Ionic 4 getUserMedia NotAllowed
问题描述
这发生在 ionic 应用程序的 android 版本中。我正在使用 iframe 来测试 getUserMedia。webrtc 的演示页面给了我“GetUserMedia : Not Allowed Error”。我已在 AndroidManifest.xml 中授予所有权限,但仍无法访问相机。为了获得外部网站的相机访问权限,还有什么需要做的吗?
主页.html
<ion-content class= 'padding has-subheader'>
<iframe class= 'webPage' name= "eventsPage" src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
</iframe>
</ion-content>
配置文件
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-camera" spec="^4.0.3" />
<plugin name="android-camera-permission" spec="^1.0.0" />
<plugin name="cordova-plugin-media" spec="^5.0.2" />
<plugin name="cordova-opentok-android-permissions" spec="^1.0.1" />
<plugin name="cordova.plugins.diagnostic" spec="^4.0.10" />
<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
<plugin name="cordova-plugin-media-capture" spec="^3.0.2" />
<plugin name="cordova-plugin-compat" spec="^1.2.0" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<engine name="android" spec="7.0.0" />
解决方案
标记为重复项:getUserMedia 是否适用于 Android 应用程序的 ionic-webview?
尽管如此,我已经在下面复制并粘贴了我的答案
更新 - 2020 年 11 月 19 日
WKWebView 可以在 iOS 14.3 beta 1 中使用 getUserMedia。
- https://bugs.webkit.org/show_bug.cgi?id=208667
- https://bugs.chromium.org/p/chromium/issues/detail?id=752458
更新 - 2018 年 4 月 11 日 - 工作离子示例
正如所承诺的那样,我今天对此有所了解。现在完整回答您的问题:是的,您可以在 Android 上访问 ionic 内部的 getUserMedia。
有关工作示例和屏幕截图,请参见我的 GitHub 项目。
在此处查看此功能分支,它成功测试了 iframe 中的 getUserMedia
涉及的步骤:
- 安装离子
- 离子启动 getUserMedia 空白
- cd getUserMedia
- 离子cordova插件添加cordova-plugin-android-permissions
- npm install --save @ionic-native/android-permissions
- npm install webrtc-adapter --save
- 链接到 angular.json 脚本中的适配器(链接)
- 将 AndroidPermissions 添加到 app.module.ts 提供程序(链接)
- 在 home.component.ts 中创建摄像头访问代码(链接)
- 将 android 清单权限添加到 config.xml 和 AndroidManifest.xml (链接,如果配置不复制转到平台/android/app/src/AndroidManifest.xml)
- 离子科尔多瓦平台添加android
- 离子科尔多瓦构建android
- 离子科尔多瓦运行android
您还可以看到React Native、原生 Android和Cordova的替代版本。
由于 Apple 对 WKWebView 和 UIWebView 的安全限制,截至本次更新对 iOS 的支持仍然不支持。
iframe:为确保 getUserMedia 在其中工作,请确保您:
- 嵌入站点的CORS需要有允许的访问源头
- 启用安全权限以访问摄像头和麦克风
<iframe allow="camera; microphone">
有关 iframe 功能的更多信息,请阅读以下内容:
- https://www.chromestatus.com/feature/5023919287304192
- https://bugs.webkit.org/show_bug.cgi?id=167430
- https://dev.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes
- https://bugzilla.mozilla.org/show_bug.cgi?id=1389198
- https://github.com/instructure/canvas-lms/issues/1219
是的,理论上它可以工作。请参阅下面的示例,了解如何在 Android 中执行此操作。对于 iOS,由于 WKWebView 的限制,这目前是不可能的。我已经链接到下面的 StackOverFlow 问题,关于人们如何在 Ionic 所基于的 Cordova 上实现这一点。
无论框架如何,让 getUserMedia 在 Android 上工作所需的核心主要步骤是:
- 确保您的应用是 Android API 21 及更高版本
- 向清单添加权限(链接到文件)
- 确保使用getUserMedia适配器以实现 API 兼容性
- 确保将 webrtc 添加到 Android 项目 gradle 文件(文件链接)
- 将 Chrome WebView 权限覆盖为大访问权限(文件示例的链接,第 106 行)
- 在应用程序启动时,要求用户授予访问相机的权限。
您具体面临的问题是 4. 或 5. 看起来该项目让您走得那么远。权限错误很可能归结为您的应用正在使用的 Chrome WebView 没有覆盖权限,和/或它是并且用户没有手动启用该权限。
因此,在 Ionic 框架中,您需要扩展其浏览器以访问覆盖 onRequestPermissionsResult。为此,您需要制作一个 Cordova 插件,然后创建 Ionic 绑定。
更多关于类似框架的阅读可以在这里找到: