javascript - une - Comment accéder à la caméra sur l'application Web pour écran d'accueil iOS11?




touch event javascript (4)

Résumé

Nous ne pouvons pas accéder à la caméra à partir d'une application Web d'écran d'accueil iOS11 (version publique) à l'aide de WebRTC ou de l'entrée de fichier, comme indiqué ci-dessous. Comment nos utilisateurs peuvent-ils continuer à accéder à la caméra, s'il vous plaît?

Nous servons la page des applications Web via https.

Mise à jour, avril

La version publique d’iOS 11.3 semble avoir résolu le problème et l’accès à la caméra de saisie de fichier fonctionne à nouveau!

Mise à jour, mars

Comme les gens l’ont dit ici, la fonction appareil photo des applications Web est de retour dans la version 11.3 avec le personnel de maintenance. C'est bien, mais nous ne savons pas encore si nous voulons que tout le monde réinstalle jusqu'à ce que nous puissions effectuer des tests approfondis sur 11.3GM.

Solution, novembre

Nous avons perdu tout espoir que Apple veuille régler ce problème et nous avons avancé. Modification de notre application Web pour supprimer la fonction iOS "Ajouter à l'écran d'accueil" et demande aux utilisateurs concernés de supprimer toute icône d'écran précédent.

Mise à jour du 6 décembre

iOS 11.2 et iOS 11.1.2 ne résolvent pas.

Solutions de contournement, 21 septembre

On pourrait demander aux clients existants de l'application Web

  • pas de mise à niveau vers iOS11 - bonne chance avec ça :)
  • prendre des photos dans l'appareil photo iOS, puis les sélectionner à nouveau dans l'application Web
  • attendre la prochaine version bêta d'ios
  • réinstaller en tant que page Safari dans le navigateur (après suppression de la logique ATHS)
  • passer à Android

Entrée de fichier

Notre code de production actuel utilise une entrée de fichier qui a bien fonctionné pendant des années avec iOS 10 et les versions antérieures. Sur iOS11, il fonctionne comme un onglet Safari mais pas à partir de l'application de l'écran d'accueil. Dans ce dernier cas, la caméra est ouverte et seul un écran noir est affiché, il est donc inutilisable.

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

WebRTC

Safari 11 sur iOS11 offre une capture multimédia de WebRTC, ce qui est excellent.

Nous pouvons capturer une image de caméra sur un canevas sur une page Web normale sur un ordinateur de bureau ou sur un mobile à l’aide de navigator.mediaDevices.getUserMedia selon le code exemple 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;


Bonnes nouvelles! La caméra semble enfin être accessible depuis une application Web d'écran d'accueil dans la première version bêta d'iOS 11.3.

J'ai fait un repo avec quelques fichiers, ce qui montre que cela fonctionne:

https://github.com/joachimboggild/uploadtest

Étapes pour tester:

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

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

Je dois ajouter que j'utilise un champ simple, pas getUserMedia ou quelque chose de ce genre. Je ne sais pas si ça marche.


Nous avons un problème assez similaire. Jusqu'à présent, la seule solution de contournement que nous ayons pu faire est de supprimer la balise méta pour qu'elle soit "compatible Apple-Mobile-Web-App" et aux utilisateurs de l'ouvrir dans Safari, où tout semble fonctionner normalement.


Mise à jour : alors que certains journaux de modifications et publications publiés m'avaient laissé penser que les applications Web utilisant un manifest.json au lieu de apple-mobile-web-app-capable auraient enfin accès à une implémentation correcte de WebRTC, ce n'est malheureusement pas le cas, car d'autres ici ont souligné et les tests ont confirmé. Visage triste. Désolé pour les inconvénients causés par cela et espérons qu'un jour de chance dans une galaxie très lointaine, Apple nous donnera enfin l'accès à la caméra dans des vues optimisées par WebKit (non-Safari) ...

Oui, comme d'autres l'ont déjà mentionné, getUserMedia n'est disponible directement que dans Safari, mais ni dans UIWebView ni dans WKWebView. Par conséquent, vos seuls choix sont les suivants:

  • supprimer <meta name="apple-mobile-web-app-capable" content="yes"> afin que votre application s'exécute dans un onglet Safari normal, où getuserMedia est accessible
  • en utilisant un framework tel qu'Apache Cordova qui vous permet d'accéder à la caméra d'un périphérique de différentes manières.

En espérant qu'Apple lève cette restriction WebRTC plutôt tôt que tard ...

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







ios11