feat: 增加 OnInitedAsync 回调方法

Author: ArgoZhang

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

@@ -9,7 +9,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// 海康威视网络摄像机组件 (Websdk Plugin 插件版本)
 /// </summary>
-[JSModuleAutoLoader("./_content/BootstrapBlazor.HikVision/Components/HikVisionWebPlugin.razor.js")]
+[JSModuleAutoLoader("./_content/BootstrapBlazor.HikVision/Components/HikVisionWebPlugin.razor.js", JSObjectReference = true)]
 public partial class HikVisionWebPlugin
 {
     /// <summary>
@@ -54,6 +54,12 @@ public partial class HikVisionWebPlugin
     [Parameter]
     public string? Height { get; set; }
 
+    /// <summary>
+    /// 获得/设置 插件初始化完成后回调方法
+    /// </summary>
+    [Parameter]
+    public Func<bool, Task> OnInitedAsync { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-hik")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -74,6 +80,11 @@ public partial class HikVisionWebPlugin
     /// </summary>
     public bool IsLogined { get; private set; }
 
+    /// <summary>
+    /// 获得 是否正在实时预览
+    /// </summary>
+    public bool IsRealPlaying { get; private set; }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -85,15 +96,6 @@ protected override void OnParametersSet()
         Height ??= "300px";
     }
 
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    /// <returns></returns>
-    protected override async Task InvokeInitAsync()
-    {
-        Inited = await InvokeAsync<bool?>("init", Id) ?? false;
-    }
-
     /// <summary>
     /// 登录方法
     /// </summary>
@@ -103,10 +105,11 @@ protected override async Task InvokeInitAsync()
     /// <param name="password"></param>
     /// <param name="loginType"></param>
     /// <returns></returns>
-    public async Task Login(string ip, int port, string userName, string password, LoginType loginType = LoginType.Http)
+    public async Task<bool> Login(string ip, int port, string userName, string password, LoginType loginType = LoginType.Http)
     {
         ThrowIfNotInited();
-        IsLogined = await InvokeAsync<bool>("login", Id, ip, port, userName, password, (int)loginType);
+        IsLogined = await InvokeAsync<bool?>("login", Id, ip, port, userName, password, (int)loginType) ?? false;
+        return IsLogined;
     }
 
     /// <summary>
@@ -115,19 +118,22 @@ public async Task Login(string ip, int port, string userName, string password, L
     /// <returns></returns>
     public async Task Logout()
     {
+        if (IsLogined)
+        {
+            await InvokeVoidAsync("logout", Id);
+        }
         IsLogined = false;
-        await InvokeVoidAsync("logout", Id);
     }
 
     /// <summary>
     /// 开始实时预览方法
     /// </summary>
     /// <returns></returns>
-    public async Task StartRealPlay()
+    public async Task StartRealPlay(int streamType, int channelId)
     {
-        if (IsLogined)
+        if (IsLogined && !IsRealPlaying)
         {
-            await InvokeVoidAsync("startRealPlay", Id);
+            IsRealPlaying = await InvokeAsync<bool?>("startRealPlay", Id, streamType, channelId) ?? false;
         }
     }
 
@@ -137,9 +143,13 @@ public async Task StartRealPlay()
     /// <returns></returns>
     public async Task StopRealPlay()
     {
-        if (IsLogined)
+        if (IsLogined && IsRealPlaying)
         {
-            await InvokeVoidAsync("stopRealPlay", Id);
+            var result = await InvokeAsync<bool?>("stopRealPlay", Id) ?? false;
+            if (result)
+            {
+                IsRealPlaying = false;
+            }
         }
     }
 
@@ -150,4 +160,19 @@ private void ThrowIfNotInited()
             throw new InvalidOperationException("HikVision Web Plugin not inited");
         }
     }
