Wie greife ich über die iOS11-Startbildschirm-Web-App auf die Kamera zu?

131

Zusammenfassung

Wir können weder über WebRTC noch über die Dateieingabe über eine Web-App für den iOS11-Startbildschirm auf die Kamera zugreifen (siehe unten). Wie können unsere Benutzer weiterhin auf die Kamera zugreifen?

Wir bedienen die Web-App-Seite über https.

Update, April

Die öffentliche Version von iOS 11.3 scheint das Problem behoben zu haben und der Zugriff auf die Dateieingabekamera funktioniert wieder!

Update, März

Wie die Leute hier gesagt haben, empfehlen die Apple-Dokumente, dass die Web-App-Kamerafunktion in 11.3 zusammen mit den Servicemitarbeitern zurückkehrt. Das ist gut, aber wir sind uns noch nicht sicher, ob wir möchten, dass alle es erneut installieren, bis wir gründlich mit 11.3GM testen können.

Lösung, November

Wir haben die Hoffnung verloren, dass Apple dies beheben will, und sind weitergekommen. Unsere Web-App wurde geändert, um die iOS-Funktion "Zum Startbildschirm hinzufügen" zu entfernen, und die betroffenen Benutzer wurden aufgefordert, alle vorherigen Startbildschirmsymbole zu entfernen.

Update, 6. Dezember

iOS 11.2 und iOS 11.1.2 beheben nicht.

Problemumgehungen, 21. September

Anscheinend könnten wir bestehende Kunden der Web-App fragen

  • kein Upgrade auf iOS11 - viel Glück damit :)
  • Nehmen Sie Fotos mit der iOS-Kamera auf und wählen Sie sie dann wieder in der Web-App aus
  • warte auf die nächste ios beta
  • Neuinstallation als Safari-In-Browser-Seite (nachdem wir die ATHS-Logik entfernt haben)
  • Wechseln Sie zu Android

Dateieingabe

Unser aktueller Produktionscode verwendet eine Dateieingabe, die seit Jahren mit iOS 10 und älter funktioniert. Unter iOS11 funktioniert es als Safari-Registerkarte, jedoch nicht über die Startbildschirm-App. Im letzteren Fall wird die Kamera geöffnet und nur ein schwarzer Bildschirm angezeigt, daher ist sie unbrauchbar.

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

WebRTC

Safari 11 unter iOS11 bietet eine großartige WebRTC-Medienerfassung .

Mit navigator.mediaDevices.getUserMedia können wir ein Kamerabild auf einer normalen Webseite auf Desktop und Handy auf Leinwand aufzeichnen, indem wir den hier verlinkten Beispielcode verwenden .

Wenn wir die Seite zum iPad- oder iPhone-Startbildschirm hinzufügen, navigator.mediaDeviceswird sie undefinedunbrauchbar.

    <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
quelle
5
Ich hoffe, dass sie das Problem beheben, aber dies kann eine weitere Instanz von Apple sein, die Entwickler in ihren App Store drängt, indem sie Safaris UX verschlechtert.
perfect_element
3
Ich versuche, die progressive Entwicklung von Web-Apps zu erlernen, und beim Testen einer App auf Android und iOS bin ich ebenfalls auf dieses Problem gestoßen. Das Surfen in der App in einem Browser funktioniert einwandfrei. Wenn ich jedoch von Safari aus auf dem Startbildschirm speichere und versuche, sie wie eine App zu verwenden, wird beim Zugriff auf die Kamera ein schwarzer Bildschirm angezeigt.
Tutley
2
iOS: 11.2.1 - Das Problem besteht weiterhin ...
aLiEnHeAd
2
iOS: 11.2.2 - Das Problem besteht weiterhin ...
MrRobot
3
iOS 11.4.1 scheint für mich kein Glück zu sein?
Amah

Antworten:

25

Wir haben ein ziemlich ähnliches Problem. Bisher war die einzige Problemumgehung, die wir tun konnten, das Meta-Tag zu entfernen, damit es "Apple-Mobile-Web-App-fähig" ist, und den Benutzern zu ermöglichen, es in Safari zu öffnen, wo alles normal zu funktionieren scheint.

Tomas Vitasek
quelle
24

Update : Während einige früher veröffentlichte Änderungsprotokolle und Postings mich zu der Annahme veranlassten, dass Web-Apps, die ein manifest.jsonanstelle von verwenden apple-mobile-web-app-capable, endlich Zugriff auf eine ordnungsgemäße WebRTC-Implementierung haben würden, ist dies leider nicht der Fall, wie andere hier hervorgehoben und Tests bestätigt haben. Trauriges Gesicht. Entschuldigen Sie die dadurch verursachten Unannehmlichkeiten und hoffen Sie, dass Apple uns eines glücklichen Tages in einer weit entfernten Galaxie endlich Zugriff auf die Kamera in Ansichten gewährt, die mit (Nicht-Safari) WebKit betrieben werden ...

