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


131

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;

5
Spero che lo risolveranno, ma questa può essere un'altra istanza di Apple che sta spingendo gli sviluppatori nel loro app store degradando la UX di Safari.
perfect_element

3
Sto cercando di imparare lo sviluppo progressivo di app Web e durante il test di un'app su Android e iOS ho riscontrato anche questo problema. Navigare sull'app in un browser funziona bene, ma una volta che "salva nella schermata principale" da Safari e provo ad usarla come un'app, ottengo una schermata nera quando provo ad accedere alla videocamera.
tutley,

2
iOS: 11.2.1 - Il problema persiste ...
aLiEnHeAd il

2
iOS: 11.2.2 - Il problema persiste ...
MrRobot

3
iOS 11.4.1 non sembra funzionare per me per fortuna nessuno?
Amah,

Risposte:


25

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.


24

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.


L'aggiornamento non sembra essere corretto. In iOS 11.3 Beta getUserMediae non webkitGetUserMediasono entrambi definiti quando si utilizza<meta name="apple-mobile-web-app-capable" content="yes">
ro-savage

@ ro-savage la versione finale è ora disponibile e non riusciamo ancora a farlo funzionare
Owen,

4
Safari è il nuovo ie, per favore, Apple, dacci il permesso di accedere ai dati multimediali dell'utente
Pablo Cegarra,

15

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.


Come sei riuscito a farlo funzionare con <meta name = "supporto-mobile-web-app-compatibile" content = "yes">?
Alexander,

1
Ho usato un modulo normale con un tag di input e ha funzionato.
Joachim Bøggild,

@ JoachimBøggild Sei sicuro che i dispositivi iOS 11.3+ possano aprire la fotocamera da un PWA ?? Grazie per aver dato una buona notizia.
Jegadeesh,

Sì abbastanza sicuro. Ce l'ho in esecuzione su posmo.com. Non ricordo le impostazioni. Includono però un file manifest.
Joachim Bøggild,

1
@ JoachimBøggild puoi condividere il tag manifest / VIDEO per questo. ho testato il mio codice e funziona solo in Safari. non nell'app della schermata principale.
Maggio


1

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


1
ho iOS 11.4 e non funzionerà su un'app della schermata iniziale. Cosa stai facendo per farlo funzionare?
Aron,

Non ho apportato alcuna modifica. Appena aggiornato all'ultima versione e ha iniziato a funzionare di nuovo.
aalcutt,

1
verificato 11.4. opere in Safari - non funziona come una schermata iniziale dell'app
Maggio

Sono su iOS 11.4.1 su iPad e funziona. Quale dispositivo stai usando?
aalcutt,

1
Qualche motivo per cui non puoi usare l'input del file? Funziona di nuovo.
aalcutt,

0

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!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.