Jak uzyskać dostęp do aparatu w aplikacji internetowej na ekranie głównym iOS11?

Podsumowanie

Nie możemy uzyskać dostępu do kamery z aplikacji internetowej na ekranie głównym systemu iOS11 (wersja publiczna) za pomocą WebRTC lub pliku wejściowego, szczegóły poniżej. W jaki sposób nasi użytkownicy mogą nadal uzyskiwać dostęp do kamery?

Obsługujemy stronę aplikacji internetowej przez https.

Aktualizacja, kwiecień

Wydaje się, że publiczne wydanie iOS 11.3 rozwiązało problem, a dostęp do kamery do wprowadzania plików znów działa!

Aktualizacja, marzec

Jak powiedzieli ludzie tutaj, dokumentacja Apple zaleca, aby funkcja kamery aplikacji internetowej powróciła w wersji 11.3 wraz z pracownikami usług. To dobrze, ale nie jesteśmy jeszcze pewni, czy chcemy, aby wszyscy ponownie instalowali ponownie, dopóki nie będziemy mogli dokładnie przetestować 11.3GM.

Rozwiązanie, listopad

Straciliśmy nadzieję, że Apple będzie chciał to naprawić i ruszyliśmy do przodu. Zmodyfikowaliśmy naszą aplikację internetową w celu usunięcia funkcji „Dodaj do ekranu głównego” systemu iOS i poprosiliśmy użytkowników, których dotyczy problem, o usunięcie wszelkich poprzednich ikon z ekranu głównego.

Aktualizacja, 6 grudnia

iOS 11.2 i iOS 11.1.2 nie naprawiają.

Obejścia, 21 września

Wygląda na to, że moglibyśmy zapytać obecnych klientów o aplikację internetową

• nie aktualizuj do iOS11 - powodzenia :)
• rób zdjęcia aparatem iOS, a następnie wybierz je z powrotem w aplikacji internetowej
• poczekaj na następną wersję beta ios
• zainstaluj ponownie jako stronę Safari w przeglądarce (po usunięciu logiki ATHS)
• przełącz się na Androida

Plik wejściowy

Nasz obecny kod produkcyjny wykorzystuje dane wejściowe pliku, które od lat działają dobrze z iOS 10 i starszymi. W systemie iOS11 działa jako karta Safari, ale nie w aplikacji na ekranie głównym. W tym drugim przypadku kamera jest otwarta i wyświetlany jest tylko czarny ekran, przez co nie nadaje się do użytku.

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

WebRTC

Safari 11 na iOS11 oferuje przechwytywanie multimediów WebRTC, co jest świetne.

Możemy przechwycić obraz z kamery do kanwy na normalnej stronie internetowej na komputerze stacjonarnym i mobilnym za pomocą navigator.mediaDevices.getUserMedia zgodnie z przykładowym kodem, do którego link znajduje się tutaj .

Kiedy dodamy stronę do ekranu głównego iPada lub iPhone'a, navigator.mediaDevicesstaje się undefinedbezużyteczna.

    <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;

Mamy podobny problem. Jak dotąd jedynym obejściem, jakie mogliśmy zrobić, było usunięcie metatagu, aby mógł on obsługiwać aplikację internetową Apple-mobile-web app i pozwolić użytkownikom otworzyć go w Safari, gdzie wszystko wydaje się działać normalnie.

Aktualizacja : Chociaż niektóre wcześniej opublikowane dzienniki zmian i posty doprowadziły mnie do przekonania, że ​​aplikacje internetowe korzystające z manifest.jsonzamiast zamiast apple-mobile-web-app-capablebędą miały wreszcie dostęp do właściwej implementacji WebRTC, niestety nie jest to prawdą, jak zauważyli inni tutaj, a testy potwierdziły. Smutna mina. Przepraszamy za związane z tym niedogodności i miejmy nadzieję, że pewnego szczęśliwego dnia w odległej galaktyce Apple w końcu da nam dostęp do kamery w widokach obsługiwanych przez (inne niż Safari) WebKit ...

Tak, jak wspominali inni, getUserMedia jest dostępne tylko bezpośrednio w Safari, ale ani w UIWebView, ani WKWebView, więc niestety jedyne opcje to

• usunięcie, <meta name="apple-mobile-web-app-capable" content="yes">aby Twoja „aplikacja” działała w normalnej zakładce Safari, gdzie dostępna jest getuserMedia
• używając struktury takiej jak Apache Cordova, która zapewnia dostęp do aparatu urządzenia na inne sposoby.

Mam nadzieję, że Apple usunie to ograniczenie WebRTC raczej wcześniej niż później ...

Źródło:
dla programistów, którzy używają WebKit w swoich aplikacjach, RTCPeerConnection i RTCDataChannel są dostępne w dowolnym widoku internetowym, ale dostęp do kamery i mikrofonu jest obecnie ograniczony do Safari.

Dobre wieści! W końcu wydaje się, że kamera jest dostępna z aplikacji internetowej na ekranie głównym w pierwszej wersji beta iOS 11.3.

Zrobiłem repozytorium z kilkoma plikami, które pokazują, że działa:

https://github.com/joachimboggild/uploadtest

Kroki do przetestowania:

1. Udostępniaj te pliki z witryny internetowej dostępnej z telefonu
2. Otwórz plik index.html w iOS Safari
3. Dodaj do ekranu głównego
4. Otwórz aplikację z ekranu głównego. Teraz strona internetowa jest otwarta na pełnym ekranie, bez interfejsu nawigacyjnego.
5. Naciśnij przycisk pliku, aby wybrać obraz z kamery.

Teraz aparat powinien działać normalnie i nie powinien być czarnym ekranem. To pokazuje, że funkcja działa ponownie.

Muszę dodać, że używam zwykłego pola, a nie getUserMedia lub czegoś takiego. Nie wiem, czy to działa.

Najwyraźniej rozwiązano to w „ios 13 beta 1”: https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Aktualizacja z 20.03.2020: https://twitter.com/firt/status/1241163092207243273?s=19

Wydaje się, że działa to ponownie w iOS 11.4, jeśli używasz pola wejściowego pliku.

Ostatnio napotkałem ten sam problem, jedynym rozwiązaniem, które wymyśliłem, było otwarcie w aplikacji w przeglądarce zamiast w trybie normalnym. Ale tylko na iOS!

Sztuczka polegała na utworzeniu 2 plików manifest.json z różnymi konfiguracjami.

Normalny dla Androida i jeden do wszystkiego to Apple, manifest-ios.json, jedyna różnica będzie dotyczyła właściwości display.

Krok 1: Dodaj identyfikator do tagu łącza manifestu:

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

Krok 2: Dodałem ten skrypt na dole treści:

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

Krok 3: w pliku manifest-ios.json ustaw wyświetlanie na przeglądarkę

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

Pojawia się inny problem, taki jak wielokrotne otwieranie aplikacji na wielu kartach.

Ale mam nadzieję, że to wam pomoże!