Webcam para capturar imágenes en DotVVM & ASP.NET
Published: 2024-01-10 00:19:17

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](https://dev.to/esdanielgomez/llamar-a-funciones-javascript-desde-dotvvm-con-js-directive-32f6).

Código fuente: [DotVVM Web Camera with JS Directive](https://github.com/esdanielgomez/DotVVMWebCamera).

**Idea general**

De manera general, este será el flujo o las acciones por llevar a cabo en la solución: 

![General idea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6p2fj12vs78i1rjcbt8s.png)
 
**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: 

![.NET Solution in Visual Studio 2022](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es2156edndly385ohvlz.png)
 
**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: 

1. Ubicar la librería WebcamJS en la solución. 
2. Definir una API para guardar el archivo resultado. 
3. JS Directive – Configuraciones. 
4. ViewModel – Establecer la lógica de la aplicación. 
5. View – Vista de la pagina web. 
6. 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. 

![JS module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kezeqr009cob14r3e2i2.png)

##**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.

![API code to save the image file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m48jvugi0xbuhra8sawr.png)
 
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: 

![Set the JS module in the DotVVM startup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs07vhs1ithl3krbl25y.png)
 
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. 

![DotVVM ViewModel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yckhxsavu5n52q98raea.png)
  
##**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.

![JS module reference in the View code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5swsdgybu15i6t15lmom.png)
 
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. 

![View code for Take Picture section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q33fkgv0uz0lbx6t688w.png)
 
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. 

![View code for results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p64wkcu91c2015i1s7kj.png)

##**6. Resultados.**

Considerando el proceso analizado hasta este punto, ahora podremos ejecutar la aplicación, tomar una fotografía y visualizar los resultados.  

![Example of the web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxx7fqdxkxzkkud3agz5.png)

## **¡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](https://github.com/esdanielgomez/DotVVMWebCamera).

Nos vemos en [Twitter](https://twitter.com/esDanielGomez) / [LinkedIn](https://www.linkedin.com/in/esdanielgomez/)!