Comment accéder à l'appareil photo sur l'application web de l'écran d'accueil d'iOS11 ?

Question

Résumé

Nous ne pouvons pas accéder à la caméra à partir d'une application Web de l'écran d'accueil d'iOS11 (version publique) en utilisant WebRTC ou l'entrée de fichier, détails ci-dessous. Comment nos utilisateurs peuvent-ils continuer à accéder à la caméra ?

Nous servons la page de l'application web sur https.

Mise à jour, avril

La version publique d'iOS 11.3 semble avoir corrigé le problème et l'accès à la caméra d'entrée des fichiers fonctionne à nouveau !

Mise à jour, mars

Comme d'autres personnes l'ont dit ici, les documents d'Apple indiquent que la fonction de caméra de l'application Web revient dans la version 11.3, ainsi que les travailleurs de service. C'est une bonne chose mais nous ne sommes pas encore sûrs de vouloir réinstaller tout le monde jusqu'à ce que nous puissions faire des tests approfondis sur 11.3GM.

Solution, novembre

On a perdu l'espoir qu'Apple veuille réparer ça et on a avancé. Nous avons modifié notre application web pour supprimer la fonction iOS "Ajouter à l'écran d'accueil" et demandé aux utilisateurs concernés de supprimer toute icône d'écran d'accueil antérieure.

Mise à jour, 6 décembre

iOS 11.2 et iOS 11.1.2 ne règlent pas le problème.

Solutions de contournement, 21 septembre

Il semble que nous pourrions demander aux clients existants de l'application web

• ne pas passer à iOS11 - bonne chance pour cela :)
• prendre des photos avec l'appareil photo d'iOS, puis les sélectionner à nouveau dans l'application Web
• attendez la prochaine bêta d'ios
• réinstaller comme une page Safari dans le navigateur (après avoir supprimé la logique ATHS)
• passer à Android

Entrée du fichier

Notre code de production actuel utilise une entrée de fichier qui fonctionne bien depuis des années avec iOS 10 et plus. Sous iOS11, il fonctionne en tant qu'onglet Safari mais pas à partir de l'application de l'écran d'accueil. Dans ce dernier cas, l'appareil est ouvert et seul un écran noir s'affiche, ce qui le rend inutilisable.

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

WebRTC

Safari 11 sur iOS11 offre Capture des médias WebRTC ce qui est génial.

Nous pouvons capturer l'image d'une caméra pour l'afficher sur une page Web normale sur un ordinateur de bureau ou un téléphone portable en utilisant navigator.mediaDevices.getUserMedia per. l'exemple de code lié ici .

Lorsque nous ajoutons la page à l'écran d'accueil de l'iPad ou de l'iPhone, navigator.mediaDevices devient undefined et inutilisable.

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

Answer 1

Nous avons un problème assez similaire. Jusqu'à présent, la seule solution que nous avons trouvée est de supprimer la balise méta pour qu'elle soit "apple-mobile-web-app-capable" et de laisser les utilisateurs l'ouvrir dans Safari, où tout semble fonctionner normalement.

Answer 2

Mise à jour : Alors que certains changelogs et posts publiés précédemment m'ont amené à croire que les Web Apps utilisant une manifest.json au lieu de apple-mobile-web-app-capable aurait enfin accès à une mise en œuvre correcte de WebRTC, malheureusement ce n'est pas vrai, comme d'autres ici l'ont souligné et les tests l'ont confirmé. C'est triste. Nous sommes désolés pour les désagréments causés par cette situation et espérons qu'un jour, dans une galaxie lointaine, très lointaine, Apple nous donnera enfin accès à la caméra dans les vues fonctionnant avec WebKit (non-Safari)...

Oui, comme d'autres l'ont mentionné, getUserMedia n'est disponible que directement dans Safari, mais pas dans un UIWebView ou un WKWebView, donc malheureusement vos seuls choix sont

• enlever <meta name="apple-mobile-web-app-capable" content="yes"> pour que votre "application" fonctionne dans un onglet normal de Safari, où getuserMedia est accessible.
• en utilisant un framework comme Apache Cordova qui vous permet d'accéder à l'appareil photo d'un appareil par d'autres moyens.

Il ne reste plus qu'à espérer qu'Apple lève cette restriction WebRTC le plus tôt possible...

Source :
Pour les développeurs qui utilisent WebKit dans leurs applications, RTCPeerConnection et RTCDataChannel sont disponibles dans n'importe quelle vue web, mais l'accès à la caméra et au microphone est actuellement limité à Safari.

Answer 3

Bonne nouvelle ! L'appareil photo semble enfin être accessible depuis une application web de l'écran d'accueil dans la première bêta d'iOS 11.3.

J'ai fait un repo avec quelques fichiers, qui démontrent que cela fonctionne :

https://github.com/joachimboggild/uploadtest

Étapes du test :

1. Servez ces fichiers à partir d'un site web accessible depuis votre téléphone.
2. Ouvrir l'index.html dans iOS Safari
3. Ajouter à l'écran d'accueil
4. Ouvrez l'application à partir de l'écran d'accueil. Maintenant la page web est ouverte en plein écran, sans interface de navigation.
5. Appuyez sur le bouton de fichier pour sélectionner une image de l'appareil photo.

Maintenant, la caméra devrait fonctionner normalement et ne pas être un écran noir. Ceci démontre que la fonctionnalité fonctionne à nouveau.

Je dois ajouter que j'utilise un champ ordinaire, pas getUserMedia ou autre. Je ne sais pas si cela fonctionne.

Answer 4

Apparemment, c'est résolu dans "ios 13 beta 1" : https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Mise à jour du 20/03/2020 : https://twitter.com/firt/status/1241163092207243273?s=19

Answer 5

Cela semble fonctionner à nouveau dans iOS 11.4 si vous utilisez un champ de saisie de fichier.