Instascan: IOS safari 11.4- Problème d'ouverture de la caméra arrière

Avez-vous accès à l'appareil Apple ? Savez-vous si la démo fonctionne ?

Il semble que cela ait eu un problème avec iOS Safari, mais j'ai lu que les gens ont pu surmonter ce problème en ajoutant des balises méta. Fouillez sur ce forum et vous verrez. Je travaille sur quelque chose de similaire, donc je suis intéressé. Ce qui me retient, c'est que je n'ai pas d'appareil facilement disponible.

J'essayais la démo sur un iPhone, cela n'a pas fonctionné.

Oui, j'y travaille, je n'arrive pas à le faire fonctionner. J'essaie de revenir en arrière et de relire les fils de discussion. J'ai fait fonctionner la caméra frontale en ajoutant le dernier adaptateur Web RTC et en ajoutant l'attribut _playsinline_ à la balise vidéo. Il peut lire les caméras mais ne fait rien lors du passage à la caméra arrière.

ajouté l'attribut intérieur de la balise vidéo et mentionné également la balise meta.

J'avais ajouté l'attribut playinline à l'intérieur de la balise vidéo et mentionné la balise meta également.

Quelqu'un avait en fait corrigé cela dans l'un des fils de discussion. J'essaye ça en ce moment mais je dois attendre que quelqu'un avec un iPhone vienne travailler.

Hé, j'ai réussi à faire fonctionner cela, mais il y a toujours le problème, malgré le choix des caméras, la valeur par défaut sera toujours la caméra arrière arrière. Donc, si vous avez besoin de choisir la caméra frontale, vous êtes foutu (mais sérieusement, qui va essayer de numériser avec la caméra frontale).

Voici ce que j'ai fait !

J'ai ajouté la balise meta.
<meta name="apple-mobile-web-app-capable" content="yes">

Ajout de cet attribut :
<video id="scanner" class="video-back" playsinline></video>

Ajout de ce fichier JS :
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Et puis emballé ceci pour publier: https://github.com/JoseCDB/instascan/tree/ios-rear-camera. Je ne sais pas si vous savez utiliser Gulp avec node.js mais c'est facile. Je l'ai appris en 15 minutes ! J'utilise cette version personnelle d'Instascan. Il connaissait le problème et a pu le résoudre. J'espère que cela t'aides. Bonne chance.

J'ai utilisé une balise meta, une balise vidéo et adapter-latest.js.
Et j'utilise instscan.min.js et je ne sais pas comment utiliser le ".js - scanner.js - camara.js" séparément.

J'ai utilisé une balise meta, une balise vidéo et adapter-latest.js.
Et j'utilise instscan.min.js et je ne sais pas comment utiliser le ".js - scanner.js - camara.js" séparément.

Vous êtes censé avoir installé node.js. Il existe une invite de commande qui regroupe tous ces fichiers, la sortie finale serait ce fichier JS minifié de l'instascanner.

C'est un excellent produit et il a été vraiment utile, alors merci de l'avoir rendu merveilleux. Voici le problème avec cet instascan de mes recherches:

• La classe Camera lors de l'appel de getCameras renvoie une collection d'objets Camera créés à partir des objets MediaDeviceInfo collectés via un appel à navigator.mediaDevices.enumerateDevices(). Ce ne sont PAS des objets id _ et _ name _ et rien de plus. Ils sont utilisés pour créer un tableau d'objets Camera.

Lorsque vous appelez _scanner.start(camera)_, vous transmettez un objet Camera qui appellera la méthode _camera.start()_ sur la caméra.

• La méthode _camera.start()_ appelle PUIS le _navigator.mediaDevices.getUserMedia(contraints)_, qui renvoie un tableau d' objets
• _scanner.start()_ appelle _scanner._enableScan(camera)_ en lui donnant le premier objet MediaStream renvoyé par l'appel ci-dessus à huis clos. Il définit le

                  **This Part Is the Disconnect and what is messing it all up!**

Le problème de la contrainte :

L'objet Camera transmis utilise son identifiant dans les contraintes comme _"obligatoire"_ pour la recherche des appareils. S'il n'est pas trouvé, aucune vidéo ne s'affichera. D'autres contraintes "obligatoires" sont également définies.

