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

Question

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

sow*_*ksr 1 android getusermedia ionic-framework ionic-webview

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

主页.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")
    });


});
}

Run Code Online (Sandbox Code Playgroud)

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" />

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*cus 6

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

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

在此处查看我的 GitHub 项目的工作示例和截图。

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

涉及的步骤：

安装离子
离子开始 getUserMedia 空白
cd getUserMedia
离子cordova插件添加cordova-plugin-android-permissions
npm install --save @ionic-native/android-permissions
npm install webrtc-adapter --save
链接到 angular.json 脚本中的适配器（链接）
将 AndroidPermissions 添加到 app.module.ts 提供程序（链接）
在 home.component.ts 中创建相机访问代码（链接）
将 android 清单权限添加到 config.xml 和 AndroidManifest.xml (链接，如果配置没有复制到平台/android/app/src/AndroidManifest.xml）
离子cordova平台添加android
离子科尔多瓦构建android
离子科尔多瓦运行安卓

您还可以查看React Native、原生 Android和Cordova 的替代版本。

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

Iframes：为了确保 getUserMedia 在其中工作，请确保您：

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

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

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

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

确保您的应用是 Android API 21 及更高版本
向清单添加权限（链接到文件）
确保您使用getUserMedia适配器来实现 API 兼容性
确保将 webrtc 添加到 Android 项目 gradle 文件（链接到文件）
覆盖 Chrome WebView 权限以进行大访问（链接到文件示例，第 106 行）
在应用程序启动时询问用户访问相机的权限。

您具体面临的问题是 4. 或 5。看起来该项目让您走得那么远。权限错误很可能归结为您的应用程序使用的 Chrome WebView 没有覆盖该权限，和/或它是并且用户尚未手动启用该权限。

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

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

归档时间：	7 年，2 月前
查看次数：	4515 次
最近记录：	6 年，9 月前