DotVVM Webcam with .NET and JS Directive

Introduction

In this article, we can see the process of integrating 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

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 the camera module, which contains a dependency called _webcamjs _que and 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 stored 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 an 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 the result, 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 communicate and exchange knowledge with each other.

Source code: DotVVM Web Camera with JS Directive.

See you on Twitter / LinkedIn!