Як отримати доступ до камери у веб-додатку домашнього екрану iOS11?

Підсумок

Ми не можемо отримати доступ до камери через веб-додаток домашнього екрану iOS11 (публічний випуск) за допомогою WebRTC або файлового вводу, детальніше нижче. Як наші користувачі можуть надалі отримувати доступ до камери?

Ми обслуговуємо сторінку веб-програми через https.

Оновлення, квітень

Публічний випуск iOS 11.3, схоже, вирішив проблему, і доступ до камери вводу файлів знову працює!

Оновлення, березень

Як тут казали люди, документи Apple радять, що функція камери веб-додатків повертається в 11.3 разом із сервісними працівниками. Це добре, але ми ще не впевнені, чи хочемо ми знову перевстановити, поки ми не зможемо всебічно протестувати на 11.3GM.

Рішення, листопад

Ми втратили надію, що Apple захоче це виправити і рухається вперед. Змінив наш веб-додаток, щоб видалити функцію "Додати на головний екран" iOS і попросив постраждалих користувачів видалити будь-який попередній значок домашнього екрана.

Оновлення, 6 грудня

iOS 11.2 та iOS 11.1.2 не виправляються.

Обхідні шляхи, 21 вересня

Здається, ми можемо запитати існуючих клієнтів веб-програми

• не оновлення до iOS11 - удачі з цим :)
• фотографуйте в камері iOS, а потім виберіть їх назад у веб-програмі
• чекайте наступної бета-версії ios
• перевстановити як сторінку веб-переглядача Safari (після того, як ми видалимо логіку ATHS)
• перейти на Android

Введення файлів

У нашому поточному виробничому коді використовується введення файлу, який працював чудово протягом багатьох років із iOS 10 та старшими. На iOS11 він працює як вкладка Safari, але не з додатка головного екрану. В останньому випадку камера відкривається і відображається лише чорний екран, отже, вона непридатна.

   <meta name="apple-mobile-web-app-capable" content="yes">
   ...
   <input type="file" accept="image/*">

WebRTC

Safari 11 на iOS11 пропонує захоплення засобів масової інформації WebRTC, що чудово.

Ми можемо зафіксувати зображення камери на полотні на звичайній веб-сторінці на робочому столі та мобільному пристрої за допомогою navigator.mediaDevices.getUserMedia за зразком коду, зв'язаним тут .

Коли ми додаємо сторінку на головний екран iPad або iPhone, вона navigator.mediaDevicesстає undefinedі непридатною.

    <meta name="apple-mobile-web-app-capable" content="yes">
    ...
    // for some reason safari on mac can debug ios safari page but not ios home screen web apps 
    var d = 'typeof navigator : ' + typeof navigator; //object
    d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
    // try alternates
    d += 'typeof navigator.getUserMedia  : ' + typeof navigator.getUserMedia; // undefined
    d += 'typeof navigator.webkitGetUserMedia  : ' + typeof navigator.webkitGetUserMedia; // undefined
    status1.innerHTML = d;

У нас досить схожа проблема. Поки єдине рішення, яке нам вдалося зробити, - це видалити метатег, щоб він був "apple-mobile-web-app-enable", і дозволити користувачам відкривати його в Safari, де все, здається, працює нормально.

Оновлення : Хоча деякі опубліковані раніше журнали змін та публікації змусили мене повірити, що веб-додатки, які використовують manifest.jsonзамість цього apple-mobile-web-app-capable, нарешті отримають доступ до належної реалізації WebRTC, але, на жаль, це неправда, як це вказували інші та тестування підтвердили. Сумне обличчя. Вибачте за незручності, спричинені цим, і сподіваємось, що одного щасливого дня в далекій, далекій галактиці Apple нарешті дасть нам доступ до камери у видах, що працюють від (не-Safari) WebKit ...

Так, як уже згадували інші, getUserMedia доступний лише безпосередньо в Safari, але ні в UIWebView, ні в WKWebView, тож, на жаль, вашим єдиним вибором є

• видаліть, <meta name="apple-mobile-web-app-capable" content="yes">щоб ваш додаток запускався на звичайній вкладці Safari, де доступний getuserMedia
• використовуючи рамку типу Apache Cordova, яка надає вам доступ до камери пристрою іншими способами.

Ось, сподіваючись, Apple скасує це обмеження WebRTC швидше, ніж пізніше ...

Джерело:
Для розробників, які використовують WebKit у своїх додатках, RTCPeerConnection та RTCDataChannel доступні в будь-якому веб-перегляді, однак доступ до камери та мікрофона наразі обмежений Safari.

Гарні новини! Зрештою, камера, здається, доступна через веб-додаток домашнього екрану в першій бета-версії iOS 11.3.

Я зробив репо з кількома файлами, які демонструють, що він працює:

https://github.com/joachimboggild/uploadtest

Крок до тестування:

1. Подавайте ці файли з веб-сайту, доступного з вашого телефону
2. Відкрийте index.html в iOS Safari
3. Додати на головний екран
4. Відкрити додаток з головного екрана. Тепер веб-сторінка відкрита в повноекранному режимі без навігаційного інтерфейсу.
5. Натисніть кнопку файлу, щоб вибрати зображення з камери.

Тепер камера повинна працювати нормально і не бути чорним екраном. Це демонструє, що функціональність працює знову.

Треба додати, що я використовую звичайне поле, а не getUserMedia або щось подібне. Я не знаю, чи це працює.

Мабуть, вирішено в "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Оновлення 20.03.2020: https://twitter.com/firt/status/1241163092207243273?s=19

Здається, це знову працює в iOS 11.4, якщо ви використовуєте поле введення файлу.

Нещодавно я зіткнувся з тією ж проблемою, єдине рішення, яке я придумав - відкрити додаток у браузері замість звичайного режиму. Але тільки на iOS!

Хитрість полягала в тому, щоб створити 2 файли manifest.json з різною конфігурацією.

Нормальним для Android та одним для всього є Apple, manifest-ios.json, єдина різниця буде у властивості дисплея.

Крок 1. Додайте ідентифікатор до тегу посилання маніфесту:

<link id="manifest" rel="manifest" href="manifest.json">

Крок 2: Цей сценарій додано в нижній частині тіла:

<script>
    let isIOS = /(ipad|iphone|ipod|mac)/g.test(navigator.userAgent.toLowerCase());
    let manifest = document.getElementById("manifest");
    if (isIOS)
      manifest.href = 'manifest-ios.json'
</script>

Крок 3: у маніфесті-ios.json встановіть відображення браузера

{
    "name": "APP",
    "short_name": "app",
    "theme_color": "#0F0",
    "display": "browser", // <---- use this instead of standard
    ...
}

З'являється ще одна проблема, наприклад, відкриття програми кілька разів на кількох вкладках, іноді.

Але сподіваюся, що це допоможе вам, хлопці!