feat(HikVision): add HikVision component

BootstrapBlazor.Extensions.slnx

@@ -43,6 +43,7 @@
     <Project Path="src/components/BootstrapBlazor.FontAwesome/BootstrapBlazor.FontAwesome.csproj" />
     <Project Path="src/components/BootstrapBlazor.Gantt/BootstrapBlazor.Gantt.csproj" />
     <Project Path="src/components/BootstrapBlazor.Graph/BootstrapBlazor.Graph.csproj" />
+    <Project Path="src/components/BootstrapBlazor.HikVision/BootstrapBlazor.HikVision.csproj" Id="62fa4e31-4a04-4c99-9074-3ea0c037e244" />
     <Project Path="src/components/BootstrapBlazor.Holiday/BootstrapBlazor.Holiday.csproj" />
     <Project Path="src/components/BootstrapBlazor.Html2Image/BootstrapBlazor.Html2Image.csproj" />
     <Project Path="src/components/BootstrapBlazor.Html2Pdf.Playwright/BootstrapBlazor.Html2Pdf.Playwright.csproj" />

src/components/BootstrapBlazor.HikVision/BootstrapBlazor.HikVision.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>10.0.0-beta01</Version>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Graph</PackageTags>
+    <Description>Bootstrap UI components extensions of Graph</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Using Include="Microsoft.JSInterop" />
+  </ItemGroup>
+
+</Project>

src/components/BootstrapBlazor.HikVision/Component1.razor

@@ -0,0 +1,3 @@
+<div class="my-component">
+    This component is defined in the <strong>BootstrapBlazor.HikVision</strong> library.
+</div>

src/components/BootstrapBlazor.HikVision/Component1.razor.css

@@ -0,0 +1,6 @@
+.my-component {
+    border: 2px dashed red;
+    padding: 1em;
+    margin: 1em 0;
+    background-image: url('background.png');
+}

src/components/BootstrapBlazor.HikVision/Components/HikVision.razor

@@ -0,0 +1,20 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString" id="@Id">
+    <div id="@PreviewId" class="bb-hik-preview" style="width: 500px; height: 300px;"></div>
+    <div class="bb-hik-controls">
+        <button class="btn btn-primary bb-hik-login">
+            <span>登录</span>
+        </button>
+        <button class="btn btn-primary bb-hik-logout">
+            <span>退出</span>
+        </button>
+        <button class="btn btn-primary bb-hik-start">
+            <span>开始预览</span>
+        </button>
+        <button class="btn btn-primary bb-hik-stop">
+            <span>停止预览</span>
+        </button>
+    </div>
+</div> 

src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.cs

@@ -0,0 +1,18 @@
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 海康威视网络摄像机组件
+/// </summary>
+[JSModuleAutoLoader("./_content/BootstrapBlazor.HikVision/Components/HikVision.razor.js")]
+public partial class HikVision
+{
+    private string PreviewId => $"{Id}_preview";
+
+    private string? ClassString => CssBuilder.Default("bb-hik")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+}

src/components/BootstrapBlazor.HikVision/Components/HikVision.razor.js

@@ -0,0 +1,45 @@
+import { init as initVision, login, logout, startRealPlay, stopRealPlay, dispose as disposeVision } from '../hikvision.js';
+import EventHandler from '../../BootstrapBlazor/modules/event-handler.js';
+
+export async function init(id) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    const previewId = `${id}_preview`;
+    await initVision(previewId);
+
+    const controls = el.querySelector('.bb-hik-controls');
+    if (controls) {
+        EventHandler.on(controls, 'click', '.bb-hik-login', async e => {
+            console.log('login');
+            await login(previewId, '47.121.113.151', 9980, 'admin', 'vhbn8888', 1)
+        });
+        EventHandler.on(controls, 'click', '.bb-hik-logout', e => {
+            console.log('logout');
+            logout(previewId);
+        });
+        EventHandler.on(controls, 'click', '.bb-hik-start', e => {
+            console.log('start');
+            startRealPlay(previewId);
+        });
+        EventHandler.on(controls, 'click', '.bb-hik-stop', e => {
+            console.log('stop');
+            stopRealPlay(previewId);
+        });
+    }
+}
+
+export function dispose(id) {
+    const el = document.getElementById(id);
+    if (el !== null) {
+        const controls = el.querySelector('.bb-hik-controls');
+        if (controls) {
+            EventHandler.off(controls, 'click');
+        }
+    }
+
+    const previewId = `${id}_preview`;
+    disposeVision(previewId);
+}

