En este artículo tutorial podremos ver el proceso para integrar un capturador de imágenes de una cámara web desde una aplicación con DotVVM sobre ASP.NET. Para cumplir este objetivo, utilizaremos la librería de JavaScript WebcamJS desde nuestra aplicación por medio de la funcionalidad JS Directive de DotVVM.
Si necesitas saber más sobre JS Directive en DotVVM, aquí puedes aprender más: Llamar a funciones JavaScript desde DotVVM con JS Directive.
Código fuente: DotVVM Web Camera with JS Directive.
Idea general
De manera general, este será el flujo o las acciones por llevar a cabo en la solución:
1. Desde la aplicación DotVVM llamar al visor de la cámara en JavaScript
2.1 Al tomar la foto, desde JavaScript mostrar la imagen capturada y enviar el nombre del archivo a DotVVM.
2.2 Llamar a una API del lado de .NET para guardar el archivo de la imagen a nivel local para un uso futuro (por ejemplo, analizar la imagen con Azure AI Services, o guardarla en Azure Blob Storage).
La solución será de la siguiente manera:
Agenda – Pasos a seguir
Para poder tomar la foto, guardar el archivo, y mostrarlo en la aplicación, estos serán los pasos por seguir:
- Ubicar la librería WebcamJS en la solución.
- Definir una API para guardar el archivo resultado.
- JS Directive – Configuraciones.
- ViewModel – Establecer la lógica de la aplicación.
- View – Vista de la pagina web.
- Resultados.
1. Ubicar la librería WebcamJS en la solución.
En nuestra solución debemos considerar el archivo JavaScript que necesitaremos utilizar. En este caso se ha definido una clase JS, con el objetivo de ubicar el visor de la cámara en la página web (#my_camera), mostrar los resultados (en el área results), enviar el nombre del nuevo archivo de imagen a DotVVM, y llamar a una API para guardar el archivo de la imagen capturada.
2. Definir una API para guardar el archivo resultado.
Para guardar el archivo en la solución local, por ejemplo, en wwwroot/CameraPhotos, podemos establecer una API, la cual tenga una función que reciba como parámetro un FormFile, llamada desde el archivo JavaScript.
Este archivo pudiese ser utilizado posteriormente para enviarlo a un contenedor de Azure Blob Storage, o a algún servicio externo.
Nota: es importante habilitar el uso de controladores en el Starup.cs o en el Program.cs.
3. JS Directive – Configuraciones.
Para poder hacer las llamadas a funciones de JavaScript y/o recibir datos, es importante registrar esta referencia por medio de JS Directive. Para este propósito nos dirigiremos a la clase DotvvmStartup.cs y en el método ConfigureResources registraremos nuestro modulo y sus dependencias:
En este caso nuestro modulo será camera-module, el cual contiene una dependencia llamada _webcamjs _que contiene todas las funcionalidades para el visor y la captura de fotos. En ambos casos se necesita especificar la ruta y el nombre de los archivos JS en el espacio wwwroot.
4. ViewModel – Establecer la lógica de la aplicación.
Para este caso nuestra única lógica será definir un atributo para almacenar el nombre del archivo de la imagen. En el ViewModel se podría definir alguna otra lógica en caso de que se necesite hacer algo más con el archivo en cuestión.
5. View – Vista de la página web.
Y aquí está la parte más importante, desde aquí llamaremos a las funcionalidades de JavaScript. Como primer punto deberemos referenciar al modulo JS que establecimos en la configuración dentro de la clase DotvvmStartup.cs, en este caso con js camera-module. Asimismo, podremos establecer un comando estático para especificar que desde el archivo JS se podrá enviar el dato del nombre del archivo de la imagen, y almacenarlo en la variable definida en el ViewModel.
A continuación nos encontramos con la sección donde estará ubicado el visor de la cámara. Para esto tenemos un div con un id=”my_camera”, de acuerdo a lo establecido en el archivo JS también, y luego un botón para llamar a la acción “Tomar Foto”, o en otras palabras, la función take_snapshot en JavaScript.
Finalmente, aquí podremos mostrar los resultados bajo la misma lógica, en este caso con un div cuyo ID es results, y de manera adicional podemos mostrar el valor de la variable que contiene el nombre del archivo de la imagen generada.
6. Resultados.
Considerando el proceso analizado hasta este punto, ahora podremos ejecutar la aplicación, tomar una fotografía y visualizar los resultados.
¡Gracias por leer!
Espero que te haya gustado el artículo. Si tienes alguna pregunta o idea en mente, será un gusto poder estar en comunicación e intercambiar conocimientos entre sí.
Código fuente: DotVVM Web Camera with JS Directive.
Top comments (0)