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

Posted

技术标签:

【中文标题】在 Blazor Web Assembly 应用程序中显示本地计算机摄像头源【英文标题】:Displaying the local machine camera feed in a Blazor Web Assembly app 【发布时间】:2020-09-10 20:06:25 【问题描述】:

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

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

    我已将 Index.razor 页面更改为:
@page "/"
@inject IJSRuntime JSRuntime;
@using System.Drawing;
@using System.IO;

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

<video id="video"   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元素?

【问题讨论】:

你可以忘记使用 System.Drawing,我很惊讶它甚至可以编译。这真的是 Blazor WebAssembly 吗? 是的,它的 Blazor Web 程序集。 只是一个猜测,但也许您可以使用 @ref 移交视频元素,而不是使用 getElementById() 再次获取它。虽然两者都应该工作。 不走运。如果我在 chrome 开发工具中检查页面,它会将视频 src 显示为空。我一定不能直接从 Blazor 中的 javascript 分配视频 src。 还是很奇怪。所有相关部分都在 JS 中,Blazor 只处理按钮单击。可以肯定的是,创建一个纯 JS 模型并在 >1 浏览器中进行测试。 【参考方案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();
        );
    

【讨论】:

【参考方案2】:

问题在于使用 Chrome。

它在 MS Edge 中没有问题。

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

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

【讨论】:

您使用的是哪个版本的 MS Edge?新的 chromium 版本还是旧版本的 Edge?

以上是关于在 Blazor Web Assembly 应用程序中显示本地计算机摄像头源的主要内容,如果未能解决你的问题,请参考以下文章

Blazor Web Assembly 中的 window.focus/blur 事件

带有 Azure B2C 的 Blazor Web Assembly 应用程序总是在页面加载后立即尝试进行身份验证

Blazor Web Assembly App .Net Core Hosted:发布运行时错误

如何在 Blazor Web Assembly 中将 c# 变量传递给 javascript

在刷新页面之前,Blazor Web Assembly (wasm) 不会使客户端 cookie 过期

明晚7点半 | Blazor + WebAssembly开启Web开发新体验