getUserMedia 是否在 Android 应用程序的 ionic-webview 中工作？

Question

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

home.html

离子含量class='padding has-subheader'>

应用-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

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

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

Answer 2

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

正如承诺的那样，我今天对此有所了解。现在完整回答您的问题：是的，您可以在 Android.

上访问离子内部的 getUserMedia

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

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

涉及的步骤：

安装离子
ionic 启动 getUserMedia 空白
cd getUserMedia
ionic cordova 插件添加 cordova-plugin-android-permissions
npm install --save @ionic-native/android-permissions
npm 安装webrtc-adapter --保存
link 到 angular.json 脚本中的适配器 (link)
向 app.module.ts 提供商 (link) 添加 Android 权限
在home.component.ts(link)
向config.xml和AndroidManifest.xml添加android最明确的权限（link，如果配置没有复制到platforms/android/app/src/AndroidManifest。xml)
ionic cordova 平台添加 android
ionic cordova 构建 android
离子科尔多瓦运行 android

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

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

Iframes: 要确保 getUserMedia 在其中工作，请确保您：

嵌入式站点的 CORS 需要具有允许的访问源 header
启用访问摄像头和麦克风的安全权限<iframe allow="camera; microphone">

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

是的，理论上可以。请参阅下面的示例，了解如何在 Android 中执行此操作。对于 iOS，由于 WKWebView 的限制，目前这是不可能的。我已经 link 回答了下面的 Whosebug 问题，关于人们如何在 Ionic 所基于的 Cordova 上实现这一点。

无论框架如何，让 getUserMedia 在 Android 上工作需要实现的核心主要步骤是：

确保您的应用 Android API 21 岁及以上
向清单添加权限（link to file）
确保使用 getUserMedia 适配器以获得 API 兼容性
确保将 webrtc 添加到 Android 项目 gradle 文件 (link to file)
重写 Chrome WebView 权限以获取 grand access (link to file example, line 106)
在应用程序启动时询问用户是否允许访问相机。

您具体面临的问题是 4 或 5。看起来该项目可以帮助您做到这一点。权限错误很可能是由于 Chrome 您的应用程序使用的 WebView 没有覆盖权限，and/or 是并且用户没有手动启用权限。

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

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

getUserMedia 是否在 Android 应用程序的 ionic-webview 中工作？

Does getUserMedia works in ionic-webview in Android app?

android

getusermedia

ionic-framework

ionic-webview