在本教程文章中，我们可以看到该过程以与ASP.NET上的DOTVVM从应用程序中的网络摄像头捕获图像捕获。为了实现此目标，我们将通过DOTVVM的JS指令功能从应用程序中使用JavaScript库 WebCAMJS 。
如果您需要在DOTVVM中了解有关JS指令的更多信息，则可以在这里了解更多信息：url
源代码：DotVVM Web Camera with JS Directive。
一般想法
通常，这将是解决方案中要执行的流或动作：
1。来自dotvvm应用
2.1 在拍照时，从JavaScript显示捕获的图像，然后将文件名发送到DOTVVM。
2.2 致电.NET端API以在本地保存图像文件以备将来使用（例如，使用Azure AI服务分析图像，或将其保存到Azure Blob存储中）。
解决方案将如下：
遵循
的议程步骤为了拍摄照片，保存文件并将其显示在应用程序中，这些将是以下步骤：
- 解决方案中的WebCAMJS库。
- 定义API以保存结果文件。
- JS指令的配置。
- ViewModel设置应用程序逻辑。
- 查看网页。
- 结果。
1。解决方案中的网络摄像头库。
在我们的解决方案中，我们必须考虑我们需要使用的JavaScript文件。在这种情况下，已经定义了JS类，目的是在网页上找到网络摄像头（ #my_camera ），显示结果（在 results 区域中），发送新图像文件的名称dotVVM，并调用API保存捕获的图像文件。
2。定义API保存结果文件。
要将文件保存在本地解决方案中，例如，在 wwwroot/cameraphotos 中，我们可以建立一个API，该API具有接收为参数a formfile 从JavaScript文件调用。
然后可以使用此文件将其发送到Azure Blob存储容器或外部服务。
注意：在 starup.cs 或 program.cs 上启用驱动程序很重要。
3。 JS指令 - 配置。
为了进行JavaScript函数调用和/或接收数据，使用JS指令注册此参考很重要。为此，我们将转到类 dotvvmstartup.cs ，在 configureresources 方法中，我们将注册我们的模块及其依赖项：
在这种情况下，我们的模块将为摄像机模块，其中包含一个称为_webcamjs _que的依赖关系，其中包含查看器和照片捕获的所有功能。在这两种情况下
4。 ViewModel设置应用程序逻辑。
对于这种情况，我们唯一的逻辑是定义一个属性来存储图像文件的名称。在ViewModel中，您可以定义其他一些逻辑，以防您需要对所讨论的文件进行其他操作。
5。查看网页。
这是最重要的部分，从这里开始，我们将称为JavaScript功能。作为第一点，我们必须参考我们在 dotvvmstartup.cs 类中在配置中建立的JS模块，在这种情况下，使用 js camera-module 。同样，我们可以建立一个静态命令来指定从js文件中，可以将图像文件名称的数据发送并存储在ViewModel中定义的变量中。
接下来，我们找到网络摄像头区域所在的部分。为此，根据JS文件中建立的内容，我们有一个带有 id =“ my_camera”的Div，然后一个按钮来调用操作“拍摄照片” 或换句话说，JavaScript中的 take_snapshot 函数。
最后，在这里，我们可以在同一逻辑下显示结果，在这种情况下，其ID为 result ，我们可以显示包含包含该变量名称名称的变量的值生成图像的文件。
6。结果。
考虑到到目前为止分析的过程，我们现在可以运行应用程序，拍照并可视化结果。
感谢您的阅读！
我希望您喜欢这篇文章。如果您有任何疑问或想法，那么能够互相交流和交流知识将是一种荣幸。