+
+    /// <summary>
+    /// 触发 <see cref="OnInitedAsync"/> 回调方法由 JavaScript 调用
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerInited(bool inited)
+    {
+        Inited = inited;
+
+        if (OnInitedAsync != null)
+        {
+            await OnInitedAsync(inited);
+        }
+    }
 }

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

@@ -1,13 +1,14 @@
 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) {
+export async function init(id, invoke) {
     const el = document.getElementById(id);
     if (el === null) {
         return;
     }
 
-    return await initVision(id);
+    const inited = await initVision(id);
+    await invoke.invokeMethodAsync('TriggerInited', inited);
 }
 
 export { login, logout, startRealPlay, stopRealPlay }

src/components/BootstrapBlazor.HikVision/wwwroot/hikvision.js

@@ -33,7 +33,7 @@ const initWindow = id => {
         bWndFull: true,
         iWndowType: 1,
         cbSelWnd: function (xmlDoc) {
-            result.iWndIndex = getTagNameFirstValue(xmlDoc, "SelectWnd")
+            result.iWndIndex = parseInt(getTagNameFirstValue(xmlDoc, "SelectWnd"));
         },
         cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
 
@@ -63,7 +63,7 @@ const initWindow = id => {
 export async function login(id, ip, port, userName, password, loginType) {
     const vision = Data.get(id);
     const { inited, logined } = vision;
-    if (inited !== true) {
+    if (inited !== true || ip.length === 0 || port <= 0 || userName.length === 0 || password.length === 0) {
         return false;
     }
     if (logined === true) {
@@ -95,9 +95,9 @@ export async function login(id, ip, port, userName, password, loginType) {
 
     return new Promise((resolve, reject) => {
         const handler = setInterval(async () => {
-            if (vision.logined !== void 0) {
+            if (vision.logined !== null) {
                 clearInterval(handler)
-                resolve(vision);
+                resolve(vision.logined);
             }
         }, 16);
     });
@@ -169,29 +169,18 @@ const getChannelInfo = vision => {
     });
 }
 
-export function logout(id) {
+export async function logout(id) {
     const vision = Data.get(id);
     const { szDeviceIdentify, logined } = vision;
     if (logined !== true) {
         vision.logined = false;
         return;
     }
 
-    let completed = null;
-    WebVideoCtrl.I_Logout(szDeviceIdentify).then(() => {
-        completed = true;
-    }, () => {
-        completed = false;
-    });
+    stopRealPlay(id);
 
-    return new Promise((resolve, reject) => {
-        const handler = setInterval(() => {
-            if (completed !== null) {
-                clearInterval(handler)
-                resolve();
-            }
-        }, 16);
-    });
+    await WebVideoCtrl.I_Logout(szDeviceIdentify);
+    vision.logined = false;
 }
 
 export async function startRealPlay(id, iStreamType, iChannelID) {
@@ -247,11 +236,14 @@ export async function startRealPlay(id, iStreamType, iChannelID) {
 
 export function stopRealPlay(id) {
     const vision = Data.get(id);
-    const { iWndIndex, szDeviceIdentify } = vision;
+    const { iWndIndex, realPlaying } = vision;
+
+    if (realPlaying !== true) {
+        return true;
+    }
 
     const oWndInfo = WebVideoCtrl.I_GetWindowStatus(iWndIndex);
     let completed = null;
-    console.log(oWndInfo);
     if (oWndInfo !== null) {
         WebVideoCtrl.I_Stop({
             success: function () {
@@ -289,12 +281,12 @@ export function dispose(id) {
 
 }
 
-const getTagNameFirstValue = (xmlDoc, tagName) => {
+const getTagNameFirstValue = (xmlDoc, tagName, defaultValue = '0') => {
     const tags = xmlDoc.getElementsByTagName(tagName);
     if (tags.length > 0) {
         return tags[0].textContent;
     }
-    return null;
+    return defaultValue;
 }
 
 const getTagNameValues = (xmlDoc, tagName) => {