Ionic 4 getUserMedia在Ionic-Webview中不支持

Ionic 4 getUserMedia NotAllowed in ionic-webview(Ionic 4 getUserMedia在Ionic-Webview中不支持)

问题描述

在Ionic应用的Android版本中会发生这种情况。 我正在使用IFRAME测试getUserMedia。 WebRTC的演示页面显示"GetUserMedia：Not Allowed Error"。 我已经在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" />

推荐答案

标记为重复：Does getUserMedia works in ionic-webview in Android app?

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

---

更新-2020/11/19

WKWebView可以在iOS 14.3测试版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上的ion中访问getUserMedia。

有关工作示例和屏幕截图，请参阅我的GitHub项目here。

请参阅此功能分支here，它会成功测试IFRAME内部的getUserMedia

涉及的步骤：

• 安装Ionic
• 离子启动getUserMedia空白
• CD getUserMedia
• ion Cordova插件添加cordova-plugin-android-permission
• NPM安装--save@ion-ative/android-权限
• NPM安装webRTC-适配器--保存
• 在angular.json脚本中链接到适配器(link)
• 将AndroidPermission添加到app.module e.ts提供程序(link)
• 在home中创建摄像头访问代码.ts(link)
• 将Android Manifiest权限添加到config.xml和AndroidManifest.xml(link，如果配置没有复制，请转到platforms/android/app/src/AndroidManifest.xml)
• Ionic Cordova平台新增Android
• Ionic Cordova Build Android
• Ionic Cordova运行Android

您还可以查看React Native、native Android和Cordova的其他版本。

截至此更新，由于Apple对WKWebView和UIWebView的安全限制，对iOS的支持仍为NO。

iFrames：要确保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. 向清单添加权限(link to file)
3. 请确保使用getUserMedia适配器以实现API兼容性
4. 确保将WebRTC添加到Android项目Gradle文件(link to file)
5. 将Chrome WebView权限覆盖为大访问(link to file example, line 106)
6. 在应用启动时，向用户请求访问摄像机的权限。

您具体面临的问题是4.或5。看起来这个项目让您走到了这一步。权限错误很可能是由于您的应用程序正在使用的Chrome WebView未覆盖权限，和/或确实如此，并且用户尚未手动启用权限。

因此，在Ionic框架中，您需要扩展其浏览器才能访问覆盖onRequestPermissionsResult。为此，您需要创建一个Cordova插件，然后创建Ionic绑定。

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

• Why CordovaWebViewClient not working in Cordova 6 anymore
• https://github.com/marcusbelcher/rn-getUserMedia-test
• https://github.com/marcusbelcher/android-getUserMedia-test
• 此问题的科尔多瓦版本：NotReadableError: Could not start source
• Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?

这篇关于Ionic 4 getUserMedia在Ionic-Webview中不支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！