Instascan: IOS safari 11.4- Problema de apertura de la cámara trasera

¿Tienes acceso al dispositivo Apple? ¿Sabes si la demostración está funcionando?

Parece que esto ha tenido problemas con iOS Safari, pero he leído que la gente pudo superar este problema agregando metaetiquetas. Solo busca en este foro y verás. Estoy trabajando en algo similar, así que me interesa. Lo que me frena es que no tengo un dispositivo disponible.

Estaba probando la demostración en un iPhone, no funcionó.

Sí, he estado trabajando en esto, no puedo hacer que esto funcione. Intentando volver atrás y volver a leer los hilos. Conseguí que la cámara frontal funcionara agregando el último adaptador RTC web y agregando el atributo _playsinline_ a la etiqueta de video. Puede leer las cámaras pero no hace nada al cambiar a la cámara trasera.

atributo dentro de la etiqueta de video y también mencioné la metaetiqueta.

Agregué el atributo PlayInline dentro de la etiqueta de video y también mencioné la metaetiqueta.

Alguien había solucionado esto en uno de los hilos. Estoy probando eso ahora mismo, pero tengo que esperar a que alguien con un iPhone venga a trabajar.

Oye, hice que esto funcionara, pero todavía existe el problema, a pesar de elegir las cámaras, la predeterminada siempre será la cámara trasera. Entonces, si necesita elegir la cámara frontal, está jodido (pero en serio, quién va a intentar escanear con la cámara frontal).

¡Esto es lo que hice!

Agregué la metaetiqueta.
<meta name="apple-mobile-web-app-capable" content="yes">

Agregó este atributo:
<video id="scanner" class="video-back" playsinline></video>

Agregó este archivo JS:
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Y luego empaqueté esto para lanzarlo: https://github.com/JoseCDB/instascan/tree/ios-rear-camera. No estoy seguro de saber cómo usar Gulp con node.js, pero es fácil. ¡Lo gané en 15 minutos! Estoy usando esta versión personal de Instascan. Sabía del problema y pudo solucionarlo. Espero que esto ayude. Buena suerte.

He usado metaetiqueta, etiqueta de video y adapter-latest.js.
Y estoy usando instscan.min.js y no sé cómo puedo usar ".js - scanner.js - camara.js" por separado.

He usado metaetiqueta, etiqueta de video y adapter-latest.js.
Y estoy usando instscan.min.js y no sé cómo puedo usar ".js - scanner.js - camara.js" por separado.

Se supone que tienes instalado node.js. Hay un símbolo del sistema que empaqueta todos esos archivos juntos, el resultado final sería ese archivo JS minificado del instascanner.

Este es un gran producto y ha sido realmente útil, así que gracias por hacerlo maravilloso. Aquí está el problema con este instascan de mi investigación:

• La clase Camera al llamar a getCameras devuelve una colección de objetos Camera que se crean a partir de los objetos MediaDeviceInfo recopilados a través de una llamada a navigator.mediaDevices.enumerateDevices (). Estos NO son objetos de id _ y _ name _ y nada más. Se utilizan para crear una serie de objetos de cámara.

Cuando llama a _scanner.start (camera) _, está pasando un objeto Camera que llamará al método _camera.start () _ en la cámara.

• El método _camera.start () _ ENTONCES llama al _navigator.mediaDevices.getUserMedia (contraints) _, que devuelve un Arrary de objetos
• _scanner.start () _ llama a _scanner._enableScan (cámara) _ dándole el primer objeto MediaStream devuelto por la llamada anterior en la cámara. Establece el

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

El problema de la restricción:

El objeto Camera que se pasa usa su id en las restricciones como _ "obligatorio" _ para la búsqueda de los dispositivos. Si no se encuentra, no se mostrará ningún video. También se establecen otras restricciones "obligatorias".

¡Los diferentes dispositivos NO SOPORTAN las restricciones utilizadas!
Ejecute este enlace en el dispositivo que desea usar y le dirá qué restricciones admite:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Ejecute este enlace en el dispositivo que desea usar e ingrese una restricción. Te dirá si es compatible:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Restricciones compatibles con Ipad / Iphone / IOS:

AspectoRatio, FacingMode, _deviceId * _, height, width, aspectRatio y otros.

_Cuando probé esto,

Entonces, para agarrar la cámara trasera en el Iphone, debe usar el modo de cara y NO usar deviceId.

