DotVVM Web Camera with JS Directive

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.

General idea

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

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:

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.

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.

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:

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.

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.

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.

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.

6. Results.

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

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.

See you in Twitter / LinkedIn!