javascript - 在 Blazor Web Assembly 应用程序中显示本地计算机摄像头源
问题描述
我已将我的问题提炼为样板 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");
}
}
我有一个这样的 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 元素?
解决方案
我相信您在基于 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();
});
}
}
推荐阅读
- python - 如何根据熊猫的范围在列中获取布尔值
- python - 蟒蛇其他:什么都不做
- node.js - 如何在猫鼬模式中使用 uuid 创建自定义 _id
- excel - 将数据从一个 Excel 工作表提取到另一个工作表
- postgresql - 将 las 信息导入到 postgresql/postgis 的 PDAL 管道
- wpf - 响应式 UI 替代 CanExecute (WPF) 的参数
- android - ViewModel 中的资源 ID?
- python - 如何自定义 mplfinance.plot?
- python-3.x - 在循环中休息并等待该人继续
- javascript - 自上次使用 JavaScript 登录以来的天数