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

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;

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.

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.

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.

Anscheinend ist in "ios 13 beta 1" gelöst: https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Update 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

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

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!