Как получить доступ к камере в веб-приложении на домашнем экране 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;

У нас очень похожая проблема. Пока что единственный обходной путь, который мы смогли сделать, - это удалить метатег, чтобы он был «совместим с мобильным веб-приложением для яблока», и позволить пользователям открывать его в 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, единственная разница будет в свойстве display.

Шаг 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: в manifest-ios.json установите отображение в браузере

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

Возникает другая проблема, например, открытие приложения несколько раз на нескольких вкладках, иногда.

Но надеюсь, что это поможет вам, ребята!