Restricciones compatibles con Android:

deviceId, _facingMode * _, aspectRatio, height, width y muchos otros.

Probé esto, en una tableta Samsung y un teléfono Android. El modo de cara predeterminado a la cámara frontal del "usuario". Experimenté con este código y descubrí que, por alguna razón aún descubierta, el modo de enfrentamiento para Android no funciona. Sin embargo, funciona en el enlace anterior. Continuaré investigando esa parte y posiblemente corregiré este código para que funcione correctamente con FaceMode y Android.

* * RESPUESTA AL PROBLEMA DE ANDROID * * *
La compilación Gulp de este proyecto incluye la versión del adaptador webrtc ^ 1.4.0 que estropea el modo de cara en Android Chrome. Al mirar a través del código, en realidad eliminó el modo de enfrentamiento.

• Para corregir en este proyecto, en _index.js_, elimine la línea 2 require('webrtc-adapter'); Luego siga los procedimientos de compilación a continuación. Cuando probé en una tableta y 4 teléfonos Android diferentes en Chrome, todo funcionó nuevamente para agarrar la cámara trasera.

Para tomar la cámara trasera en el Android con este código de instascan, puede usar el deviceId.
Asegúrese de que deviceId sea una restricción de _video_ como

video: {
  devideId: this.id
}

Código de restricción de la cámara:

Aquí está el código del proyecto que establece las restricciones y obtiene los objetos MediaStream
La razón por la que este código no funciona correctamente es que sourceId de la _ restricción de video_ no es compatible con _Android_ o _Iphone_. Esto debe cambiarse a deviceId . Además, todos los elementos obligatorios deben eliminarse si no son los que maneja su dispositivo.

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);
});

Cómo modificar InstaScan y minificarlo:

para obtener esto y cambiarlo, he estado usando VSCode.
1) Instale Node.js y vsCode.
2) en una terminal en el directorio que desea descargar, ejecute:
git clone https://github.com/JoseCDB/instascan.git

3) en el cd del terminal al directorio instascan:
cd instascan

4) cambie el javascript y ejecute gulp para liberar el código:
gulp release

5) Esto le dará un nuevo elemento instascan.min.js minificado en la carpeta _dist_.

Con suerte, voy a resolver este problema de Android este fin de semana. Espero que esto le brinde suficiente información para futuros proyectos con esta increíble biblioteca.

Hola, esto debería funcionar bien.
Primero, agregue adapter.js desde https://github.com/webrtc/adapter.

Después de eso, clona esto:
git clone https://github.com/quocthai95/instascan.git
Correr:
npm i
para instalar lo necesario

Use gulp para liberar el código final:
gulp release

Revisé Iphone 6 plus (iOS 11.4) y Iphone 8 plus (iOS 11.3) y funcionó bien. Puede intercambiar cámaras normalmente.

Espero que puedas resolver tu problema.

Hola, esto debería funcionar bien.
Primero, agregue adapter.js desde https://github.com/webrtc/adapter.

Después de eso, clona esto:
git clone https://github.com/quocthai95/instascan.git
Correr:
npm i
para instalar lo necesario

Use gulp para liberar el código final:
gulp release

Revisé Iphone 6 plus (iOS 11.4) y Iphone 8 plus (iOS 11.3) y funcionó bien. Puede intercambiar cámaras normalmente.

Espero que puedas resolver tu problema.

Al instalar los elementos necesarios, obtengo "12 vulnerabilidades (1 baja, 5 moderada, 6 alta)".
Algunos comandos "$ npm install --save-dev [package-name]" parecen resolver estas vulnerabilidades, pero no puedo construirlo debido a la siguiente excepción:

$ gulp release assert.js: 351 throw err; ^ AssertionError [ERR_ASSERTION]: la función de tarea debe especificarse en Gulp.set [como _setTask] (C: \ Users \ John \ Downloads \ instascan-ios-rear-camera \ instascan-ios-rear-camera \ node_modules \ undertaker \ lib \ set-task.js: 10: 3)

¿Cómo sigo desde aquí? Realmente me gustaría probar esta compilación. ¿Funciona tan bien con mi teléfono Android?

/John

Hola @johnatitide ,
¿Instaló la última versión de gulp (4.0.0)? Si es así, intente restringirlo a 3.9.1. FYI:
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
O puede proporcionar los comandos que hizo para construirlo.

