在ionic-webview中不允许Ionic 4 getUserMedia

Question

这发生在离子应用的Android版本中。我正在使用iframe测试getUserMedia。webrtc的演示页面给我“ GetUserMedia：不允许的错误”。我已经在AndroidManifest.xml中授予了所有权限，但仍然无法访问相机。为了获得外部网站的摄像头访问权，还有什么需要做的吗？

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

config.xml

<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" />

Answer 1

被标记为重复项：getUserMedia是否可以在Android应用程序的ionic-webview中工作？

尽管如此，我还是在下面复制并粘贴了我的答案

更新-04/11/2018-正常工作的离子示例

如所承诺的，我今天对此有所了解。现在要完全回答您的问题：是的，您可以在Android上的ionic中访问getUserMedia。

在这里查看我的GitHub项目以获取工作示例和屏幕截图。

在此处查看此功能分支，该分支成功在iframe中测试了getUserMedia

涉及的步骤：

• 安装离子
• ionic start getUserMedia空白
• cd getUserMedia
• 离子Cordova插件添加cordova-plugin-android-permissions
• npm install --save @ ionic-native / android-permissions
• npm install webrtc-adapter-保存
• 链接到angular.json脚本中的适配器（链接）
• 将AndroidPermissions添加到app.module.ts提供程序（链接）
• 在home.component.ts中创建相机访问代码（链接）
• 加入Android的manifiest权限config.xml和AndroidManifest.xml中（链接，如果配置不复制到平台/安卓/应用/ 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上运行都需要实现的核心主要步骤是：

1. 确保您的应用是Android API 21及更高版本
2. 向清单添加权限（链接到文件）
3. 确保使用getUserMedia适配器实现API兼容性
4. 确保将webrtc添加到Android项目gradle文件中（链接到file）
5. 覆盖Chrome WebView的权限以进行高级访问（链接到文件示例，第106行）
6. 在应用程序启动时，请询问用户是否有权访问相机。

您面临的具体问题是4.或5。看起来该项目使您走到了那么远。权限错误很可能是由于您的应用使用的Chrome WebView不会覆盖该权限，并且/或者是，并且用户尚未手动启用该权限。

因此，在Ionic框架内，您需要扩展其浏览器以访问对onRequestPermissionsResult的覆盖。为此，您需要制作一个Cordova插件，然后创建Ionic绑定。

可在此处找到有关类似框架的更多信息：

• 为什么CordovaWebViewClient不再在Cordova 6中工作
• https://github.com/marcusbelcher/rn-getUserMedia-test
• https://github.com/marcusbelcher/android-getUserMedia-test
• 科尔多瓦版本的问题：NotReadableError：无法启动源
• 渐进式Web应用程序：访问navigator.mediaDevices.getUserMedia时出错？