Les différents appareils NE SUPPORTENT PAS les contraintes utilisées !
Exécutez ce lien sur l'appareil que vous souhaitez utiliser et il vous indiquera quelles contraintes il prend en charge :
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Exécutez ce lien sur l'appareil que vous souhaitez utiliser et saisissez une contrainte. Il vous dira s'il est pris en charge :
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Contraintes prises en charge par Ipad/Iphone/IOS :

aspectRatio, faceMode, _deviceId * _ , hauteur, largeur, aspectRatio et autres.

_Quand j'ai testé cela, _deviceId sera ignoré en tant que contrainte._ Essayez ceci dans le lien ci-dessus pour les contraintes et vous verrez qu'il définit le deviceId = "". Lorsque je l'ai saisi en javascript et l'ai affiché, l'iphone a toujours renvoyé un deviceId vide.

Donc, pour saisir la caméra arrière sur l'Iphone, vous devez utiliser le mode face et NE PAS utiliser l'identifiant de l'appareil.

Contraintes prises en charge par Android :

deviceId, _facingMode * _, aspectRatio, hauteur, largeur et bien d'autres.

J'ai testé cela sur une tablette Samsung et un téléphone Android. Le mode face par défaut est la caméra frontale « utilisateur ». J'ai expérimenté ce code et j'ai découvert que, pour une raison encore découverte, le faceMode pour Android ne fonctionne pas. Pourtant, cela fonctionne dans le lien ci-dessus. Je vais continuer à enquêter sur cette partie et éventuellement corriger ce code pour qu'il fonctionne correctement avec faceMode et Android.

* * RÉPONSE AU PROBLÈME ANDROID * * *
La version Gulp de ce projet inclut la version ^1.4.0 de l'adaptateur webrtc qui perturbe le mode face sur Android Chrome. En parcourant le code, il a en fait supprimé le mode face.

• Pour corriger dans ce projet - dans _index.js_, supprimez la ligne 2 require('webrtc-adapter'); Ensuite, suivez les procédures de construction ci-dessous. Lorsque j'ai testé sur une tablette et 4 téléphones Android différents sur Chrome, tout a fonctionné à nouveau pour saisir la caméra arrière.

Pour saisir la caméra arrière sur Android avec ce code instascan, vous pouvez utiliser le deviceId.
Assurez-vous que deviceId est une contrainte _video_ comme

video: {
  devideId: this.id
}

Code de contrainte de la caméra :

Voici le Code du projet qui définit les contraintes et récupère les objets MediaStream
La raison pour laquelle ce code ne fonctionne pas correctement est que sourceId de la _contrainte vidéo_ n'est pas pris en charge pour _Android_ ou _Iphone_. Cela doit être changé en deviceId . De plus, tous les éléments obligatoires doivent disparaître s'ils ne correspondent pas à ce que votre appareil gère.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

Comment modifier InstaScan et le minifier :

pour obtenir cela et le changer, j'ai utilisé VSCode.
1) Installez Node.js et vsCode.
2) sur un terminal dans le répertoire que vous souhaitez télécharger, exécutez :
git clone https://github.com/JoseCDB/instascan.git

3) au terminal cd vers le répertoire instascan :
cd instascan

4) modifiez le javascript et exécutez gulp pour libérer le code :
gulp release

5) Cela vous donnera un nouvel élément instascan.min.js minifié dans le dossier _dist_.

J'espère résoudre ce problème Android ce week-end. J'espère que cela vous donnera suffisamment de perspicacité pour vos futurs projets avec cette bibliothèque géniale.

Bonjour, cela devrait bien fonctionner.
Tout d'abord, ajoutez adapter.js à partir de https://github.com/webrtc/adapter.

Après cela, clonez ceci :
git clone https://github.com/quocthai95/instascan.git
Courir:
npm i
installer le nécessaire

Utilisez gulp pour publier le code final :
gulp release

J'ai vérifié sur Iphone 6 plus (iOS 11.4) et Iphone 8 plus (iOS 11.3) et cela a bien fonctionné. Vous pouvez changer de caméra normalement.

J'espère que vous pourrez résoudre votre problème.

Bonjour, cela devrait bien fonctionner.
Tout d'abord, ajoutez adapter.js à partir de https://github.com/webrtc/adapter.

Après cela, clonez ceci :
git clone https://github.com/quocthai95/instascan.git
Courir:
npm i
installer le nécessaire

Utilisez gulp pour publier le code final :
gulp release