src/components/BootstrapBlazor.HikVision/Extensions/ServiceCollectionExtensions.cs

@@ -0,0 +1,25 @@
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using Microsoft.Extensions.DependencyInjection.Extensions;
+
+namespace Microsoft.Extensions.DependencyInjection;
+
+/// <summary>
+/// BootstrapBlazor 服务扩展类
+/// </summary>
+public static class ServiceCollectionExtensions
+{
+    /// <summary>
+    /// 增加海康威视网络摄像机 Web 服务
+    /// </summary>
+    /// <param name="services"></param>
+    /// <returns></returns>
+    public static IServiceCollection AddBootstrapBlazorHikVision(this IServiceCollection services)
+    {
+        services.TryAddScoped<IHikVision, DefaultHicVision>();
+        return services;
+    }
+}

src/components/BootstrapBlazor.HikVision/LoginType.cs

@@ -0,0 +1,21 @@
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 登录方式
+/// </summary>
+public enum LoginType
+{
+    /// <summary>
+    /// http 方式
+    /// </summary>
+    Http = 1,
+
+    /// <summary>
+    /// https 方式
+    /// </summary>
+    Https = 2
+}

src/components/BootstrapBlazor.HikVision/Services/DefaultHicVision.cs

@@ -0,0 +1,71 @@
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+sealed class DefaultHicVision(IJSRuntime jsRuntime) : IHikVision
+{
+    private JSModule _module = default!;
+    private bool _initialized;
+    private bool _logined;
+
+    public async Task<bool> Login(string ip, int port, string userName, string password, LoginType loginType = LoginType.Http)
+    {
+        await LoadAsync();
+
+        if (!_logined)
+        {
+            _logined = await _module.InvokeAsync<bool>("login", ip, port, userName, password, (int)loginType);
+        }
+
+        return _logined;
+    }
+
+    public async Task<bool> Logout(string ip, int port)
+    {
+        if (_logined)
+        {
+            _logined = await _module.InvokeAsync<bool>("logout");
+        }
+
+        return _logined;
+    }
+
+    public async Task StartRealPlay()
+    {
+        if (_logined)
+        {
+            await _module.InvokeVoidAsync("startRealPlay");
+        }
+    }
+
+    public async Task StopRealPlay()
+    {
+        if (_logined)
+        {
+            await _module.InvokeVoidAsync("stopRealPlay");
+        }
+    }
+
+    private async Task LoadAsync()
+    {
+        if (!_initialized)
+        {
+            var module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/BootstrapBlazor.HikVision/hikvision.js");
+            _module = new JSModule(module);
+
+            _initialized = true;
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_module != null)
+        {
+            await _module.InvokeVoidAsync("dispose");
+            await _module.DisposeAsync();
+        }
+        GC.SuppressFinalize(this);
+    }
+}

src/components/BootstrapBlazor.HikVision/Services/IHikVision.cs

@@ -0,0 +1,42 @@
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 海康威视网络摄像机接口
+/// </summary>
+public interface IHikVision : IAsyncDisposable
+{
+    /// <summary>
+    /// 登录方法
+    /// </summary>
+    /// <param name="loginType">登录方式 <see cref="LoginType"/> 实例</param>
+    /// <param name="ip">设备 Ip 地址</param>
+    /// <param name="port">设备端口</param>
+    /// <param name="userName">用户名</param>
+    /// <param name="password">密码</param>
+    /// <returns></returns>
+    Task<bool> Login(string ip, int port, string userName, string password, LoginType loginType = LoginType.Http);
+
+    /// <summary>
+    /// 登出方法
+    /// </summary>
+    /// <param name="ip">设备 Ip 地址</param>
+    /// <param name="port">设备端口</param>
+    /// <returns></returns>
+    Task<bool> Logout(string ip, int port);
+
+    /// <summary>
+    /// 开始实时预览画面方法
+    /// </summary>
+    /// <returns></returns>
+    Task StartRealPlay();
+
+    /// <summary>
+    /// 停止实时预览画面方法
+    /// </summary>
+    /// <returns></returns>
+    Task StopRealPlay();
+}

src/components/BootstrapBlazor.HikVision/_Imports.razor

@@ -0,0 +1 @@
+@using Microsoft.AspNetCore.Components.Web