在Blazor Web Assembly应用程序中显示本地机器摄像头提要 [英] Displaying the local machine camera feed in a Blazor Web Assembly app

问题描述

我已将问题简化为样板的Blazor Web Assembly应用程序.

I've distilled my issue down to a boilerplate Blazor Web Assembly app.

该项目直接进入向导，并添加了以下代码.

The project is straight out of the wizard, with the below code added.

1. 我已将Index.razor页面更改为此:

@page "/"
@inject IJSRuntime JSRuntime;
@using System.Drawing;
@using System.IO;

<div>
    <h1>Video Test</h1>
</div>

<video id="video" width="640" height="480" autoplay></video>

<div>
    <button type="button" class="btn btn-primary" @onclick="StartVideo">Click Me</button>
</div>


@code {

    async Task StartVideo()
    {
        await JSRuntime.InvokeVoidAsync("startVideo");
    }

}

我有一个这样的JavaScript页面:

I have a JavaScript page attached like this:

function startVideo() {
    alert("Test Alert!");

    var video = document.getElementById('video');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
            video.src = window.URL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        });
    }
}

该应用程序编译没有问题.当我运行它并单击按钮时，我会收到警报.我添加警报以确认Java Script实际上正在运行.

The app compiles without issue. When I run it and click the button I get the alert. I added to alert to confirm the Java Script was actually being run.

Chrome浏览器要求获得我授予的使用我的网络摄像头的许可.

The Chrome browser asks for permission to use my webcam, which I grant.

我的网络摄像头激活，(我的计算机上有一个凸轮，当凸轮处于活动状态时会显示一个指示灯).

My webcam activates, (my computer has an indicator light to display when the cam is active).

但是，页面上没有任何显示.我猜想通过将相机流绑定到标签可以很简单地完成操作.在下一个迭代中，我将为视频提要拍摄快照.目前，我只希望将供稿显示在页面上.

However, nothing shows up on the page. I'm guessing its something straightforward with binding my camera stream to the tag. In my next iteration, I will be taking snapshots of the video feed. For the moment, I only want the feed displayed on the page.

我是否必须通过C#代码块来路由绑定，还是可以像在这里所做的那样进行路由?将Javascript直接绑定到HTML元素吗?

Do I have to route the binding through the C# code block, or can I, as I have done here? Bind the Javascript directly to the HTML element?

推荐答案

问题是使用Chrome.

The problem was using Chrome.

它在MS Edge中正常工作.

It worked without issue in MS Edge.

我在纯HTML页面上尝试了相同的代码，没有包含Blazor元素，并且得到了相同的结果.这是由我的Chrome浏览器中的设置或笔记本电脑系统上的设置引起的.

I tried the same code on a plain HTML page, with no Blazor elements included and got the same result. It is being caused by a setting in my Chrome browser, or on my laptop system settings.

回答问题.不，绑定不必遍历C#代码. javascript可以直接连接到HTML.

To answer the question. No, the binding doesn't have to go through the c# code. The javascript can directly connect to the HTML.

这篇关于在Blazor Web Assembly应用程序中显示本地机器摄像头提要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！