J'ai vérifié sur Iphone 6 plus (iOS 11.4) et Iphone 8 plus (iOS 11.3) et cela a bien fonctionné. Vous pouvez changer de caméra normalement.

J'espère que vous pourrez résoudre votre problème.

Lors de l'installation des éléments nécessaires, j'obtiens "12 vulnérabilités (1 faible, 5 modérée, 6 élevée)".
Certaines commandes "$ npm install --save-dev [package-name]" semblent résoudre ces vulnérabilités, mais je ne peux pas les construire en raison de l'exception suivante :

$ gulp release assert.js:351 throw err; ^ AssertionError [ERR_ASSERTION] : la fonction de tâche doit être spécifiée dans Gulp.set [as _setTask] (C:\Users\John\Downloads\instascan-ios-rear-camera\instascan-ios-rear-camera\node_modules\undertaker\lib \set-task.js:10:3)

Comment puis-je continuer à partir d'ici, j'aimerais vraiment essayer cette version. Cela fonctionne si bien avec mon téléphone Android?

/John

Salut @johnatitide ,
Avez-vous installé la dernière version de gulp (4.0.0) ? Si c'est le cas, essayez de le restreindre à 3.9.1. POUR VOTRE INFORMATION:
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
Ou pouvez-vous fournir les commandes que vous avez utilisées pour le construire.

Salut @quocthai95

La construction fonctionne avec les commandes suivantes :
git clone https://github.com/quocthai95/instascan.git
npm installer [email protected]
npm je
libération d'une gorgée

Je peux maintenant changer de caméra dans Safari sur iPad et iPhone. Joli.

Y a-t-il une chance que les correctifs de contraintes soient fusionnés dans le référentiel de schmich?

Y a-t-il une chance que les correctifs de contraintes soient fusionnés dans le référentiel de schmich?

J'ai créé une nouvelle demande de tirage. Attendez d'accepter ^^

@quocthai95 salut, j'ai suivi vos étapes depuis https://github.com/schmich/instascan/issues/182#issuecomment -447198290.

Je me demandais, je reçois la caméra frontale par défaut sur mon chrome Android. vous vous demandez comment puis-je définir la caméra arrière par défaut ? as-tu un exemple de code ?

@fariskas ,
Utilisez regexp pour tester s'il correspond à /back/ puis démarrez-le, afin que vous puissiez avoir la caméra arrière par défaut.

`Instascan.Camera.getCameras().then(fonction (caméras) {
if(caméras[0].nom.match(/back/i)){
scanner.start(caméras[0]);
} else if(cameras[1].name.match(/back/i)){
scanner.start(caméras[1]);
}
}

Cela peut être utile : j'utilise une boucle for pour trouver "back" dans cameras[i].name mais j'ai échoué et je n'ai pas pu sélectionner la caméra arrière sur iPad jusqu'à ce que j'écrive cameras[i].name à console.log et j'ai découvert que je devais chercher "achterzijde" (qui est "back" en néerlandais).
Donc, si vous ne réussissez pas à sélectionner la caméra arrière dans iOS, essayez de traduire "arrière" ou écrivez cameras[i].name à console.log pour savoir quel est le nom de la caméra arrière.

Je peux confirmer que la démo ne fonctionne qu'avec la caméra frontale. C'est avec Safari sur iOS 12.2

Quelqu'un a-t-il compris comment utiliser la caméra arrière avec Safari sur iOS 12+ ?

Quelqu'un a-t-il compris comment utiliser la caméra arrière avec Safari sur iOS 12+ ?

J'utilise une version modifiée de cette bibliothèque depuis environ 7 mois maintenant sur plus de 30 types de téléphones et tablettes iOS et Android. Regardez les commentaires que j'ai laissés ci-dessus à propos d'une version modifiée pour obtenir n'importe quel appareil photo du système d'exploitation avec lequel vous travaillez. Les commentaires continuent de parler de l'ajout du webrtc après, ce que j'ai trouvé être tout le problème de cette bibliothèque.

J'ai complètement supprimé webrtc du projet et je l'ai recompilé. webrtc n'est plus nécessaire avec ce code lorsqu'il est transpilé en es5 ou supérieur. L'utilisation de webrtc dans la bibliothèque et son codage n'ont pas permis de récupérer la bonne caméra.

J'ai inclus les fichiers js réguliers et minifiés corrigés et transpilés que j'utilise depuis un certain temps maintenant. Je l'utilise pour la fréquentation scolaire avec des QrCodes sur tous les téléphones des étudiants et des enseignants, qui ont été environ 30+ modèles à ce stade. Il peut saisir n'importe quel appareil photo.

J'espère que ça aide.

Code de la caméra arrière
```
scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
.then(handleSuccess)
.catch(handleError);
// Lancer l'analyse
scanner.addListener('scan', foundCode);

            Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    scanner.start(cameras[0]);
                }
                else {
           ...        
                }
            }).catch (function (e) {
             ...  
            });

