Instascan: IOS11: compatibilidad con Web RTC

Recompensa de $ 500 No puedo resolver este problema Quizás una recompensa de $ 500 alentaría a alguien que es más capaz que yo a resolver este problema. Creo que IOS11 Beta ahora es compatible con webRTC getUserMedia (). Puede ver una demostración en funcionamiento (solo si tiene instalada la versión beta de iOS11 :-) -> https://tokbox.com/developer/sdks/js/ -> https://tokbox.com/developer/beta/safari /

Esta recompensa sigue siendo válida, y la respetaré.
tenemos la intención de utilizar instascan en nuestro proyecto, pero necesitamos algo de apoyo (que estamos dispuestos a pagar)
hay alguien que pueda
[1] resuelve el problema
[2] contribuir con código fuente abierto al proyecto instascan
[3] y gana un poco de dinero por tus esfuerzos

+1

@ddwyer Implementamos Instascan en nuestra aplicación recientemente. Es una gran biblioteca y funcionó como se esperaba. No usamos la versión publicada, pero construimos una nueva a partir de master.

Esto es lo que hice para obtener una nueva compilación de nuestra aplicación:

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 selección de una cámara basada en la identificación no funcionó. Siempre usó la cámara frontal. Resolvimos esto agregando un parche feo a 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);
     });

No crearía un PR para este cambio, ya que no es una buena solución. Pero funciona, siéntete libre de usarlo en tus proyectos.

Solo para tu información, en iOS11 beta, el elemento <video /> necesita el atributo playsinline . Pareció ser un error por un tiempo, pero ahora que está fuera de la versión beta pronto idk ...

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

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

Puedo confirmar que seguimos las instrucciones de @inorbert y shazam ... como por arte de magia, todo está funcionando.
buscaremos mejorar lo que hemos encontrado e informaremos.
- Darren

Esto se corrige en schmich / instascan / pull / 78. No olvide incluir manualmente el último webrtc-adapter en su proyecto.

@PallasKatze es un GURU de javascript: todo esto está funcionando ahora y tal vez debería probarse y fusionarse. en caso de que alguien esté interesado, la recompensa se pagó en su totalidad, gracias por su ayuda.

por qué no lo trabajo en safari11
var userAgent = window.navigator.userAgent;

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

Aquí hay una versión que funciona compilada de https://github.com/centogram/instascan
instascan.zip

@centogram ¿puedo usar la cámara frontal con su código ios11? Gracias :)

@pandalion sí, pero deberá modificar el código. Solo querrá cambiar la restricción constraints.video.facingMode de "entorno" a "usuario".

@centogram funciona a las

@centograma @hrrsppzgl
que linea tengo para modificarlo?

@centograma @hrrsppzgl
que linea tengo para modificarlo?

@ adelsadek1
¿Qué es lo que realmente necesitas? ¿Ha descargado el código modificado de @centogram desde aquí?
https://github.com/centogram/instascan

@hrrsppzgl sí, pero todavía no funciona @centogram mencionado para modificar la línea, pero no sabía qué línea tengo que modificar

@hrrsppzgl sí, pero todavía no funciona @centogram mencionado para modificar la línea, pero no sabía qué línea tengo que modificar

Buscar
FaceMode: {exact: "environment"},
Cambiar "entorno" a "usuario"

Hola @lnorbert

Traté de seguir tus pasos

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

Pero cuando prueba el primer cmd, arroja el siguiente error

Por favor, ¿puedes ayudarme aquí?

Gracias