getUserMedia是否可以在Android应用程序的ionic-webview中工作? [英] Does getUserMedia works in ionic-webview in Android app?

查看：246 发布时间：2020/8/30 6:33:08 android ionic-framework getusermedia ionic-webview

本文介绍了getUserMedia是否可以在Android应用程序的ionic-webview中工作?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已授予相机和麦克风的所有权限.在iframe的meta标签中启用CSP.仍无法在iframe的getusermedia中获得摄像头和麦克风的许可.

I have given all the permissions for camera and microphone. Enable CSP in meta tag for the iframe. Still not able to get permission for camera and microphone in getusermedia for iframe.

home.html

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

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

推荐答案

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

正如我所承诺的，今天我对此有所了解.要立即完整回答您的问题:是的，您可以在Android上的ionic内访问getUserMedia.

As promised I had a crack at this today. To answer your question now in full: Yes you can access getUserMedia inside of ionic on Android.

在此处查看我的GitHub项目此处，以获取工作示例和屏幕截图.

See my GitHub project here for a working example and for screenshots.

在此处中查看此功能分支，该分支成功测试了getUserMedia在iframe内

See this feature branch here which successfully tests getUserMedia inside of an iframe

涉及的步骤:

安装Ionic
ionic start getUserMedia空白
cd getUserMedia
ionic cordova插件添加cordova-plugin-android-permissions
npm install --save @ ionic-native/android-permissions
npm安装webrtc-adapter --save
链接到angular.json脚本中的适配器(链接)
将AndroidPermissions添加到app.module.ts提供程序中(链接)
在home.component.ts(

Install Ionic
ionic start getUserMedia blank
cd getUserMedia
ionic cordova plugin add cordova-plugin-android-permissions
npm install --save @ionic-native/android-permissions
npm install webrtc-adapter --save
link to adapter in angular.json scripts (link)
Add AndroidPermissions to app.module.ts provider (link)
Create camera access code in home.component.ts (link)
Add android manifiest permissions to config.xml and AndroidManifest.xml (link, if the config doesn't copy go to platforms/android/app/src/AndroidManifest.xml)
ionic cordova platform add android
ionic cordova build android
ionic cordova run android

对于 React Native ，原生Android 和由于Apple对WKWebView和UIWebView的安全限制，从此更新开始，对iOS的支持仍为否.

As of this update support for iOS is still a no due to Apple security restrictions on WKWebView and UIWebView.

iframe::要确保getUserMedia在其中起作用，请确保您:

Iframes: To make sure getUserMedia works inside of them make sure you:

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

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

Please read the following for more info on iframe features:

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上实现这一目标.

Yes, it theoretically can work. See my example below on how to do it in Android. For iOS this isn't currently possible due to the limitations of WKWebView. I have linked to a StackOverFlow question below on how people are achieving this on Cordova which Ionic is based off.

无论框架如何，都要使getUserMedia在Android上运行所需完成的核心主要步骤是:

The core main steps which need to be achieved to get getUserMedia working on Android regardless of framework are:

确保您的应用是Android API 21及更高版本
向清单添加权限(链接到文件)
确保您使用 getUserMedia 适配器来实现API兼容性
确保将webrtc添加到Android项目gradle文件中(

Make sure your app is Android API 21 and above
Add permissions to Manifest (link to file)
Make sure you use getUserMedia adapter for API compatibility
Make sure you add webrtc to the Android project gradle file (link to file)
Override Chrome WebView permissions to grand access (link to file example, line 106)
On app start ask user for permission to access the camera.

您专门面对的问题是4.或5.看起来该项目使您走到了那么远.权限错误很可能是因为您的应用使用的Chrome WebView不会覆盖该权限，并且/或者是，并且用户尚未手动启用该权限.

The issue you are specifically facing is 4. or 5. It looks like the project gets you that far. The permission error is most likely down to the Chrome WebView your app is using doesn't override the permission, and/or it is and the user hasn't manually enabled the permission.

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

Thus within the Ionic framework you need to extend its Browser to get access to the override onRequestPermissionsResult. To do this you need to make a Cordova plugin and then create the Ionic bindings.

有关类似框架的更多信息，请参见:

More reading about this for similar frameworks can be found here:

Why CordovaWebViewClient not working in Cordova 6 anymore
https://github.com/marcusbelcher/rn-getUserMedia-test
https://github.com/marcusbelcher/android-getUserMedia-test
Cordova version of this question: NotReadableError: Could not start source
Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?

这篇关于getUserMedia是否可以在Android应用程序的ionic-webview中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

getUserMedia是否可以在Android应用程序的ionic-webview中工作? [英] Does getUserMedia works in ionic-webview in Android app?

问题描述

推荐答案

相关文章

移动开发最新文章

热门教程

热门工具

登录关闭

getUserMedia是否可以在Android应用程序的ionic-webview中工作? [英] Does getUserMedia works in ionic-webview in Android app?

问题描述

推荐答案

相关文章

移动开发最新文章

热门教程

热门工具

登录 关闭

登录关闭