```
instascan.min.zip

https://github.com/schmich/instascan/issues/182#issuecomment -443388022

C'est un excellent produit et il a été vraiment utile, alors merci de l'avoir rendu merveilleux. Voici le problème avec cet instascan de mes recherches:

• La classe Camera lors de l'appel de getCameras renvoie une collection d'objets Camera créés à partir des objets MediaDeviceInfo collectés via un appel à navigator.mediaDevices.enumerateDevices(). Ce ne sont PAS des objets id _ et _ name _ et rien de plus. Ils sont utilisés pour créer un tableau d'objets Camera.

Lorsque vous appelez _scanner.start(camera)_, vous transmettez un objet Camera qui appellera la méthode _camera.start()_ sur la caméra.

• La méthode _camera.start()_ appelle PUIS le _navigator.mediaDevices.getUserMedia(contraints)_, qui renvoie un tableau d' objets
• _scanner.start()_ appelle _scanner._enableScan(camera)_ en lui donnant le premier objet MediaStream renvoyé par l'appel ci-dessus à huis clos. Il définit l'élément src sur cet objet de flux multimédia.
  **This Part Is the Disconnect and what is messing it all up!**

Le problème de la contrainte :

L'objet Camera transmis utilise son identifiant dans les contraintes comme _"obligatoire"_ pour la recherche des appareils. S'il n'est pas trouvé, aucune vidéo ne s'affichera. D'autres contraintes "obligatoires" sont également définies.

Les différents appareils NE SUPPORTENT PAS les contraintes utilisées !
Exécutez ce lien sur l'appareil que vous souhaitez utiliser et il vous indiquera quelles contraintes il prend en charge :
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Exécutez ce lien sur l'appareil que vous souhaitez utiliser et saisissez une contrainte. Il vous dira s'il est pris en charge :
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Contraintes prises en charge par Ipad/Iphone/IOS :

aspectRatio, faceMode, _deviceId * _ , hauteur, largeur, aspectRatio et autres.

_Quand j'ai testé cela, _deviceId sera ignoré en tant que contrainte._ Essayez ceci dans le lien ci-dessus pour les contraintes et vous verrez qu'il définit le deviceId = "". Lorsque je l'ai saisi en javascript et l'ai affiché, l'iphone a toujours renvoyé un deviceId vide.

Donc, pour saisir la caméra arrière sur l'Iphone, vous devez utiliser le mode face et NE PAS utiliser l'identifiant de l'appareil.

Contraintes prises en charge par Android :

deviceId, _facingMode * _, aspectRatio, hauteur, largeur et bien d'autres.

J'ai testé cela sur une tablette Samsung et un téléphone Android. Le mode face par défaut est la caméra frontale « utilisateur ». J'ai expérimenté ce code et j'ai découvert que, pour une raison encore découverte, le faceMode pour Android ne fonctionne pas. Pourtant, cela fonctionne dans le lien ci-dessus. Je vais continuer à enquêter sur cette partie et éventuellement corriger ce code pour qu'il fonctionne correctement avec faceMode et Android.

* _ * RÉPONSE AU PROBLÈME ANDROID * _ **
La version Gulp de ce projet inclut la version ^1.4.0 de l'adaptateur webrtc qui perturbe le mode face sur Android Chrome. En parcourant le code, il a en fait supprimé le mode face.

• Pour corriger dans ce projet - dans _index.js_, supprimez la ligne 2 require('webrtc-adapter'); Ensuite, suivez les procédures de construction ci-dessous. Lorsque j'ai testé sur une tablette et 4 téléphones Android différents sur Chrome, tout a fonctionné à nouveau pour saisir la caméra arrière.

Pour saisir la caméra arrière sur Android avec ce code instascan, vous pouvez utiliser le deviceId.
Assurez-vous que deviceId est une contrainte _video_ comme

video: {
  devideId: this.id
}

Code de contrainte de la caméra :

Voici le Code du projet qui définit les contraintes et récupère les objets MediaStream
La raison pour laquelle ce code ne fonctionne pas correctement est que sourceId de la _contrainte vidéo_ n'est pas pris en charge pour _Android_ ou _Iphone_. Cela doit être changé en deviceId . De plus, tous les éléments obligatoires doivent disparaître s'ils ne correspondent pas à ce que votre appareil gère.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

Comment modifier InstaScan et le minifier :

pour obtenir cela et le changer, j'ai utilisé VSCode.

1. Installez Node.js et vsCode.
2. sur un terminal dans le répertoire que vous souhaitez télécharger, exécutez :
   git clone https://github.com/JoseCDB/instascan.git
3. au terminal cd vers le répertoire instascan :
   cd instascan
4. changez le javascript et exécutez gulp pour libérer le code :
   gulp release
5. Cela vous donnera un nouvel élément instascan.min.js minifié dans le dossier _dist_.

J'espère résoudre ce problème Android ce week-end. J'espère que cela vous donnera suffisamment de perspicacité pour vos futurs projets avec cette bibliothèque géniale.

J'ai suivi les étapes ci-dessus, puis j'ai modifié le fichier
facingMode: { exact: "environment" },
Cela fonctionne pour moi. Merci @apchandler

Je suis heureux que vous ayez quelque chose à travailler pour vous! Merci @glorynguyen d' avoir également publié ce correctif !

Malheureusement ces solutions ne fonctionnent pas sur iOS 13. Il est simplement vide (même pas noir).
Lors du débogage à distance de Safari, aucune erreur ne s'affiche également dans la console.

Quelqu'un a-t-il compris comment utiliser la caméra arrière avec Safari sur iOS 12+ ?

J'utilise une version modifiée de cette bibliothèque depuis environ 7 mois maintenant sur plus de 30 types de téléphones et tablettes iOS et Android. Regardez les commentaires que j'ai laissés ci-dessus à propos d'une version modifiée pour obtenir n'importe quel appareil photo du système d'exploitation avec lequel vous travaillez. Les commentaires continuent de parler de l'ajout du webrtc après, ce que j'ai trouvé être tout le problème de cette bibliothèque.

J'ai complètement supprimé webrtc du projet et je l'ai recompilé. webrtc n'est plus nécessaire avec ce code lorsqu'il est transpilé en es5 ou supérieur. L'utilisation de webrtc dans la bibliothèque et son codage n'ont pas permis de récupérer la bonne caméra.

J'ai inclus les fichiers js réguliers et minifiés corrigés et transpilés que j'utilise depuis un certain temps maintenant. Je l'utilise pour la fréquentation scolaire avec des QrCodes sur tous les téléphones des étudiants et des enseignants, qui ont été environ 30+ modèles à ce stade. Il peut saisir n'importe quel appareil photo.

J'espère que ça aide.

Code de la caméra arrière

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (commentaire)

Cela résout mon problème, merci beaucoup.

Quel est le dernier correctif pour cela? J'en ai essayé quelques-uns dans le fil, mais il semble que je n'obtienne que la caméra frontale.
Je ne sais pas comment utiliser Gulp ou compiler des projets .js .git, je code principalement en C#/Asp.net Mvc, donc c'est un peu nouveau pour moi.
La solution d'apchandler me donne des erreurs. (Vidéo non définie)
Chargement en cours d'un instascan.min.js "fixe" pour les appareils Android et de sa version pour IOS, mais je n'arrive pas à le faire fonctionner.

Quel est le dernier correctif pour cela? J'en ai essayé quelques-uns dans le fil, mais il semble que je n'obtienne que la caméra frontale.
Je ne sais pas comment utiliser Gulp ou compiler des projets .js .git, je code principalement en C#/Asp.net Mvc, donc c'est un peu nouveau pour moi.
La solution d'apchandler me donne des erreurs. (Vidéo non définie)
Chargement en cours d'un instascan.min.js "fixe" pour les appareils Android et de sa version pour IOS, mais je n'arrive pas à le faire fonctionner.

L'élément vidéo html est-il présent ?
```

