在 Blazor Web 程序集应用中显示本地计算机相机源

Question

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

该项目直接来自向导，并添加了以下代码。

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页面：

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# 代码块路由绑定，或者我可以像我在这里所做的那样？将 Javascript 直接绑定到 HTML 元素？

Answer 1

我相信你在基于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();
});
}
}

Answer 2

问题是使用Chrome。

它在MS Edge中没有问题。

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

来回答这个问题。否，绑定不必遍历 c# 代码。javascript可以直接连接到HTML。