Instascan: IOS11 - Compatibilité Web RTC

Prime de 500 $ Je ne parviens pas à résoudre ce problème. Peut-être qu'une prime de 500 $ encouragerait quelqu'un qui est plus capable que moi à résoudre ce problème. Je pense que IOS11 Beta prend désormais en charge webRTC getUserMedia() . Vous pouvez voir une démo fonctionnelle (uniquement si vous avez installé iOS11 beta :-) --> https://tokbox.com/developer/sdks/js/ --> https://tokbox.com/developer/beta/safari /

Cette prime est toujours valable - et je l'honorerai.
nous avons l'intention d'utiliser instascan dans notre projet, mais avons besoin d'un soutien (pour lequel nous sommes prêts à payer)
y a-t-il quelqu'un qui peut
[1] résoudre le problème
[2] contribuer au code open source du projet instascan
[3] et gagnez un peu d'argent pour vos efforts

+1

@ddwyer Nous avons

Voici ce que j'ai fait pour obtenir une nouvelle version de notre application :

git clone [email protected]:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

La sélection d'une caméra basée sur l'ID n'a pas fonctionné. Il a toujours utilisé la caméra frontale. Nous avons résolu ce problème en ajoutant un correctif moche à camera.js :

diff --git a/src/camera.js b/src/camera.js
index 5403b3c..4a46e32 100644
--- a/src/camera.js
+++ b/src/camera.js
@@ -31,6 +31,11 @@ class Camera {
       }
     };

+    var userAgent = window.navigator.userAgent;
+    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
+        constraints.video.facingMode = "environment";
+    }
+
     this._stream = await Camera._wrapErrors(async () => {
       return await navigator.mediaDevices.getUserMedia(constraints);
     });

Je ne créerais pas de RP pour ce changement car ce n'est pas une bonne solution. Mais ça marche, n'hésitez pas à l'utiliser dans vos projets.

Juste pour info, dans iOS11 bêta, l'élément <video /> besoin de l'attribut playsinline . Cela a semblé être un bug pendant un certain temps, mais maintenant que la version bêta est bientôt terminée, idk ...

https://github.com/serratus/quaggaJS/commit/e8352c7017a2f7a7500fa054f342b9689ff5d8b7#diff -afd7828cb7f3e7a1f8fe7305f50b5021

https://github.com/PaulKinlan/qrcode/commit/b79718b2391969b2291db93ba388b4c2b2f3f9d4

je peux confirmer que nous avons suivi les instructions de @inorbert et shazam .. comme par magie, tout fonctionne.
nous chercherons à améliorer ce que nous avons trouvé et à faire rapport.
- Darren

Ceci est corrigé dans schmich/instascan/pull/78. N'oubliez pas d'inclure manuellement les derniers webrtc-adapter dans votre projet.

@PallasKatze est un GURU javascript - tout fonctionne maintenant et devrait peut-être être testé et fusionné ? au cas où quelqu'un serait intéressé, la prime a été payée en totalité -- merci pour votre aide.

pourquoi je ne le travaille pas sur safari11
var userAgent = window.navigator.userAgent;

• if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
• contraintes.video.facingMode = "environment";
• }
  +
  this._stream = wait Camera._wrapErrors(async () => {
  return wait navigator.mediaDevices.getUserMedia(contraintes);
  });

Voici une version qui fonctionne compilée à partir de https://github.com/centogram/instascan
instascan.zip

@centogram est-il possible pour moi d'utiliser la caméra frontale avec votre code ios11 ? Merci :)

@pandalion oui, mais vous devrez modifier le code. Vous voudrez simplement changer la contrainte contraintes.video.facingMode de "environment" à "user".

@centogram fonctionne comme un charme. Félicitations !

@centogramme @hrrsppzgl
quelle ligne je dois la modifier ?

@centogramme @hrrsppzgl
quelle ligne je dois la modifier ?

@adelsadek1
De quoi avez-vous vraiment besoin ? Avez-vous téléchargé le code modifié de @centogram à partir d'ici ?
https://github.com/centogram/instascan

@hrrsppzgl oui j'ai mais ne fonctionne toujours pas @centogram mentionné pour modifier la ligne mais je n'ai pas quelle ligne je dois modifier

@hrrsppzgl oui j'ai mais ne fonctionne toujours pas @centogram mentionné pour modifier la ligne mais je n'ai pas quelle ligne je dois modifier

Rechercher
faceMode : { exact : "environment" },
Remplacez "environnement" par "utilisateur"

Salut @lnorbert

J'ai essayé de suivre tes pas,

git clone [email protected]:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

Mais lorsque vous essayez le premier cmd, il renvoie l'erreur ci-dessous

S'il vous plaît, pouvez-vous m'aider ici?

Merci