在 Blazor Web Assembly 应用程序中显示本地机器摄像头源

Question

我已将我的问题提炼为样板 Blazor Web Assembly 应用程序。

项目直接从向导中出来，添加了以下代码。

我已将 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");
    }

}

我有一个 Java 附加的脚本页面，如下所示：

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 脚本实际上是运行。

Chrome 浏览器要求获得使用我的网络摄像头的权限，我同意了。

我的网络摄像头激活，（当摄像头激活时，我的电脑有一个指示灯显示）。

但是，页面上没有显示任何内容。我猜想将我的相机流绑定到标签是一件很简单的事情。在我的下一次迭代中，我将拍摄视频源的快照。目前，我只想在页面上显示提要。

我必须通过 C# 代码块路由绑定，还是可以像我在这里所做的那样？将 Java 脚本直接绑定到 HTML 元素？

Answer 1

问题是使用 Chrome。

它在 MS Edge 中运行没有问题。

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

回答问题。不，绑定不必通过 c# 代码。 javascript可以直接连接到HTML。

Answer 2

我认为您在基于 chromium 的浏览器中遇到问题，因为 createObjectURL 已被弃用。 Chrome 和新的 MS Edge 浏览器（使用 chromium）所需要的只是包含 srcObject 和 play 的行。我在 Chrome、Firefox 和新版 Edge 中测试了以下代码。

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

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

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

在 Blazor Web Assembly 应用程序中显示本地机器摄像头源

Displaying the local machine camera feed in a Blazor Web Assembly app

html

javascript

blazor

blazor-client-side

asp.net-blazor