Работает ли getUserMedia в ionic-webview в приложении Android?

Question

Я дал все разрешения для камеры и микрофона.Включите CSP в метатеге для iframe.Все еще не удается получить разрешение для камеры и микрофона в getusermedia для iframe.

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 - рабочий ионный пример

Как и было обещано, у меня сегодня получилось.Чтобы ответить на ваш вопрос сейчас полностью: Да, вы можете получить доступ к getUserMedia внутри ionic на Android.

См. Мой проект GitHub здесь для рабочего примера и для снимков экрана.

См. Эту ветку функций здесь , которая успешно тестирует getUserMedia внутри iframe

Необходимые шаги:

• Установка Ionic
• ionic start getUserMedia blank
• cd getUserMedia
• плагин ionic cordova добавить cordova-plugin-android-permissions
• npm установить --save @ ionic-native / android-permissions
• npm установить webrtc-адаптер - сохранить
• ссылка на адаптер в сценариях angular.json ( ссылка )
• Добавить AndroidPermissions в app.module.tsпровайдер ( ссылка )
• Создание кода доступа к камере в файле home.component.ts ( ссылка )
• Добавление разрешений для Android в файл config.xml иAndroidManifest.xml ( ссылка , если конфигурация не копируется, перейдите на платфorms / android / app / src / AndroidManifest.xml)
• Ионная платформа Cordova Add android
• Ионная Cordova build Android
• Ионная Cordova Run Android

Вы также можете увидеть альтернативные версии этого для React Native , родной Android и Cordova .

На данный момент поддержка iOS по-прежнему отсутствует из-за ограничений безопасности Apple для WKWebView и UIWebView.

Iframes: Чтобы убедиться, что getUserMedia работает внутри них, убедитесь, что вы:

• CORS встроенного сайта должны иметь заголовок источника разрешенного доступа
• включить разрешения безопасности для доступа к камере и микрофону <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 о том, как люди достигают этого на Cordova, на которой основан Ionic.

Основные основные шаги, которые необходимо выполнить, чтобы getUserMedia работала на Android независимо от платформы:

1. Убедитесь, что ваше приложение работает под управлением Android API 21 и выше
2. Добавьте разрешения для манифеста ( ссылка на файл )
3. Убедитесь, что вы используете getUserMedia адаптер для совместимости API
4. Убедитесь, что вы добавили webrtc в файл gradle проекта Android ( ссылка на файл )
5. Переопределите разрешения Chrome WebView для общего доступа( ссылка на пример файла, строка 106 )
6. При запуске приложения запросите у пользователя разрешение на доступ к камере.

Проблема, с которой вы столкнулись конкретно, - 4или 5. Похоже, проект зашел так далеко.Ошибка разрешения, скорее всего, связана с тем, что Chrome WebView, которое использует ваше приложение, не переопределяет разрешение, и / или это так, и пользователь не включил разрешение вручную.

Таким образом, в рамках Ionic вам необходимо расширить его браузер, чтобы получить доступ к переопределению onRequestPermissionsResult.Для этого вам нужно создать плагин Cordova, а затем создать ионные привязки.

Подробнее об этом для подобных фреймворков можно найти здесь:

• Почему CordovaWebViewClient больше не работает в Cordova 6
• https://github.com/marcusbelcher/rn-getUserMedia-test
• https://github.com/marcusbelcher/android-getUserMedia-test
• Cordova версия этого вопроса: NotReadableError: Не удалось запустить источник
• Progressive Web App: Ошибка доступа к навигатору.mediaDevices.getUserMedia?

Answer 2

В браузере Android Chrome.Navigator.mediaDevice.getUserMedia () будет поддерживаться только в Chrome версии 52. Проверьте версию браузера Chrome.

Вы можете использовать плагин Cordova-plugin-media cordova для записи аудиофайлов.