Blazor Server项目中如何在Razor组件调用WebGazer的JS方法？

问题根源分析 #

你遇到的错误主要来自以下几个操作失误：

• 重复加载webgazer.js：在_Host.cshtml全局引入后，组件内又通过import重复导入，导致脚本重复初始化引发DOM操作冲突（这是removeChild错误的核心原因）。
• JS调用语法错误：JS.InvokeAsync的方法名参数不应带括号，正确写法是传入方法名而非执行语句。
• DisposeAsync方法递归调用自身，会导致无限循环栈溢出。

修正后的代码实现 #

1. 保留_Host.cshtml的脚本引用（无需修改）

确保webgazer.js在blazor.server.js之后加载，保证框架脚本优先初始化：

@page "/"
@namespace CalculatorWebApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

<script src="_framework/blazor.server.js"></script>
<script src="~/js/webgazer.js"></script>

2. 修正Calibration组件代码

@page "/Calibration"
@inject IJSRuntime JS
@implements IAsyncDisposable

<h1>Calibration</h1>

<p>
    <button @onclick="TriggerWebgazer">Start WebGazer</button>
</p>

@code {
    private async Task TriggerWebgazer()
    {
        // 直接调用全局已加载的webgazer.begin方法，无需重复导入
        await JS.InvokeAsync<object>("webgazer.begin");
        
        // 可选：开启调试模式排查问题（如需）
        // await JS.InvokeAsync<object>("webgazer.set", "debug", true);
        // await JS.InvokeAsync<object>("webgazer.showVideoPreview");
    }

    // 正确实现异步释放逻辑，停止WebGazer并清理资源
    public async ValueTask DisposeAsync()
    {
        await JS.InvokeAsync<object>("webgazer.end");
        GC.SuppressFinalize(this);
    }
}

额外注意事项 #

• 摄像头权限：WebGazer需要访问用户摄像头，确保浏览器弹出权限请求时用户选择允许。
• 初始化时机：如果启动仍有问题，可以在组件的OnAfterRenderAsync生命周期中提前配置WebGazer，确保DOM完全加载：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 自定义WebGazer配置示例
        await JS.InvokeAsync<object>("webgazer.set", "accuracy", 0.9);
    }
}

内容的提问来源于stack exchange，提问作者Good Question