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

133

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;
ajayel
źródło
5
Mam nadzieję, że to naprawią, ale może to być kolejny przypadek, w którym Apple wpycha programistów do swojego sklepu z aplikacjami, degradując UX Safari.
perfect_element
3
Próbuję się uczyć progresywnego tworzenia aplikacji internetowych i podczas testowania aplikacji na Androida i iOS również napotkałem ten problem. Przeglądanie aplikacji w przeglądarce działa dobrze, ale kiedy „zapiszę na ekranie głównym” z safari i próbuję używać jej jak aplikacji, podczas próby uzyskania dostępu do aparatu pojawia się czarny ekran.
tutley
2
iOS: 11.2.1 - Problem nadal występuje ...
aLiEnHeAd
2
iOS: 11.2.2 - Problem nadal występuje ...
MrRobot
3
Wydaje się, że iOS 11.4.1 nie działa na mnie, ktoś ma szczęście?
Amah

Odpowiedzi:

25

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.

Tomas Vitasek
źródło
25

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.

StateOfTheArtJonas
źródło
Aktualizacja wydaje się nieprawidłowa. W iOS 11.3 Beta getUserMediai webkitGetUserMediaoba są niezdefiniowane podczas używania<meta name="apple-mobile-web-app-capable" content="yes">
ro-savage
@ ro-Savage ostateczna wersja jest teraz, i nadal nie możemy uzyskać to do pracy
Owen
4
safari to nowe, tzn. proszę jabłko, daj nam pozwolenie na dostęp do danych multimedialnych użytkownika
Pablo Cegarra
15

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.

Joachim Bøggild
źródło
Jak udało Ci się uruchomić go z <meta name = "apple-mobile-web-app-ready" content = "yes">?
Alexander,
1
Użyłem normalnego formularza ze znacznikiem wejściowym i zadziałało.
Joachim Bøggild
@ JoachimBøggild Czy na pewno urządzenia iOS 11.3+ mogą otwierać kamerę z PWA? Dzięki za przekazanie dobrych wiadomości.
jegadeesh
Tak, całkiem pewne. Mam to uruchomione na posmo.com. Nie pamiętam ustawień. Zawierają jednak plik manifestu.
Joachim Bøggild,
1
@ JoachimBøggild, czy możesz udostępnić w tym celu tag manifestu / VIDEO. przetestowałem mój kod i działa tylko w safari. nie w aplikacji na ekranie głównym.
Maj
1

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

aalcutt
źródło
1
Mam system iOS 11.4 i nie będzie działać w aplikacji na ekranie głównym. Co robisz, żeby to zadziałało?
Aron,
Nie wprowadziłem żadnych zmian. Aktualizacja do najnowszej wersji i znowu zaczęło działać.
aalcutt
1
sprawdzone 11.4. działa w safari - nie działa jako aplikacja na ekranie głównym
maja
Jestem na iOS 11.4.1 na iPadzie i działa. Z jakiego urządzenia korzystasz?
aalcutt
1
Jest jakiś powód, dla którego nie możesz użyć wejścia pliku? To znowu działa.
aalcutt
0

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!

Domotor Zsolt
źródło