Ionic 4 getUserMedia在Ionic-Webview中不支持

Ionic 4 getUserMedia NotAllowed in ionic-webview(Ionic 4 getUserMedia在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中不支持的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Ionic 4 getUserMedia在Ionic-Webview中不支持

基础教程推荐