DotVVM Web Camera with JS Directive
Tags: webdev, dotnet, javascript, html
Published: 2023-08-22 17:16:15

In this tutorial article we can see the process to integrate an image capture of a webcam from an application with DotVVM on ASP.NET. To meet this goal, we will use the JavaScript library _WebcamJS_ from our application through the JS Directive functionality of DotVVM. 

If you need to know more about JS Directive in DotVVM, here you can learn more: URL

Source code: [DotVVM Web Camera with JS Directive](https://github.com/esdanielgomez/DotVVMWebCamera).

**General idea**

In general, this will be the flow or actions to be carried out in the solution: 

![General idea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6p2fj12vs78i1rjcbt8s.png)
 
**1.** From the DotVVM application call the camera viewer in JavaScript
**2.1** When taking the photo, from JavaScript display the captured image and send the file name to DotVVM. 
**2.2** Call a .NET-side API to save the image file locally for future use (for example, analyze the image with Azure AI Services, or save it to Azure Blob storage).
 
The solution will be as follows: 

![.NET Solution in Visual Studio 2022](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es2156edndly385ohvlz.png)
 
**Agenda – Steps to follow**

In order to take the photo, save the file, and display it in the application, these will be the steps to follow: 

1. WebcamJS library in the solution. 
2. Define an API to save the result file. 
3. JS Directive – Configurations. 
4. ViewModel – Set the application logic. 
5. View – Webpage. 
6. Results. 

##**1. WebcamJS library in the solution.**

In our solution we must consider the JavaScript file that we will need to use. In this case a JS class has been defined with the aim of locating the webcamera on the web page (_#my_camera_), displaying the results (in the _results_ area), sending the name of the new image file to DotVVM, and calling an API to save the captured image file. 

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

##**2. Define an API to save the result file.**

To save the file in the local solution, for example, in _wwwroot/CameraPhotos_, we can establish an API, which has a function that receives as a parameter a _FormFile_, called from the JavaScript file. 

This file could then be used to send it to an Azure Blob storage container, or to an external service.

![API code to save the image file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m48jvugi0xbuhra8sawr.png)
 
Note: It is important to enable the use of drivers on the _Starup.cs_ or _Program.cs_. 

##**3. JS Directive – Configurations.**

In order to make JavaScript function calls and/or receive data, it is important to register this reference using the JS Directive. For this purpose we will go to the class _DotvvmStartup.cs_ and in the _ConfigureResources_ method we will register our module and its dependencies: 

![Set the JS module in the DotVVM startup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs07vhs1ithl3krbl25y.png)

In this case our module will be _camera-module_, which contains a dependency called _webcamjs _que contains all the functionalities for the viewer and photo capture. In both cases you need to specify the path and name of the JS files in the **wwwroot** space.

##**4. ViewModel – Set the application logic.**

For this case our only logic will be to define an attribute to store the name of the image file. In the ViewModel you could define some other logic in case you need to do something else with the file in question. 

![DotVVM ViewModel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yckhxsavu5n52q98raea.png)

##**5. View – Webpage.**

And here is the most important part, from here, we'll call JavaScript functionalities. As a first point we must refer to the JS module that we established in the configuration within the _DotvvmStartup.cs_ class, in this case with _js camera-module_. Likewise, we can establish a static command to specify that from the JS file the data of the name of the image file can be sent and store it in the variable defined in the ViewModel.

![JS module reference in the View code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5swsdgybu15i6t15lmom.png)

Next, we find the section where the webcam area will be located. For this we have a div with a _id="my_camera"_, according to what is established in the JS file as well, and then a button to call the action _"Take Photo"_, or in other words, the _take_snapshot_ function in JavaScript. 

![View code for Take Picture section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q33fkgv0uz0lbx6t688w.png)

Finally, here we can show the results under the same logic, in this case with a div whose ID is _results_, and additionally we can show the value of the variable that contains the name of the file of the generated image. 

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

##**6. Results.**

Considering the process analyzed up to this point, we can now run the application, take a picture and visualize the results. 

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

## **Thanks for reading!**

I hope you liked the article. If you have any questions or ideas in mind, it will be a pleasure to be able to be in communication and exchange knowledge with each other.

**Source code:** [DotVVM Web Camera with JS Directive](https://github.com/esdanielgomez/DotVVMWebCamera).

See you in [Twitter](https://twitter.com/esDanielGomez) / [LinkedIn](https://www.linkedin.com/in/esdanielgomez/)!