Aitor Sánchez - Blog - Oct. 31, 2023, 1:25 p.m.
¿Necesitas que tu usuario tenga una preview de la cámara desde dentro de tu aplicación? O, quizás ya sabes cómo se hace, pero aún te falta conocer algún detallito más para terminar de hacerlo funcionar ¿cierto?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás, de manera sencilla y accionable, cómo hacer que tu usuario vea una vista previa de lo que está enfocando la cámara de su dispositivo desde dentro de tu app. Y todo esto, con el componente Camera Preview de Ionic.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y ahora si, comenzamos. Let´s go!
Cómo todos los componentes desacoplados del core del sistema, necesitamos instalarlo en nuestra app para poderlo usar. Para ello vamos a usar las dos siguientes líneas de código:
$ ionic cordova plugin add cordova-plugin-camera-preview
$ npm install @ionic-native/camera-preview
La primera instalará el plugin que permitirá la comunicación con la parte nativa del dispositivo donde se esté ejecutando la app.
La segunda instalará el código TS que hará de puente entre el nuestro código de la aplicación y el plugin.
En el caso de que no esté utilizando Ionic 4 o superior con el módulo NGX de Camera Preview Ionic, será necesario que agregues el componente a los providers de tu componente de la siguiente manera:
providers: [
…,
CameraPreview,
…
]
Recuerda, si nos vas a usar el módulo en toda la app, es mucho mejor ponerlo en los providers del componente que lo vaya a usar. Así estarás incurriendo en buenas prácticas y en rendimiento para tu app.
Bueno, cómo era de esperar, y con Windows Phone fuera de juego, estas son las siguientes plataformas para las que estará disponible:
Bien, este ejemplo va a ser un poco más largo de lo que acostumbramos. Pero no por ello nos vamos a achantar ¿verdad? Eso, al lío. Pero primero un ejemplo de código, cómo siempre.
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview/ngx';
constructor(private cameraPreview: CameraPreview) { }
...
// camera options (Size and location). In the following example, the preview uses the rear camera and display the preview in the back of the webview
const cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: 'rear',
tapPhoto: true,
previewDrag: true,
toBack: true,
alpha: 1
}
// start camera
this.cameraPreview.startCamera(cameraPreviewOpts).then(
(res) => {
console.log(res)
},
(err) => {
console.log(err)
});
// Set the handler to run every time we take a picture
this.cameraPreview.setOnPictureTakenHandler().subscribe((result) => {
console.log(result);
// do something with the result
});
// picture options
const pictureOpts: CameraPreviewPictureOptions = {
width: 1280,
height: 1280,
quality: 85
}
// take a picture
this.cameraPreview.takePicture(this.pictureOpts).then((imageData) => {
this.picture = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
console.log(err);
this.picture = 'assets/img/test.jpg';
});
// take a snap shot
this.cameraPreview.takeSnapshot(this.pictureOpts).then((imageData) => {
this.picture = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
console.log(err);
this.picture = 'assets/img/test.jpg';
});
// Switch camera
this.cameraPreview.switchCamera();
// set color effect to negative
this.cameraPreview.setColorEffect('negative');
// Stop the camera preview
this.cameraPreview.stopCamera();
En primer lugar, y a diferencia de la mayoría de ocasiones, vamos a hacer uso de las siguientes clases para completar el ejemplo:
Estas clases pertenecen al módulo que acabamos de instalar en pasos anteriores y que hemos añadido a los providers de la app. El módulo es el: @ionic-native/camera-preview/ngx.
Posteriormente, inyectaremos una instancia de la clase a través del constructor de la clase en la que estemos trabajando.
De manera explícita, crearemos una instancia de la interface CameraPreviewOptions con los datos que hemos dado en el ejemplo.
Ahora, para poner la cámara en marcha, usaremos “startCamera”. El componente ya se ocupará por debajo de solicitar los permisos y demás cosas por debajo. Así nos ahorra trabajo.
Dicho método, startCamera, recibe la instancia de CameraPreviewOptions que hemos creado antes y al ser una promesa la tendremos que controlar para que todo funcione.
Pues con esto, ya tendríamos la cámara en pantalla y podríamos ver que se ve a través de ella. Ahora vamos a terminar de comentar el ejemplo.
Crearemos una instancia de la interfaz “CameraPreviewPictureOptions” con los datos dados en el ejemplo.
Esta instancia será usada para, por ejemplo, tomar una foto con los métodos que vemos en el ejemplo “takePicture” y “takeSnashot”. No estoy del todo seguro, pero creo que sirven para lo mismo. Yo he probado ambos y no veo la diferencia de uno a otro.
El resto de los métodos que podemos ver en el ejemplo, los detallaré con más profundidad ahora, así que no será necesario que los especifique aquí.
Pues este ha sido el ejemplo, cómo he comentado más arriba, es un poco más tortuoso que el resto de las componentes que hemos visto. Pero bueno, este mundillo es así, algunas veces se complican las cosas de más. Sigamos.
Vamos a pasar a ver las funciones y los métodos que tenemos disponibles en camera preview Ionic para sacar el máximo partido al módulo que Ionic pone a nuestra disposición para tal fin.
Básicamente, esta función inicializa la cámara con las opciones que le hemos pasado por parámetros.
Es lo contrario de la función anterior. Esta hará que la cámara deje de mostrarse en caso de que se esté mostrando. En caso de que no se esté mostrando, no hará nada.
Con esta función podremos cambiar entre las cámaras de las que disponga el dispositivo donde estamos ejecutando la aplicación. En caso de que solo tenga una, esta función no hará nada.
Cómo su propio nombre indica, esconde la vista de la cámara. Esta función no detiene la ejecución de la cámara, solamente la esconde para que luego la podamos volver a mostrar sin la necesidad de cargar todo el sistema desde 0.
Al contrario que la anterior, esta función muestra la cámara en caso de que esta este escondida con la función “hide()”. En caso de no estar escondida, esta no hará nada.
Esta función, cómo su nombre indica, tomará una foto de la preview que tenemos en pantalla en ese mismo momento. Los datos llegarán cómo una cadena en Base 64, ojo con esto, por que no es la ruta temporal, ni definitiva, de la imagen.
En caso de que queramos guardarla, lo tendremos que hacer de forma explícita. Tendremos que usar la clase File para poder persistirla. Lo explicaré más adelante en el curso. Continuemos con el artículo de Camera Preview.
Dicha función, aplica el efecto que nosotros queramos a la preview que esté en el dispositivo y posteriormente a la imagen que capturemos.
Esta función nos permite definir una cantidad de zoom que queremos que tenga la camera preview y posteriormente la imagen. No puede ser mayor que el máximo zoom permitido por el dispositivo, ni menos de 0.El siguiente métodos aclararán tu pregunta.
Cómo he explicado en el retorno, nos permite conocer cuál es el número máximo de aumentos que le podemos poner al zoom. Dependiendo de la calidad de la cámara y del dispositivo en sí mismo.
Nos permite conocer cuál es el zoom actual que porta la cámara del sistema.
Nos permite, después de inicializar la camera preview desde startPreview(), setearle una dimensiones diferentes.
Nos permite definir qué tipo de enfoque queremos que capte nuestro objetivo sobre lo que estamos haciendo, o queremos hacer.
Retorna el método de enfoque que tiene en ese momento el componente seteado.
Nos permite saber cuáles son los métodos de enfoque que tenemos disponibles en el dispositivo donde se esté ejecutando la aplicación. Muy útil para evitar problemas de seguridad.
Nos permite definir de qué manera queremos que se comporte el flash en ese mismo momento. Muy útil, por ejemplo, para aplicaciones cómo lectores de tarjetas, códigos QR, etc…
Nos permite saber qué modo de flash está utilizando en ese momento la cámara del dispositivo.
Esta función nos permite conocer cuáles son los modos de flash que el dispositivo en cuestión tiene para usar.
Esta función nos permitirá conocer cuáles son los tamaños máximos soportados por el dispositivo donde estamos corriendo la aplicación.
Básicamente, nos permite controlar el tipo de exposición que queremos que tenga el objetivo de nuestra cámara en la vista previa.
Básicamente, nos permite acceder al modo de exposición que hay actualmente seteado en el sistema.
Esta función nos permite conocer los modos de exposición que tenemos disponibles en la cámara del dispositivo donde estamos ejecutando la app.
Básicamente, nos permite definir la cantidad de exposición sobre la imagen que tenemos en ese mismo instante. Esta función solo estará disponible para Android.
Nos permitirá acceder a la cantidad de exposición que estamos poniendo sobre la cámara. Esta función solo estará disponible para Android.
Básicamente, nos permite acceder al rango de compensación de la exposición que tenemos aplicada en el sistema. Solo estará disponible para Android.
Nos permite definir sobre que punto queremos enfocar el objetivo de la cámara.
Básicamente, es un listener que nos permitirá saber cuándo un usuario ha pulsado sobre el botón de atrás, o back, cuando la cámara se está mostrando o está oculta con la función “hide”.
Pues bien, hemos llegado al final de la lista de funciones que tenemos disponibles para usar. Ahora vamos a explicar los campos del componente y las interfaces que lo acompañan.
Todos estos campos e interfaces, los hemos visto a lo largo del artículo. Pero ahora vamos a los atributos que contienen y una breve descripción para comenzar a usar más profundamente Camera Preview Ionic
Pues esto ha sido todo por hoy lector sobre camera preview Ionic. Menudo pedazo de charla de pesadilla. Madre mía… Pero bueno, ya hemos terminado.
Hemos montado esta herramienta para que evalues, optimices y mejores los iconos de tus aplicaciones. Que, cómo ya deberías de saber, una estrategia para mejorar la calidad del logo afecta directamente a sus descargas y a tus ingresos de manera directa.
Así que no te espoileo nada, entra al enlace.
Y hasta aquí el artículo de hoy. Espero haberte ayudado y nos vemos en el siguiente. Hasta entonces ¡que vaya bien!