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

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;

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.

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.

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.

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

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

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!