Ja, wie bereits erwähnt, ist getUserMedia nur direkt in Safari verfügbar, jedoch weder in einer UIWebView noch in einer WKWebView. Leider haben Sie nur die Wahl

  • Entfernen, <meta name="apple-mobile-web-app-capable" content="yes">damit Ihre 'App' auf einer normalen Safari-Registerkarte ausgeführt wird, auf die getuserMedia zugreifen kann
  • Verwenden eines Frameworks wie Apache Cordova, mit dem Sie auf andere Weise auf die Kamera eines Geräts zugreifen können.

Wir hoffen, dass Apple diese WebRTC-Einschränkung eher früher als später aufhebt ...

Quelle:
Für Entwickler, die WebKit in ihren Apps verwenden, sind RTCPeerConnection und RTCDataChannel in jeder Webansicht verfügbar. Der Zugriff auf Kamera und Mikrofon ist derzeit jedoch auf Safari beschränkt.

StateOfTheArtJonas
quelle
Ihr Update scheint nicht korrekt zu sein. In iOS 11.3 Beta getUserMediaund webkitGetUserMediabeide sind bei der Verwendung undefiniert<meta name="apple-mobile-web-app-capable" content="yes">
ro-savage
@ ro-savage die endgültige Veröffentlichung ist jetzt heraus, und wir können dies immer noch nicht zum Laufen bringen
Owen
4
Safari ist die neue, dh bitte Apple, geben Sie uns die Erlaubnis, auf Benutzermediendaten zuzugreifen
Pablo Cegarra
15

Gute Nachrichten! In der ersten iOS 11.3 Beta scheint die Kamera endlich über eine Web-App auf dem Startbildschirm zugänglich zu sein.

Ich habe ein Repo mit ein paar Dateien gemacht, die zeigen, dass es funktioniert:

https://github.com/joachimboggild/uploadtest

Schritte zum Testen:

  1. Stellen Sie diese Dateien von einer Website aus bereit, auf die Sie von Ihrem Telefon aus zugreifen können
  2. Öffnen Sie die index.html in iOS Safari
  3. Zum Startbildschirm hinzufügen
  4. Öffnen Sie die App vom Startbildschirm aus. Jetzt ist die Webseite im Vollbildmodus ohne Navigationsoberfläche geöffnet.
  5. Drücken Sie die Dateitaste, um ein Bild von der Kamera auszuwählen.

Jetzt sollte die Kamera normal funktionieren und kein schwarzer Bildschirm sein. Dies zeigt, dass die Funktionalität wieder funktioniert.

Ich muss hinzufügen, dass ich ein einfaches Feld verwende, nicht getUserMedia oder ähnliches. Ich weiß nicht, ob das funktioniert.

Joachim Bøggild
quelle
Wie haben Sie es geschafft, es mit <meta name = "apple-mobile-web-app-fähig" content = "yes"> zum Laufen zu bringen?
Alexander
1
Ich habe ein normales Formular mit einem Eingabe-Tag verwendet und es hat funktioniert.
Joachim Bøggild
@ JoachimBøggild Sind Sie sicher, dass iOS 11.3+ Geräte die Kamera von einer PWA aus öffnen können? Vielen Dank für die gute Nachricht.
Jegadeesh
Ja ganz sicher. Ich habe es auf posmo.com laufen. Ich kann mich nicht an die Einstellungen erinnern. Sie enthalten jedoch eine Manifestdatei.
Joachim Bøggild
1
@ JoachimBøggild können Sie das Manifest / VIDEO-Tag dafür teilen. Ich habe meinen Code getestet und er funktioniert nur auf Safari. nicht in der Startbildschirm-App.
Mai
1

Dies scheint in iOS 11.4 wieder zu funktionieren, wenn Sie ein Dateieingabefeld verwenden.

aalcutt
quelle
1
Ich habe iOS 11.4 und es funktioniert nicht auf einer Startbildschirm-App. Was machst du, damit es funktioniert?
Aron
Ich habe keine Änderungen vorgenommen. Einfach auf die neueste Version aktualisieren und es fing wieder an zu funktionieren.
Aalcutt
1
geprüft am 11.4. funktioniert auf Safari - funktioniert nicht als Startbildschirm-App
Mai
Ich bin auf iOS 11.4.1 auf dem iPad und es funktioniert. Welches Gerät benutzt du?
Aalcutt
1
Gibt es einen Grund, warum Sie die Dateieingabe nicht verwenden können? Das funktioniert wieder.
Aalcutt
0

Vor kurzem hatte ich das gleiche Problem. Die einzige Lösung, die ich gefunden habe, war das Öffnen der App im Browser anstelle des normalen Modus. Aber nur unter iOS!

Der Trick bestand darin, 2 manifest.json-Dateien mit unterschiedlichen Konfigurationen zu erstellen.

Der normale für Android und einer für alles ist Apple, manifest-ios.json. Der einzige Unterschied besteht in der Anzeigeeigenschaft.

Schritt 1: Fügen Sie dem Manifest-Link-Tag eine ID hinzu:

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

Schritt 2: Dieses Skript wurde am unteren Rand des Körpers hinzugefügt:

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

Schritt 3: im Manifest-ios.json die Anzeige auf Browser

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

Ein weiteres Problem tritt auf, z. B. das mehrmalige Öffnen der App in mehreren Registerkarten.

Aber hoffe es hilft euch!

Domotor Zsolt
quelle