android - getUserMedia 在 Android 应用程序的 ionic-webview 中工作吗？

Question

我已授予摄像头和麦克风的所有权限。在 iframe 的元标记中启用 CSP。仍然无法在 iframe 的 getusermedia 中获得摄像头和麦克风的权限。

home.html

ion-content class='padding has-subheader'>

应用程序组件.ts

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private androidPermissions: AndroidPermissions) 
{
platform.ready().then
   (() => 
      {

           statusBar.styleDefault();
           splashScreen.hide();

           this.androidPermissions.requestPermissions([
                this.androidPermissions.PERMISSION.CAMERA, 
                this.androidPermissions.PERMISSION.MODIFY_AUDIO_SETTINGS,
            this.androidPermissions.PERMISSION.RECORD_AUDIO
           ]);

  //navigator.mediaDevices
  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: true
    })
    .then(mediaStream => {
        console.log("Video camera platform ready")
    });


});
}

AndroidManifest.xml

 <uses-sdk android:minSdkVersion="23" android:targetSdkVersion="26" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Answer 1

更新 - 04/11/2018 - 工作 Ionic 示例

正如所 promise 的，我今天对此进行了破解。现在完整回答您的问题:是的，您可以在 Android 上的 ionic 内部访问 getUserMedia。

查看我的 GitHub 项目 here获取工作示例和屏幕截图。

查看此功能分支 here它成功地在 iframe 内测试了 getUserMedia

涉及的步骤:

• 安装 Ionic
• ionic 开始 getUserMedia 空白
• cd getUserMedia
• ionic 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 )
• 将 android list 权限添加到 config.xml 和 AndroidManifest.xml( link ，如果配置未复制，请转到platforms/android/app/src/AndroidManifest.xml)
• ionic cordova 平台添加 android
• ionic cordova 构建 android
• ionic cordova 运行 android

您还可以查看 React Native 的替代版本, native Android和 Cordova 。

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

Iframe:要确保 getUserMedia 在其中运行，请确保:

• 嵌入站点的 CORS 需要具有允许的访问源 header
• 启用访问摄像头和麦克风的安全权限 <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. 向 list 添加权限 ( 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 绑定(bind)。

可以在此处找到有关类似框架的更多阅读内容:

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