Angular 17 中无法调用 HikVision Web SDK 函数

Question

对于初学者来说，这是专门针对 HikVision 相机的。

由于 SDK 被编译为纯 JavaScript（除了 jQuery），我当然必须导入

angular.json

中的 JS 文件并在组件 TS 中使用

declare

（在本例中为

camera.component.ts

），但是 SDK本身是按这种格式编译的：

(function () {
  if (window.WebVideoCtrl) {
    return;
  }
  var WebVideoCtrl = (function () {
    // the rest of the code is omitted for reasons
  })();
  // omitted code for reasons
})(this);
// omitted code for reasons

这意味着我需要

declare

:

declare var WebVideoCtrl: any;

除了从那里我无法调用任何函数，无论是从

ngOnInit

还是

ngAfterViewInit

。

作为参考，我决定检查

console.log(WebVideoCtrl)

看看我在这里缺少什么，但输出是

Window

（基本上是

window

对象），这意味着我应该能够从那里调用 JS 函数，我在回调中留下了一些

console.log

来检查函数是否确实被调用，但不幸的是零输出：

WebVideoCtrl.I_InitPlugin({
  // omitted for space
  cbInitPluginComplete: () => {
    console.log("Plugin Initialised.");
    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
      console.log("Plugin Ready!");
      // omitted for space
    }, () => {
      alert("The plugin initialisation failed.");
    });
  }
});

在

"allowJs": true

中插入

tsconfig.json

也没有帮助，因为在这种情况下 Angular 无法找到

WebVideoCtrl

。

顺便说一下，Web SDK 版本 3.3.1。

Answer 1

要将 HikVision Web SDK 集成到 Angular 项目中，您需要确保 SDK 在 Angular 组件中正确加载并可访问。鉴于 SDK 的编译方式，您可能会遇到 SDK 无法按预期识别的问题。

以下分步指南可帮助您集成 SDK 并在 Angular 组件中调用其函数：

---

第1步：将SDK包含在angular.json中

首先，确保 SDK JavaScript 文件包含在您的 angular.json 文件中：

    "scripts": [
      "src/assets/js/WebVideoCtrl.js"
    ]

---

第2步：在组件中声明SDK

在您的 camera.component.ts 文件中，声明 WebVideoCtrl 变量：

declare var WebVideoCtrl: any;

---

第3步：在组件生命周期方法中使用SDK

为了确保 SDK 在使用前完全加载并初始化，您应该在 ngAfterViewInit 生命周期挂钩中与其进行交互。该钩子在组件视图完全初始化后调用。

以下是如何执行此操作的示例：

ngAfterViewInit(): void {
    // Ensure the SDK is available
    if (typeof WebVideoCtrl !== 'undefined') {
      console.log('WebVideoCtrl is available');

      WebVideoCtrl.I_InitPlugin({
        width: 600,   // Set the appropriate width
        height: 400,  // Set the appropriate height
        cbInitPluginComplete: () => {
          console.log('Plugin Initialized.');

          WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(() => {
            console.log('Plugin Ready!');
            // Further code to handle plugin readiness
          }, () => {
            alert('The plugin initialization failed.');
          });
        }
      });
    } else {
      console.error('WebVideoCtrl is not available');
    }
  }

---

第 4 步：确保正确的时机

如果 WebVideoCtrl 仍然不可用，则可能是计时问题，在组件尝试访问脚本之前尚未加载脚本。处理此问题的一种方法是使用脚本加载器或确保在组件代码运行之前正确加载脚本标记。以下是如何动态加载脚本的示例：

    private loadScript(url: string): Promise<void> {
        return new Promise((resolve, reject) => {
          const script = document.createElement('script');
          script.src = url;
          script.onload = () => resolve();
          script.onerror = (err) => reject(err);
          document.body.appendChild(script);
        });
      }

---

总结

1. 将 SDK 包含在 angular.json 中：确保 SDK JavaScript 文件包含在您的项目中。
2. 声明 SDK：使用 declare var WebVideoCtrl: any;在你的组件中。
3. 在ngAfterViewInit中使用SDK：确保组件视图初始化后调用SDK函数。
4. 处理计时问题：如果存在计时问题，则动态加载脚本。

这应该可以帮助您将 HikVision Web SDK 集成到 Angular 项目中并调用其函数，而不会遇到未定义的错误。

---

完整的相机组件

    import { Component, AfterViewInit } from '@angular/core';
    
    @Component({
      selector: 'app-camera',
      templateUrl: './camera.component.html',
      styleUrls: ['./camera.component.css']
    })
    export class CameraComponent implements AfterViewInit {
    
      constructor() { }
    
      ngAfterViewInit(): void {
        this.loadScript('assets/js/WebVideoCtrl.js').then(() => {
          // Ensure the SDK is available
          if (typeof WebVideoCtrl !== 'undefined') {
            console.log('WebVideoCtrl is available');
    
            WebVideoCtrl.I_InitPlugin({
              width: 600,   // Set the appropriate width
              height: 400,  // Set the appropriate height
              cbInitPluginComplete: () => {
                console.log('Plugin Initialized.');
    
                WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(() => {
                  console.log('Plugin Ready!');
                  // Further code to handle plugin readiness
                }, () => {
                  alert('The plugin initialization failed.');
                });
              }
            });
          } else {
            console.error('WebVideoCtrl is not available');
          }
        }).catch(error => {
          console.error('Script loading error:', error);
        });
      }
    
      private loadScript(url: string): Promise<void> {
        return new Promise((resolve, reject) => {
          const script = document.createElement('script');
          script.src = url;
          script.onload = () => resolve();
          script.onerror = (err) => reject(err);
          document.body.appendChild(script);
        });
      }
    }