Come accedere alla videocamera sull'app Web della schermata iniziale di iOS11?

Sommario

Non è possibile accedere alla videocamera da un'app Web della schermata iniziale iOS11 (versione pubblica) utilizzando WebRTC o l'input del file, i dettagli di seguito. Come possono i nostri utenti continuare ad accedere alla videocamera per favore?

Stiamo servendo la pagina dell'app Web su https.

Aggiornamento, aprile

La versione pubblica di iOS 11.3 sembra aver risolto il problema e l'accesso alla fotocamera per l'input di file funziona di nuovo!

Aggiornamento, marzo

Come la gente qui ha detto che i documenti di Apple suggeriscono che la funzione della videocamera per app Web tornerà in 11.3 insieme ai lavoratori dell'assistenza. Questo è buono ma non siamo ancora sicuri se vogliamo che tutti si reinstallino di nuovo fino a quando non saremo in grado di testare a fondo su 11.3GM.

Soluzione, novembre

Abbiamo perso la speranza che Apple voglia risolvere questo problema e siamo andati avanti. Modificata la nostra app Web per rimuovere la funzione "Aggiungi alla schermata principale" di iOS e chiesto agli utenti interessati di rimuovere qualsiasi icona della schermata principale precedente.

Aggiornamento, 6 dicembre

iOS 11.2 e iOS 11.1.2 non si risolvono.

Soluzioni alternative, 21 settembre

Sembra che potremmo chiedere ai clienti esistenti dell'app Web

• non aggiornare a iOS11 - buona fortuna :)
• scattare foto con la fotocamera iOS e selezionarle nuovamente nell'app Web
• attendere la prossima beta di iOS
• reinstallare come pagina di Safari nel browser (dopo aver rimosso la logica ATHS)
• passa ad Android

File Input

Il nostro attuale codice di produzione utilizza un input di file che ha funzionato bene per anni con iOS 10 e versioni precedenti. Su iOS11 funziona come una scheda Safari ma non dall'app della schermata principale. In quest'ultimo caso la fotocamera viene aperta e viene visualizzata solo una schermata nera, quindi è inutilizzabile.

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

WebRTC

Safari 11 su iOS11 offre l'acquisizione multimediale WebRTC che è eccezionale.

Siamo in grado di catturare un'immagine della telecamera su tela su una normale pagina Web su desktop e dispositivo mobile utilizzando navigator.mediaDevices.getUserMedia secondo il codice di esempio collegato qui .

Quando aggiungiamo la pagina alla schermata principale di iPad o iPhone, navigator.mediaDevicesdiventa undefinedinutilizzabile.

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

Abbiamo un problema abbastanza simile. Finora l'unica soluzione che siamo riusciti a fare è rimuovere il meta tag affinché sia ​​"apple-mobile-web-app-compatibile" e consentire agli utenti di aprirlo in Safari, dove tutto sembra funzionare normalmente.

Aggiornamento : mentre alcuni changelog e post pubblicati in precedenza mi hanno portato a credere che le app Web che utilizzano un manifest.jsoninvece di apple-mobile-web-app-capableavrebbero finalmente accesso a un'implementazione WebRTC corretta, sfortunatamente questo non è vero, come altri hanno sottolineato e i test hanno confermato. Faccia triste. Ci scusiamo per gli inconvenienti causati da questo e speriamo che un giorno fortunato in una galassia molto, molto lontana, Apple ci darà finalmente l'accesso alla telecamera in viste alimentate da (non Safari) WebKit ...

Sì, come altri hanno già detto, getUserMedia è disponibile solo direttamente in Safari ma né in UIWebView né WKWebView, quindi purtroppo le tue uniche scelte sono

• rimuovendo <meta name="apple-mobile-web-app-capable" content="yes">così la tua 'app' viene eseguita in una normale scheda Safari, dove getuserMedia è accessibile
• utilizzando un framework come Apache Cordova che consente l'accesso alla fotocamera di un dispositivo in altri modi.

Speriamo che Apple rimuova questa restrizione WebRTC piuttosto prima che dopo ...

Fonte:
per gli sviluppatori che utilizzano WebKit nelle loro app, RTCPeerConnection e RTCDataChannel sono disponibili in qualsiasi visualizzazione Web, ma l'accesso alla videocamera e al microfono è attualmente limitato a Safari.

Buone notizie! La fotocamera sembra finalmente accessibile da un'app Web della schermata iniziale nella prima versione beta di iOS 11.3.

Ho fatto un repository con alcuni file, che dimostrano che funziona:

https://github.com/joachimboggild/uploadtest

Passaggi per testare:

1. Servi questi file da un sito Web accessibile dal tuo telefono
2. Apri index.html in iOS Safari
3. Aggiungere alla schermata Home
4. Apri l'app dalla schermata principale. Ora la pagina web è aperta a schermo intero, senza interfaccia utente di navigazione.
5. Premere il pulsante file per selezionare un'immagine dalla fotocamera.

Ora la fotocamera dovrebbe funzionare normalmente e non essere una schermata nera. Ciò dimostra che la funzionalità funziona di nuovo.

Devo aggiungere che uso un campo semplice, non getUserMedia o somesuch. Non so se funzioni.

Apparentemente è risolto in "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

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

Questo sembra funzionare di nuovo in iOS 11.4 se si utilizza un campo di input file.

Di recente ho riscontrato lo stesso problema, l'unica soluzione che mi è venuta in mente è stata quella di aprire l'app nel browser anziché in modalità normale. Ma solo su iOS!

Il trucco era creare 2 file manifest.json con diverse configurazioni.

Quello normale per Android e quello per tutto è Apple, manifest-ios.json, l'unica differenza sarà sulla proprietà del display.

Passaggio 1: aggiungi ID al tag manifest link:

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

Passaggio 2: aggiunto questo script nella parte inferiore del corpo:

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

Passaggio 3: in manifest-ios.json impostare la visualizzazione sul browser

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

Un altro problema si presenta come l'apertura dell'app più volte in più schede, a volte.

Ma spero che vi aiuti ragazzi!