Hola @ quocthai95

La construcción funciona con los siguientes comandos:
clon de git https://github.com/quocthai95/instascan.git
npm install [email protected]
npm yo
liberación de trago

Ahora puedo cambiar de cámara en Safari en iPad y iPhone. Bonito.

¿Alguna posibilidad de que las correcciones de restricciones se fusionen con el repositorio de schmich?

¿Alguna posibilidad de que las correcciones de restricciones se fusionen con el repositorio de schmich?

He creado una nueva solicitud de extracción. Espere a aceptar ^^

@ quocthai95 hola, he seguido tus pasos desde https://github.com/schmich/instascan/issues/182#issuecomment -447198290.

Me preguntaba, estoy obteniendo la cámara frontal por defecto en mi Android Chrome. preguntándome cómo puedo hacer que la cámara trasera sea la predeterminada? ¿tienes un código de ejemplo?

@fariskas ,
Use regexp para probar si coincide / back / luego inícielo, para que pueda tener la cámara trasera por defecto.

`Instascan.Camera.getCameras (). Luego (función (cámaras) {
if (cámaras [0] .name.match (/ back / i)) {
scanner.start (cámaras [0]);
} else if (cámaras [1] .name.match (/ back / i)) {
scanner.start (cámaras [1]);
}
}

Esto podría ser útil: estoy usando un bucle for para encontrar "atrás" en cameras[i].name pero no tuve éxito y no pude seleccionar la cámara trasera en el iPad hasta que escribí cameras[i].name a console.log y descubrí que tenía que buscar "achterzijde" (que es "back" en holandés).
Entonces, si no tiene éxito al intentar seleccionar la cámara trasera en iOS, intente traducir "atrás" o escriba cameras[i].name a console.log para averiguar cuál es el nombre de la cámara trasera.

Puedo confirmar que la demostración solo funciona con la cámara frontal. Esto es con Safari en iOS 12.2

¿Alguien ha descubierto cómo usar la cámara trasera con Safari en iOS 12+?

¿Alguien ha descubierto cómo usar la cámara trasera con Safari en iOS 12+?

He estado usando una versión modificada de esta biblioteca durante aproximadamente 7 meses en más de 30 tipos de teléfonos y tabletas iOS y Android. Mire los comentarios que dejé arriba sobre una versión modificada para obtener cualquier cámara del sistema operativo con el que está trabajando. Los comentarios siguen hablando de agregar el webrtc después, que encontré que es todo el problema de esta biblioteca.

Eliminé webrtc del proyecto por completo y lo volví a compilar. webrtc ya no es necesario con este código cuando se transpila a es5 o superior. El uso de webrtc en la biblioteca y cómo se codificó no permitió recuperar la cámara correcta.

He incluido los archivos js regulares y minificados fijos y transpilados que he estado usando durante un tiempo. Lo uso para asistir a la escuela con QrCodes en cualquier teléfono que tengan los estudiantes y profesores, que han sido más de 30 modelos en este momento. Puede agarrar cualquier cámara.

Espero que esto ayude.

Código de la cámara trasera
''
scanner = nuevo Instascan.Scanner ({video: video, scanPeriod: 4, mirror: false})
.entonces (handleSuccess)
.catch (handleError);
// Empezar a escanear
scanner.addListener ('escanear', 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

Este es un gran producto y ha sido realmente útil, así que gracias por hacerlo maravilloso. Aquí está el problema con este instascan de mi investigación:

• La clase Camera al llamar a getCameras devuelve una colección de objetos Camera que se crean a partir de los objetos MediaDeviceInfo recopilados a través de una llamada a navigator.mediaDevices.enumerateDevices (). Estos NO son objetos de id _ y _ name _ y nada más. Se utilizan para crear una serie de objetos de cámara.

Cuando llama a _scanner.start (camera) _, está pasando un objeto Camera que llamará al método _camera.start () _ en la cámara.

• El método _camera.start () _ ENTONCES llama al _navigator.mediaDevices.getUserMedia (contraints) _, que devuelve un Arrary de objetos
• _scanner.start () _ llama a _scanner._enableScan (cámara) _ dándole el primer objeto MediaStream devuelto por la llamada anterior en la cámara. Establece el elemento src en este objeto de flujo de medios.
  **This Part Is the Disconnect and what is messing it all up!**

El problema de la restricción:

El objeto Camera que se pasa usa su id en las restricciones como _ "obligatorio" _ para la búsqueda de los dispositivos. Si no se encuentra, no se mostrará ningún video. También se establecen otras restricciones "obligatorias".

¡Los diferentes dispositivos NO SOPORTAN las restricciones utilizadas!
Ejecute este enlace en el dispositivo que desea usar y le dirá qué restricciones admite:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Ejecute este enlace en el dispositivo que desea usar e ingrese una restricción. Te dirá si es compatible:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Restricciones compatibles con Ipad / Iphone / IOS:

AspectoRatio, FacingMode, _deviceId * _, height, width, aspectRatio y otros.

_Cuando probé esto,

Entonces, para agarrar la cámara trasera en el Iphone, debe usar el modo de cara y NO usar deviceId.

Restricciones compatibles con Android:

deviceId, _facingMode * _, aspectRatio, height, width y muchos otros.

Probé esto, en una tableta Samsung y un teléfono Android. El modo de cara predeterminado a la cámara frontal del "usuario". Experimenté con este código y descubrí que, por alguna razón aún descubierta, el modo de enfrentamiento para Android no funciona. Sin embargo, funciona en el enlace anterior. Continuaré investigando esa parte y posiblemente corregiré este código para que funcione correctamente con FaceMode y Android.

* _ * RESPUESTA AL PROBLEMA DE ANDROID * _ **
La compilación Gulp de este proyecto incluye la versión del adaptador webrtc ^ 1.4.0 que estropea el modo de cara en Android Chrome. Al mirar a través del código, en realidad eliminó el modo de enfrentamiento.

• Para corregir en este proyecto, en _index.js_, elimine la línea 2 require('webrtc-adapter'); Luego siga los procedimientos de compilación a continuación. Cuando probé en una tableta y 4 teléfonos Android diferentes en Chrome, todo funcionó nuevamente para agarrar la cámara trasera.

Para tomar la cámara trasera en el Android con este código de instascan, puede usar el deviceId.
Asegúrese de que deviceId sea una restricción de _video_ como

video: {
  devideId: this.id
}

Código de restricción de la cámara:

Aquí está el código del proyecto que establece las restricciones y obtiene los objetos MediaStream
La razón por la que este código no funciona correctamente es que sourceId de la _ restricción de video_ no es compatible con _Android_ o _Iphone_. Esto debe cambiarse a deviceId . Además, todos los elementos obligatorios deben eliminarse si no son los que maneja su dispositivo.

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);
});

Cómo modificar InstaScan y minificarlo:

para obtener esto y cambiarlo, he estado usando VSCode.

1. Instale Node.js y vsCode.
2. en una terminal en el directorio que desea descargar, ejecute:
   git clone https://github.com/JoseCDB/instascan.git
3. en el cd del terminal al directorio instascan:
   cd instascan
4. cambie el javascript y ejecute gulp para liberar el código:
   gulp release
5. Esto le dará un nuevo elemento instascan.min.js minificado en la carpeta _dist_.

Con suerte, voy a resolver este problema de Android este fin de semana. Espero que esto le brinde suficiente información para futuros proyectos con esta increíble biblioteca.

Seguí los pasos anteriores y luego edité el archivo
facingMode: { exact: "environment" },
Funciona para mi. Gracias @apchandler

¡Me alegro de que tenga algo que trabajar para usted! ¡Gracias @glorynguyen por publicar esta corrección también!

Desafortunadamente, estas soluciones no funcionan en iOS 13. Simplemente está en blanco (ni siquiera en negro).
Al depurar Safari de forma remota, tampoco se muestran errores en la consola.

¿Alguien ha descubierto cómo usar la cámara trasera con Safari en iOS 12+?

He estado usando una versión modificada de esta biblioteca durante aproximadamente 7 meses en más de 30 tipos de teléfonos y tabletas iOS y Android. Mire los comentarios que dejé arriba sobre una versión modificada para obtener cualquier cámara del sistema operativo con el que está trabajando. Los comentarios siguen hablando de agregar el webrtc después, que encontré que es todo el problema de esta biblioteca.

Eliminé webrtc del proyecto por completo y lo volví a compilar. webrtc ya no es necesario con este código cuando se transpila a es5 o superior. El uso de webrtc en la biblioteca y cómo se codificó no permitió recuperar la cámara correcta.

He incluido los archivos js regulares y minificados fijos y transpilados que he estado usando durante un tiempo. Lo uso para asistir a la escuela con QrCodes en cualquier teléfono que tengan los estudiantes y profesores, que han sido más de 30 modelos en este momento. Puede agarrar cualquier cámara.

Espero que esto ayude.

Código de la cámara trasera

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 (comentario)

Esto resuelve mi problema, muchas gracias.

¿Cuál es la última solución para esto? Probé algunos del hilo, pero parece que solo tengo la cámara frontal.
No sé cómo usar Gulp o compilar proyectos .js .git, principalmente codifico en C # / Asp.net Mvc, así que esto es un poco nuevo para mí.
La solución de apchandler me da errores. (Video no definido)
Actualmente cargando un instascan.min.js "fijo" para dispositivos Android y su versión para IOS, pero parece que no puedo hacer que funcione.

¿Cuál es la última solución para esto? Probé algunos del hilo, pero parece que solo tengo la cámara frontal.
No sé cómo usar Gulp o compilar proyectos .js .git, principalmente codifico en C # / Asp.net Mvc, así que esto es un poco nuevo para mí.
La solución de apchandler me da errores. (Video no definido)
Actualmente cargando un instascan.min.js "fijo" para dispositivos Android y su versión para IOS, pero parece que no puedo hacer que funcione.

¿Tiene el elemento de video html presente?
''

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

var self = esto;
self.scanner = new Instascan.Scanner ({video: document.getElementById ('vista previa'), scanPeriod: 5});
self.scanner.addListener ('escanear', función (contenido, imagen) {
self.scans.unshift ({fecha: + (Date.now ()), contenido: contenido});
});
Instascan.Camera.getCameras (). Luego (función (cámaras) {
self.cameras = cámaras;
if (camera.length> 0) {
self.activeCameraId = cámaras [0] .id;
self.scanner.start (cámaras [0]);
} demás {
console.error ('No se encontraron cámaras');
}
}). catch (función (e) {
console.error (e);
});
''

Sí, lo tengo funcionando con:

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

Cámaras de inicio [0] para dispositivos Iphone / Ios. Y esto para 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>

Parece que el problema fue que solo verifiqué si Request.UserAgent.Contains ("ios") y no "iphone", así que también ejecuté el script de Android para Iphone.

Es bueno saberlo. Gracias por la info.

@apchandler Hola, ¿Sabes si existe una forma de seleccionar la cámara trasera 'principal'?

Tengo un sitio web donde mis usuarios escanearán CÓDIGOS QR usando instascan. Estoy desarrollando el sitio web y haciendo algunas pruebas. Accedo al sitio web usando mi teléfono móvil que tiene 4 cámaras traseras (HUAWEI P30 PRO).

Probé el $ .each y con la primera cámara trasera seleccionada no puedo escanear nada porque la visión es muy borrosa y con mucho zoom.

Pero, si selecciono las cámaras [2], puedo escanear todo.

¿Existe una forma genérica de seleccionar la cámara trasera 'principal'?

Quiero decir, mi aplicación web va a ser utilizada por tantos usuarios con diferentes teléfonos móviles, diferente número de cámaras y el orden de las cámaras también será diferente.

¿O recomiendas hacer una selección con todas las cámaras y luego dejar que el usuario escoja la que le funcione a la perfección?

Gracias

@apchandler Hola, ¿Sabes si existe una forma de seleccionar la cámara trasera 'principal'?

Tengo un sitio web donde mis usuarios escanearán CÓDIGOS QR usando instascan. Estoy desarrollando el sitio web y haciendo algunas pruebas. Accedo al sitio web usando mi teléfono móvil que tiene 4 cámaras traseras (HUAWEI P30 PRO).

Probé el $ .each y con la primera cámara trasera seleccionada no puedo escanear nada porque la visión es muy borrosa y con mucho zoom.

Pero, si selecciono las cámaras [2], puedo escanear todo.

¿Existe una forma genérica de seleccionar la cámara trasera 'principal'?

Quiero decir, mi aplicación web va a ser utilizada por tantos usuarios con diferentes teléfonos móviles, diferente número de cámaras y el orden de las cámaras también será diferente.

¿O recomiendas hacer una selección con todas las cámaras y luego dejar que el usuario escoja la que le funcione a la perfección?

Gracias

Lo siento. No conozco ningún valor que especifique como una cámara 'principal' cuando hay múltiples presentes. Puede asignar a la función de cámara seleccionada el objeto de criterios que especifique que debe tener al menos una determinada resolución y otras especificaciones. Eso al menos podría darte una cámara de capacidad mínima. De lo contrario, su solución suena bien de acuerdo con la forma en que desea abordarla.

@apchandler Hola, ¿Sabes si existe una forma de seleccionar la cámara trasera 'principal'?
Tengo un sitio web donde mis usuarios escanearán CÓDIGOS QR usando instascan. Estoy desarrollando el sitio web y haciendo algunas pruebas. Accedo al sitio web usando mi teléfono móvil que tiene 4 cámaras traseras (HUAWEI P30 PRO).
Probé el $ .each y con la primera cámara trasera seleccionada no puedo escanear nada porque la visión es muy borrosa y con mucho zoom.
Pero, si selecciono las cámaras [2], puedo escanear todo.
¿Existe una forma genérica de seleccionar la cámara trasera 'principal'?
Quiero decir, mi aplicación web va a ser utilizada por tantos usuarios con diferentes teléfonos móviles, diferente número de cámaras y el orden de las cámaras también será diferente.
¿O recomiendas hacer una selección con todas las cámaras y luego dejar que el usuario escoja la que le funcione a la perfección?
Gracias

Lo siento. No conozco ningún valor que especifique como una cámara 'principal' cuando hay múltiples presentes. Puede asignar a la función de cámara seleccionada el objeto de criterios que especifique que debe tener al menos una determinada resolución y otras especificaciones. Eso al menos podría darte una cámara de capacidad mínima. De lo contrario, su solución suena bien de acuerdo con la forma en que desea abordarla.

¡Muchas gracias por tu respuesta! Probaré con la resolución. ¿Instascan puede devolver la resolución de una cámara?

Según los métodos proporcionados por @glorynguyen y @apchandler.
Ahora puede encender la cámara trasera
Modificar instascan.min
Antes
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
Despué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:[]}}

¿Alguien ha descubierto cómo usar la cámara trasera con Safari en iOS 12+?

He estado usando una versión modificada de esta biblioteca durante aproximadamente 7 meses en más de 30 tipos de teléfonos y tabletas iOS y Android. Mire los comentarios que dejé arriba sobre una versión modificada para obtener cualquier cámara del sistema operativo con el que está trabajando. Los comentarios siguen hablando de agregar el webrtc después, que encontré que es todo el problema de esta biblioteca.

Eliminé webrtc del proyecto por completo y lo volví a compilar. webrtc ya no es necesario con este código cuando se transpila a es5 o superior. El uso de webrtc en la biblioteca y cómo se codificó no permitió recuperar la cámara correcta.

He incluido los archivos js regulares y minificados fijos y transpilados que he estado usando durante un tiempo. Lo uso para asistir a la escuela con QrCodes en cualquier teléfono que tengan los estudiantes y profesores, que han sido más de 30 modelos en este momento. Puede agarrar cualquier cámara.

Espero que esto ayude.

Código de la cámara trasera

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 (comentario)

Usted señor acaba de salvar el trabajo de un desarrollador junior, tiene un fan de por vida.

Gracias. Estaba justo donde estabas cuando vi este código. Tenía una fecha límite y necesitaba las cámaras de 30 tipos diferentes. Me alegro que hayan escrito esto.

Funcionando 15 meses ahora con 45 modelos diferentes de teléfonos y solo un problema en un teléfono Samsung que se solucionó cuando Samsung lo parcheó. Entonces fue un error de Samsung WebKit.

Hola,
También estoy enfrentando problemas con la cámara trasera con IOS como otra persona. Mi cámara trasera no se abre en el iPhone, la cámara frontal predeterminada se está ejecutando. Ayúdenme si alguien ha resuelto este problema con la versión actualizada (13.xx. Xx) de safari.

¿Alguien ha descubierto cómo usar la cámara trasera con Safari en iOS 12+?

He estado usando una versión modificada de esta biblioteca durante aproximadamente 7 meses en más de 30 tipos de teléfonos y tabletas iOS y Android. Mire los comentarios que dejé arriba sobre una versión modificada para obtener cualquier cámara del sistema operativo con el que está trabajando. Los comentarios siguen hablando de agregar el webrtc después, que encontré que es todo el problema de esta biblioteca.

Eliminé webrtc del proyecto por completo y lo volví a compilar. webrtc ya no es necesario con este código cuando se transpila a es5 o superior. El uso de webrtc en la biblioteca y cómo se codificó no permitió recuperar la cámara correcta.

He incluido los archivos js regulares y minificados fijos y transpilados que he estado usando durante un tiempo. Lo uso para asistir a la escuela con QrCodes en cualquier teléfono que tengan los estudiantes y profesores, que han sido más de 30 modelos en este momento. Puede agarrar cualquier cámara.

Espero que esto ayude.

Código de la cámara trasera

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 (comentario)

¡Funcionó a las mil maravillas tanto en Android como en iOS! Acabo de descargar la rama maestra de instascan original, puse sus archivos en la carpeta "dist", ¡y eso es todo! muchas gracias señor !

¡Funcionó a las mil maravillas tanto en Android como en iOS! Acabo de descargar la rama maestra de instascan original, puse sus archivos en la carpeta "dist", ¡y eso es todo! muchas gracias señor !

@ antworks-hub, ¿usó todo el código de la rama o el js minificado?
¿De dónde sacaste la carpeta "dist"?

¡Funcionó a las mil maravillas tanto en Android como en iOS! Acabo de descargar la rama maestra de instascan original, puse sus archivos en la carpeta "dist", ¡y eso es todo! muchas gracias señor !

@ antworks-hub, ¿usó todo el código de la rama o el js minificado?
¿De dónde sacaste la carpeta "dist"?

@ Sandi2211 Creo que creé una carpeta "dist" en la raíz de la rama maestra de instascan original y puse el contenido del archivo instasca, min.zip en esa carpeta.

¿Alguien ha descubierto cómo usar la cámara trasera con Safari en iOS 12+?

He estado usando una versión modificada de esta biblioteca durante aproximadamente 7 meses en más de 30 tipos de teléfonos y tabletas iOS y Android. Mire los comentarios que dejé arriba sobre una versión modificada para obtener cualquier cámara del sistema operativo con el que está trabajando. Los comentarios siguen hablando de agregar el webrtc después, que encontré que es todo el problema de esta biblioteca.
Eliminé webrtc del proyecto por completo y lo volví a compilar. webrtc ya no es necesario con este código cuando se transpila a es5 o superior. El uso de webrtc en la biblioteca y cómo se codificó no permitió recuperar la cámara correcta.
He incluido los archivos js regulares y minificados fijos y transpilados que he estado usando durante un tiempo. Lo uso para asistir a la escuela con QrCodes en cualquier teléfono que tengan los estudiantes y profesores, que han sido más de 30 modelos en este momento. Puede agarrar cualquier cámara.
Espero que esto ayude.
Código de la cámara trasera

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 (comentario)

Esto resuelve mi problema, muchas gracias.

Gracias hombre, mi trabajo está bien, solo agrega tu nuevo js.

No hay problema. Me alegro de que todo esto siga funcionando aquí.

¿Alguien ha descubierto cómo usar la cámara trasera con Safari en iOS 12+?

He estado usando una versión modificada de esta biblioteca durante aproximadamente 7 meses en más de 30 tipos de teléfonos y tabletas iOS y Android. Mire los comentarios que dejé arriba sobre una versión modificada para obtener cualquier cámara del sistema operativo con el que está trabajando. Los comentarios siguen hablando de agregar el webrtc después, que encontré que es todo el problema de esta biblioteca.

Eliminé webrtc del proyecto por completo y lo volví a compilar. webrtc ya no es necesario con este código cuando se transpila a es5 o superior. El uso de webrtc en la biblioteca y cómo se codificó no permitió recuperar la cámara correcta.

He incluido los archivos js regulares y minificados fijos y transpilados que he estado usando durante un tiempo. Lo uso para asistir a la escuela con QrCodes en cualquier teléfono que tengan los estudiantes y profesores, que han sido más de 30 modelos en este momento. Puede agarrar cualquier cámara.

Espero que esto ayude.

Código de la cámara trasera

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 (comentario)

¡Tks, @ apchandler11! Salvaste mi trabajo. dios dms!