getUserMedia是否适用于Android应用中的ionic-webview？

Question

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

home.html的

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

APP-component.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 - 工作离子的例子

正如我所承诺的那样，今天我对此有所了解。现在全面回答您的问题：是的，您可以在Android上访问离子内的getUserMedia。

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

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

涉及的步骤：

• 安装离子
• 离子启动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）
• 将android manifest权限添加到config.xml和AndroidManifest.xml（qazxsw poi，如果配置没有复制转到platforms / android / app / src / AndroidManifest.xml）
• 离子cordova平台添加android
• 离子cordova构建android
• 离子cordova运行android

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

由于Apple对WKWebView和UIWebView的安全限制，对iOS的更新支持仍然是不合适的。

iframe：要确保getUserMedia在其中工作，请确保：

• 嵌入式站点的CORS需要具有允许的访问源头
• 启用安全权限以访问摄像头和麦克风Cordova

有关iframe功能的更多信息，请阅读以下内容：

• <iframe allow="camera; microphone">
• 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

---

是的，它理论上可行。请参阅下面的示例，了解如何在Android中执行此操作。对于iOS，由于WKWebView的限制，目前无法实现。我已经链接到下面的StackOverFlow问题，关于人们如何在Cordonic上实现这一目标，Ionic基于此。

无论框架如何，在Android上使用getUserMedia都需要实现的核心主要步骤是：

1. 确保您的应用是Android API 21及更高版本
2. 向Manifest添加权限（https://github.com/instructure/canvas-lms/issues/1219）
3. 确保使用link to file适配器以实现API兼容性
4. 确保将webrtc添加到Android项目gradle文件（getUserMedia）
5. 覆盖Chrome WebView权限以进行大访问（link to file）
6. 在应用程序启动时，请求用户访问摄像头。

您特别面临的问题是4.或5.看起来该项目可以帮助您实现这一目标。权限错误最有可能发生在您的应用正在使用的Chrome WebView未覆盖权限的情况下，和/或它是，并且用户尚未手动启用该权限。

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

有关类似框架的更多内容可以在这里找到：

• link to file example, line 106
• Why CordovaWebViewClient not working in Cordova 6 anymore
• https://github.com/marcusbelcher/rn-getUserMedia-test
• Cordova版本的这个问题：https://github.com/marcusbelcher/android-getUserMedia-test
• NotReadableError: Could not start source

Answer 2

在Android Chrome浏览器中。 Navigator.mediaDevice.getUserMedia（）仅支持Chrome版本52.请检查您的Chrome浏览器版本。

您可以使用Cordova-plugin-media cordova插件录制音频文件。