Comment accéder à la caméra sur l'application Web de l'écran d'accueil iOS11?


131

Résumé

Nous ne pouvons pas accéder à la caméra à partir d'une application Web d'écran d'accueil 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 s'il vous plaît?

Nous servons la page de l'application Web sur 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 d'entrée de fichier fonctionne à nouveau!

Mise à jour, mars

Comme les gens l'ont dit ici, les documents Apple indiquent que la fonction de caméra de l'application Web revient dans la version 11.3 avec les techniciens de service. C'est bien mais nous ne savons pas encore si nous voulons que tout le monde réinstalle à nouveau jusqu'à ce que nous puissions tester en profondeur sur 11.3GM.

Solution, novembre

Nous avons perdu espoir qu'Apple veuille résoudre ce problème et est allé de l'avant. 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 précédente de l'écran d'accueil.

Mise à jour, 6 décembre

iOS 11.2 et iOS 11.1.2 ne corrigent pas.

Solutions de contournement, 21 septembre

Il semble que nous pourrions 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
  • attendez la prochaine version bêta d'ios
  • réinstaller en tant que page Safari dans le navigateur (après avoir supprimé la logique ATHS)
  • passer à Android

Entrée de fichier

Notre code de production actuel utilise une entrée de fichier qui fonctionne bien depuis des années avec iOS 10 et les versions antérieures. Sur iOS11, cela fonctionne comme un onglet Safari mais pas depuis l'application de l'écran d'accueil. Dans ce dernier cas, l'appareil photo est ouvert 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 la capture multimédia WebRTC, ce qui est excellent.

Nous pouvons capturer une image de caméra sur un canevas sur une page Web normale sur ordinateur de bureau et mobile à l'aide de navigator.mediaDevices.getUserMedia selon l'exemple de code lié ici .

Lorsque nous ajoutons la page à l'écran d'accueil de l'iPad ou de l'iPhone, elle navigator.mediaDevicesdevient undefinedinutilisable.

    <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
J'espère qu'ils vont le réparer, mais cela peut être un autre exemple d'Apple poussant des développeurs dans leur magasin d'applications en dégradant l'UX de Safari.
perfect_element

3
J'essaie d'apprendre le développement progressif d'applications Web et lors du test d'une application sur Android et iOS, j'ai également rencontré ce problème. La navigation vers l'application dans un navigateur fonctionne bien, mais une fois que j'enregistre sur l'écran d'accueil de Safari et que j'essaye de l'utiliser comme une application, j'obtiens un écran noir lorsque j'essaye d'accéder à la caméra.
tutley

2
iOS: 11.2.1 - Le problème persiste ...
aLiEnHeAd

2
iOS: 11.2.2 - Le problème persiste ...
MrRobot

3
iOS 11.4.1 ne semble pas fonctionner pour moi.
Amah

Réponses:


25

Nous avons un problème assez similaire. Jusqu'à présent, la seule solution de contournement que nous avons pu faire est de supprimer la balise Meta pour qu'elle soit «compatible apple-mobile-web-app» et de permettre aux utilisateurs de l'ouvrir dans Safari, où tout semble fonctionner normalement.


24

Mise à jour : Alors que certains journaux de modifications et publications publiés précédemment m'ont amené à croire que les applications Web utilisant un manifest.jsonau lieu de apple-mobile-web-app-capableauraient finalement accès à une implémentation WebRTC appropriée, malheureusement, ce n'est pas vrai, comme d'autres l'ont souligné et les tests l'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 lointaine, très lointaine Apple nous donnera enfin un accès à la caméra dans des vues alimentées par WebKit (non-Safari) ...

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

  • suppression <meta name="apple-mobile-web-app-capable" content="yes">pour que votre `` application '' s'exécute dans un onglet Safari normal, où getuserMedia est accessible
  • en utilisant un framework comme Apache Cordova qui vous permet d'accéder à la caméra d'un appareil par d'autres moyens.

Espérons qu'Apple supprime cette restriction WebRTC plutôt tôt que tard ...

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.


Votre mise à jour ne semble pas correcte. Dans iOS 11.3 Beta getUserMediaet webkitGetUserMediasont tous deux indéfinis lors de l'utilisation<meta name="apple-mobile-web-app-capable" content="yes">
ro-savage

@ ro-savage, la version finale est maintenant sortie, et nous ne pouvons toujours pas faire fonctionner cela
Owen

4
safari est le nouveau ie, s'il vous plaît apple, donnez-nous la permission d'accéder aux données des médias des utilisateurs
Pablo Cegarra

15

Bonnes nouvelles! L'appareil photo semble enfin 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, qui démontrent que cela fonctionne:

https://github.com/joachimboggild/uploadtest

Étapes à 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. La page Web est maintenant ouverte en plein écran, sans interface de navigation.
  5. Appuyez sur le bouton fichier pour sélectionner une image de l'appareil photo.

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 autre. Je ne sais pas si cela fonctionne.


Comment avez-vous réussi à le faire fonctionner avec <meta name = "apple-mobile-web-app-capable" content = "yes">?
Alexander

1
J'ai utilisé un formulaire normal avec une balise d'entrée, et cela a fonctionné.
Joachim Bøggild

@ JoachimBøggild Êtes-vous sûr que les appareils iOS 11.3+ peuvent ouvrir la caméra à partir d'une PWA ?? Merci d'avoir donné une bonne nouvelle.
jegadeesh

Oui bien sûr. Je l'ai en cours d'exécution sur posmo.com. Je ne me souviens plus des paramètres. Ils incluent cependant un fichier manifeste.
Joachim Bøggild

1
@ JoachimBøggild pouvez-vous partager la balise manifest / VIDEO pour cela. J'ai testé mon code et cela ne fonctionne qu'en safari. pas dans l'application de l'écran d'accueil.
mai


1

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


1
J'ai ios 11.4 et cela ne fonctionnera pas sur une application d'écran d'accueil. Que faites-vous pour que ça marche?
Aron

Je n'ai fait aucun changement. Il suffit de mettre à jour la dernière version et cela a recommencé à fonctionner.
aalcutt

1
vérifié 11.4. fonctionne en safari - ne fonctionne pas comme application d'écran d'accueil
mai

Je suis sous iOS 11.4.1 sur iPad et cela fonctionne. Quel appareil utilisez-vous?
aalcutt

1
Une raison pour laquelle vous ne pouvez pas utiliser l'entrée de fichier? Cela fonctionne à nouveau.
aalcutt

0

Récemment, j'ai rencontré le même problème, la seule solution que j'ai trouvée était d'ouvrir l'application dans le navigateur au lieu du mode normal. Mais uniquement sur iOS!

L'astuce consistait à créer 2 fichiers manifest.json avec différentes configurations.

Le normal pour Android et un pour tout est Apple, manifest-ios.json, la seule différence sera sur la propriété d'affichage.

Étape 1: Ajoutez l'ID à la balise de lien du manifeste

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

Étape 2: Ajout de ce script au bas du corps:

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

Étape 3: dans le manifest-ios.json, définissez l'affichage sur navigateur

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

Un autre problème apparaît, comme l'ouverture de l'application plusieurs fois dans plusieurs onglets, parfois.

Mais j'espère que cela vous aidera les gars!

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.