When you run instascan you need to speficy a video element like:

var self = ceci;
self.scanner = new Instascan.Scanner({ vidéo: document.getElementById('preview'), scanPeriod: 5 });
self.scanner.addListener('scan', fonction (contenu, image) {
self.scans.unshift({ date : +(Date.now()), contenu : contenu });
});
Instascan.Camera.getCameras().then(fonction (caméras) {
self.cameras = caméras ;
if (cameras.length > 0) {
self.activeCameraId = caméras[0].id;
self.scanner.start(caméras[0]);
} autre {
console.error('Aucune caméra trouvée.');
}
}).catch(fonction (e) {
console.error(e);
});
```

Ouais, je l'ai fait fonctionner avec :

<video class="player" style="max-width:100%" id="preview" playsinline></video>

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
</script>

Démarrage des caméras[0] pour les appareils Iphone/Ios. Et ceci pour Android :

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    var selectedCam = cameras[0];
                    $.each(cameras, (i, c) => {
                        if (c.name.indexOf('back') != -1) {
                            selectedCam = c;
                            return false;
                        }
                    });
                    scanner.start(selectedCam);
                }
                else {
                    console.error('No cameras found.');
                }
              });
</script>

On dirait que le problème était que je n'ai vérifié que si Request.UserAgent.Contains ("ios") et non "iphone", j'ai donc également exécuté le script Android pour l'Iphone.

C'est bon à savoir. Merci pour l'info.

@apchandler Bonjour, Savez-vous s'il existe un moyen de sélectionner la caméra arrière « principale » ?

J'ai un site Web où mes utilisateurs numériseront des QR CODES à l'aide d'instascan. Je développe le site Web et fais quelques tests. J'accède au site Web à l'aide de mon téléphone portable doté de 4 caméras arrière (HUAWEI P30 PRO).

J'ai essayé le $.each et avec la première caméra arrière sélectionnée, je ne peux rien numériser car la vision est si floue et avec beaucoup de zoom.

Mais si je sélectionne les caméras[2], je peux tout numériser.

Existe-t-il un moyen générique de sélectionner la caméra arrière « principale » ?

Je veux dire, mon application Web va être utilisée par tant d'utilisateurs avec différents téléphones portables, différents nombres d'appareils photo et l'ordre des appareils photo sera également différent.

Ou recommandez-vous de faire une sélection avec toutes les caméras, puis de laisser l'utilisateur choisir celle qui lui convient parfaitement ?

Merci

@apchandler Bonjour, Savez-vous s'il existe un moyen de sélectionner la caméra arrière « principale » ?

J'ai un site Web où mes utilisateurs numériseront des QR CODES à l'aide d'instascan. Je développe le site Web et fais quelques tests. J'accède au site Web à l'aide de mon téléphone portable doté de 4 caméras arrière (HUAWEI P30 PRO).

J'ai essayé le $.each et avec la première caméra arrière sélectionnée, je ne peux rien numériser car la vision est si floue et avec beaucoup de zoom.

Mais si je sélectionne les caméras[2], je peux tout numériser.

Existe-t-il un moyen générique de sélectionner la caméra arrière « principale » ?

Je veux dire, mon application Web va être utilisée par tant d'utilisateurs avec différents téléphones portables, différents nombres d'appareils photo et l'ordre des appareils photo sera également différent.

Ou recommandez-vous de faire une sélection avec toutes les caméras, puis de laisser l'utilisateur choisir celle qui lui convient parfaitement ?

Merci

Je suis désolé. Je ne connais aucune valeur qui spécifie comme caméra "principale" lorsque plusieurs sont présentes. Vous pouvez donner à la fonction de sélection de caméra l'objet critère spécifiant qu'il doit avoir au moins une certaine résolution et d'autres spécifications. Cela pourrait au moins vous donner une caméra de capacité minimale. Sinon, votre solution semble bonne pour la façon dont vous voulez l'aborder.

@apchandler Bonjour, Savez-vous s'il existe un moyen de sélectionner la caméra arrière « principale » ?
J'ai un site Web où mes utilisateurs numériseront des QR CODES à l'aide d'instascan. Je développe le site Web et fais quelques tests. J'accède au site Web à l'aide de mon téléphone portable doté de 4 caméras arrière (HUAWEI P30 PRO).
J'ai essayé le $.each et avec la première caméra arrière sélectionnée, je ne peux rien numériser car la vision est si floue et avec beaucoup de zoom.
Mais si je sélectionne les caméras[2], je peux tout numériser.
Existe-t-il un moyen générique de sélectionner la caméra arrière « principale » ?
Je veux dire, mon application Web va être utilisée par tant d'utilisateurs avec différents téléphones portables, différents nombres d'appareils photo et l'ordre des appareils photo sera également différent.
Ou recommandez-vous de faire une sélection avec toutes les caméras, puis de laisser l'utilisateur choisir celle qui lui convient parfaitement ?
Merci

Je suis désolé. Je ne connais aucune valeur qui spécifie comme caméra "principale" lorsque plusieurs sont présentes. Vous pouvez donner à la fonction de sélection de caméra l'objet critère spécifiant qu'il doit avoir au moins une certaine résolution et d'autres spécifications. Cela pourrait au moins vous donner une caméra de capacité minimale. Sinon, votre solution semble bonne pour la façon dont vous voulez l'aborder.

Merci beaucoup pour votre réponse ! Je vais essayer avec la résolution. Instascan peut renvoyer la résolution d'une caméraA ?

Selon les méthodes fournies par @glorynguyen et @apchandler.
Peut maintenant allumer la caméra arrière
Modifier instascan.min
Avant
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
Après
case 0:return i=(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream)?{audio:!1,video:{facingMode:{exact:"environment"},mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}:{audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}

Quelqu'un a-t-il compris comment utiliser la caméra arrière avec Safari sur iOS 12+ ?

J'utilise une version modifiée de cette bibliothèque depuis environ 7 mois maintenant sur plus de 30 types de téléphones et tablettes iOS et Android. Regardez les commentaires que j'ai laissés ci-dessus à propos d'une version modifiée pour obtenir n'importe quel appareil photo du système d'exploitation avec lequel vous travaillez. Les commentaires continuent de parler de l'ajout du webrtc après, ce que j'ai trouvé être tout le problème de cette bibliothèque.

J'ai complètement supprimé webrtc du projet et je l'ai recompilé. webrtc n'est plus nécessaire avec ce code lorsqu'il est transpilé en es5 ou supérieur. L'utilisation de webrtc dans la bibliothèque et son codage n'ont pas permis de récupérer la bonne caméra.

J'ai inclus les fichiers js réguliers et minifiés corrigés et transpilés que j'utilise depuis un certain temps maintenant. Je l'utilise pour la fréquentation scolaire avec des QrCodes sur tous les téléphones des étudiants et des enseignants, qui ont été environ 30+ modèles à ce stade. Il peut saisir n'importe quel appareil photo.

J'espère que ça aide.

Code de la caméra arrière

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (commentaire)

Vous, monsieur, venez de sauver le travail d'un développeur junior, vous êtes devenu un fan à vie.

Merci. J'étais exactement là où tu étais quand j'ai vu ce code. J'avais un délai et j'avais besoin de caméras de 30 types différents. Je suis content qu'ils aient écrit ça.

Fonctionne depuis 15 mois maintenant avec 45 modèles de téléphones différents et un seul problème sur un téléphone Samsung qui a été corrigé lorsque Samsung l'a corrigé. C'était donc une erreur Samsung WebKit.

Salut,
Je suis également confronté à un problème de caméra arrière avec IOS comme toute autre personne. Ma caméra arrière ne s'ouvre pas sur l'iPhone, la caméra frontale par défaut est en cours d'exécution. S'il vous plaît aidez-moi si quelqu'un a résolu ce problème avec la version mise à jour (13.xx. xx) de safari.

Quelqu'un a-t-il compris comment utiliser la caméra arrière avec Safari sur iOS 12+ ?

J'utilise une version modifiée de cette bibliothèque depuis environ 7 mois maintenant sur plus de 30 types de téléphones et tablettes iOS et Android. Regardez les commentaires que j'ai laissés ci-dessus à propos d'une version modifiée pour obtenir n'importe quel appareil photo du système d'exploitation avec lequel vous travaillez. Les commentaires continuent de parler de l'ajout du webrtc après, ce que j'ai trouvé être tout le problème de cette bibliothèque.

J'ai complètement supprimé webrtc du projet et je l'ai recompilé. webrtc n'est plus nécessaire avec ce code lorsqu'il est transpilé en es5 ou supérieur. L'utilisation de webrtc dans la bibliothèque et son codage n'ont pas permis de récupérer la bonne caméra.

J'ai inclus les fichiers js réguliers et minifiés corrigés et transpilés que j'utilise depuis un certain temps maintenant. Je l'utilise pour la fréquentation scolaire avec des QrCodes sur tous les téléphones des étudiants et des enseignants, qui ont été environ 30+ modèles à ce stade. Il peut saisir n'importe quel appareil photo.

J'espère que ça aide.

Code de la caméra arrière

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (commentaire)

a fonctionné comme un charme sur Android et iOS ! Je viens de télécharger la branche principale d'Instascan d'origine, de mettre vos fichiers dans le dossier "dist", et le tour est joué ! Merci beaucoup monsieur !

a fonctionné comme un charme sur Android et iOS ! Je viens de télécharger la branche principale d'Instascan d'origine, de mettre vos fichiers dans le dossier "dist", et le tour est joué ! Merci beaucoup monsieur !

@antworks-hub avez-vous utilisé l'intégralité du code de la branche ou le js minifié ?
d'où as-tu obtenu le dossier "dist" ?

a fonctionné comme un charme sur Android et iOS ! Je viens de télécharger la branche principale d'Instascan d'origine, de mettre vos fichiers dans le dossier "dist", et le tour est joué ! Merci beaucoup monsieur !

@antworks-hub avez-vous utilisé l'intégralité du code de la branche ou le js minifié ?
d'où as-tu obtenu le dossier "dist" ?

@ Sandi2211 Je suppose que j'ai créé un dossier "dist" à la racine de la branche principale instascan d'origine et mis le contenu du fichier instasca, min.zip dans ce dossier.

Quelqu'un a-t-il compris comment utiliser la caméra arrière avec Safari sur iOS 12+ ?

J'utilise une version modifiée de cette bibliothèque depuis environ 7 mois maintenant sur plus de 30 types de téléphones et tablettes iOS et Android. Regardez les commentaires que j'ai laissés ci-dessus à propos d'une version modifiée pour obtenir n'importe quel appareil photo du système d'exploitation avec lequel vous travaillez. Les commentaires continuent de parler de l'ajout du webrtc après, ce que j'ai trouvé être tout le problème de cette bibliothèque.
J'ai complètement supprimé webrtc du projet et je l'ai recompilé. webrtc n'est plus nécessaire avec ce code lorsqu'il est transpilé en es5 ou supérieur. L'utilisation de webrtc dans la bibliothèque et son codage n'ont pas permis de récupérer la bonne caméra.
J'ai inclus les fichiers js réguliers et minifiés corrigés et transpilés que j'utilise depuis un certain temps maintenant. Je l'utilise pour la fréquentation scolaire avec des QrCodes sur tous les téléphones des étudiants et des enseignants, qui ont été environ 30+ modèles à ce stade. Il peut saisir n'importe quel appareil photo.
J'espère que ça aide.
Code de la caméra arrière

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip
#182 (commentaire)

Cela résout mon problème, merci beaucoup.

Merci mec, mon travail fonctionne bien, ajoutez simplement votre nouveau js.

Aucun problème. Je suis content que tout cela fonctionne encore ici.

Quelqu'un a-t-il compris comment utiliser la caméra arrière avec Safari sur iOS 12+ ?

J'utilise une version modifiée de cette bibliothèque depuis environ 7 mois maintenant sur plus de 30 types de téléphones et tablettes iOS et Android. Regardez les commentaires que j'ai laissés ci-dessus à propos d'une version modifiée pour obtenir n'importe quel appareil photo du système d'exploitation avec lequel vous travaillez. Les commentaires continuent de parler de l'ajout du webrtc après, ce que j'ai trouvé être tout le problème de cette bibliothèque.

J'ai complètement supprimé webrtc du projet et je l'ai recompilé. webrtc n'est plus nécessaire avec ce code lorsqu'il est transpilé en es5 ou supérieur. L'utilisation de webrtc dans la bibliothèque et son codage n'ont pas permis de récupérer la bonne caméra.

J'ai inclus les fichiers js réguliers et minifiés corrigés et transpilés que j'utilise depuis un certain temps maintenant. Je l'utilise pour la fréquentation scolaire avec des QrCodes sur tous les téléphones des étudiants et des enseignants, qui ont été environ 30+ modèles à ce stade. Il peut saisir n'importe quel appareil photo.

J'espère que ça aide.

Code de la caméra arrière

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (commentaire)

Merci, @apchandler11 ! Vous avez sauvé mon travail. dieu dms !