feat: 增加 HikVision 组件

Author: ArgoZhang

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);
+}