Ionic 4 getUserMedia Не разрешено в ionic-webview

Question

Это происходит в Android-сборке приложения.Я использую iframe для тестирования getUserMedia.Демонстрационная страница webrtc выдает мне «GetUserMedia: Ошибка не разрешена».Я дал все разрешения в AndroidManifest.xml, но все еще не мог получить доступ к камере.Что еще нужно сделать, чтобы получить доступ к камере для внешнего сайта?

home.html

<ion-content class= 'padding has-subheader'>
  <iframe class= 'webPage' name= "eventsPage" src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
 </iframe>
</ion-content>

config.xml

<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-camera" spec="^4.0.3" />
<plugin name="android-camera-permission" spec="^1.0.0" />
<plugin name="cordova-plugin-media" spec="^5.0.2" />
<plugin name="cordova-opentok-android-permissions" spec="^1.0.1" />
<plugin name="cordova.plugins.diagnostic" spec="^4.0.10" />
<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
<plugin name="cordova-plugin-media-capture" spec="^3.0.2" />
<plugin name="cordova-plugin-compat" spec="^1.2.0" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<engine name="android" spec="7.0.0" />

Answer 1

Помечено как дубликат: Работает ли getUserMedia в ionic-webview в приложении Android?

Тем не менее я скопировал и вставил свой ответ ниже

---

Обновление - 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: Ошибка при доступе к navigator.mediaDevices.getUserMedia?