Instascan: IOS11 - Compatibilidade com Web RTC

Recompensa de $ 500 Não consigo resolver esse problema. Talvez uma recompensa de $ 500 encoraje alguém mais capaz do que eu a resolver esse problema. Eu acredito que o IOS11 Beta agora suporta webRTC getUserMedia (). Você pode ver uma demonstração de trabalho (apenas se você tiver iOS11 beta instalado :-) -> https://tokbox.com/developer/sdks/js/ -> https://tokbox.com/developer/beta/safari /

Esta recompensa ainda é válida - e eu irei honrá-la.
pretendemos usar o instascan em nosso projeto, mas precisamos de algum suporte (pelo qual estamos dispostos a pagar)
há alguém que pode
[1] resolver o problema
[2] contribuir com código-fonte aberto para o projeto instascan
[3] e ganhe um pouco de dinheiro por seus esforços

+1

@ddwyer Implementamos o Instascan em nosso aplicativo recentemente. É uma ótima biblioteca e funcionou conforme o esperado. Não usamos a versão lançada, mas construímos uma nova do master.

Aqui está o que fiz para obter uma nova construção para nosso aplicativo:

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

Selecionar uma câmera com base no ID não funcionou. Sempre usou a câmera frontal. Resolvemos isso adicionando um patch feio ao 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);
     });

Eu não criaria um PR para essa mudança, pois não é uma boa solução. Mas funciona, fique à vontade para usá-lo em seus projetos.

Só para constar, no iOS11 beta, o elemento <video /> precisa do atributo playsinline . Pareceu ser um bug por um tempo, mas agora que está fora do beta em breve idk ...

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

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

posso confirmar que seguimos as instruções de @inorbert e shazam .. como mágica, está tudo funcionando.
procuraremos melhorar o que encontramos e relatar.
- Darren

Isso é corrigido em schmich / instascan / pull / 78. Não se esqueça de incluir manualmente os webrtc-adapter mais recentes em seu projeto.

@PallasKatze é um GURU javascript - tudo está funcionando agora e talvez deva ser testado e mesclado? caso alguém esteja interessado, a recompensa foi paga integralmente - obrigado pela sua ajuda.

por que eu não trabalho no safari 11
var userAgent = window.navigator.userAgent;

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

Aqui está uma versão que funciona compilada de https://github.com/centogram/instascan
instascan.zip

@centograma é possível usar a câmera frontal com seu código ios11? obrigado :)

@pandalion sim, mas você precisará modificar o código. Você só deseja alterar a restrição constraints.video.facingMode de "ambiente" para "usuário".

@centogram funciona como um encanto. Grats!

@centogram @hrrsppzgl
qual linha eu tenho que modificar isso?

@centogram @hrrsppzgl
qual linha eu tenho que modificar isso?

@ adelsadek1
O que você realmente precisa? Você baixou o código modificado do
https://github.com/centogram/instascan

@hrrsppzgl sim, mas ainda não estou funcionando mudei qual linha devo modificar

@hrrsppzgl sim, mas ainda não estou funcionando mudei qual linha devo modificar

Procurar
FaceMode: {exato: "ambiente"},
Altere "ambiente" para "usuário"

Oi @lnorbert

Tentei seguir seus passos,

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

Mas ao tentar o primeiro cmd, ele lança o erro abaixo

Por favor, você pode me ajudar aqui?

Obrigado