Ionic 4 getUserMedia不允许在ionic-webview中使用

问题描述 投票:0回答:1

[这发生在离子应用的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" />
android ionic-framework ionic4 getusermedia ionic-webview
1个回答
7
投票

被标记为:Does getUserMedia works in ionic-webview in Android app?的副本

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


更新-2018年4月11日-工作的离子示例

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

请参见我的GitHub项目here,了解工作示例和屏幕截图。

请参见此功能分支here,该分支成功在iframe中测试了getUserMedia

涉及的步骤:

  • 安装离子
  • ionic start getUserMedia空白
  • cd getUserMedia
  • 离子cordova插件添加cordova-plugin-android-permissions
  • npm install --save @ ionic-native / android-permissions
  • npm install webrtc-adapter --save
  • 链接到angular.json脚本中的适配器(link
  • 将AndroidPermissions添加到app.module.ts提供程序(link
  • 在home.component.ts(link)中创建摄像机访问代码
  • 向config.xml和AndroidManifest.xml添加Android manifiedt权限(如果配置未复制,请添加link,请转到platform / android / app / src / AndroidManifest.xml)
  • ionic cordova平台添加android
  • ionic cordova build android
  • 离子cordova运行android

您还可以看到React Nativenative AndroidCordova的替代版本。

由于苹果对WKWebView和UIWebView的安全限制,因此此更新对iOS的支持仍为否。

Iframes:要确保getUserMedia在其中起作用,请确保您:

  • 嵌入式站点的CORS必须具有允许的访问源标题
  • 启用安全权限以访问照相机和麦克风<iframe allow="camera; microphone">

[请阅读以下内容以获取有关iframe功能的更多信息:


是的,理论上它可以工作。请参阅下面的示例,了解如何在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绑定。

可以在这里找到有关类似框架的更多信息:

© www.soinside.com 2019 - 2024. All rights reserved.