海康威视摄像头web二次开发（angular）

海康威视官网有提供二次开发的web开发包，主要由js，html组成，但是开发包更新迭代太快了，甲方的摄像头还是老版本，幸好甲方提供了它们的开发包（内涵demo，doc）。

测试环境

在web包里面里面有demo>cn文件夹，内含js、html、css文件，直接点击html文件，在浏览器中打开，可以直接使用，输入ip，port，username，password，点击登录，点击预览，可以查看对应的监控视频，也可以在操作信息里查看操作步骤成功与否。

可以成功显示，说明浏览器环境，摄像头信息及硬件情况都良好，就可以开始二次开发了。

调试方法

文档！文档！文档！在这里先强调一下官方的开发文档的重要性，并不复杂，看一下里面对应操作的方法，可以知道各个方法的参数的具体含义，有助于加速开发。

调试：先确认自己要使用的是那些功能，然后先在cn文件夹下的demo.html进行删减，保留自己想要的部分后刷新测试，确保代码还能正常调用显示监控，然后就可以把相应的js方法从demo.js文件中摘出来了。

我觉得最终要的两个方法就是：登录、预览。执行这两个方法以后就可以在页面上看到视屏了。

应用于angular

引用js

在index.html页面的body标签中引入2个js文件。

编写js

主要就是摘取了demo.js里面的方法，按需求稍稍改动，最后导出给ts引用。

编写ts

在ts中，主要就是类型的引入和新建，然后就可以调用对象的方法了。

html

一个div即可，就是这个div的id是嵌入播放插件必须的。

<div id="divPlugin" class="plugin">div> 

遇到的坑

1. 浏览器选择。一般的警告错误就是说WebComponent.exe未安装，查了一些资料，大家都认为IE浏览器比较好兼容，在这里我推荐360极速浏览器（极速模式），因为我的IE也用不了。
2. 登录成功，预览成功（在console打印了日志），但是界面上却没有视屏显示（打包后，打包前在自己电脑上是可以的），初步估计是打包过程中css出现了问题，于是在代码中给视屏的标签强制设置了css。
   

代码

import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import * as HikWeb from '../../../../assets/hkjs/hkwsWebVideo.js';
import { Router, ActivatedRoute, Event, NavigationStart, NavigationEnd } from '@angular/router';
import { ReportsAndBoardDataOperaterService } from '../../reports-and-board-data-operater.service.js';
import { YgMessageServiceService } from '../../../ygcommon/yg-message-service.service.js';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
  selector: 'app-monitor',
  templateUrl: './monitor.component.html',
  styleUrls: ['./monitor.component.css']
})
export class MonitorComponent implements OnInit, OnDestroy {

  hikWebProxy: HikWeb.HkwsWebVideo = new HikWeb.HkwsWebVideo();
  ipList = [{ip: 'x.x.x.x', channel: 'xxx'}, {ip: 'x.x.x.x', channel: 'xxx'}];

  selectIpList = [];

  iWndType = 1; // 窗口分割数
  selectDisabled = false;
  fullscreen = false;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private operator: ReportsAndBoardDataOperaterService,
    private srv: YgMessageServiceService,
    private msgService: NzMessageService
  ) {
  }

  ngOnInit() {
    this.srv.get().subscribe((result) => {
      this.fullscreen = result;
    });
    this.route.queryParams.subscribe((params) => {
      const code = params.WorkShopCode;
      if (code === 'DLSH-ZP-001') {
        this.selectIpList = [{ip: 'x.x.x.x', channel: 'xxx'}, {ip: 'x.x.x.x', channel: 'xxx'}];
      } else if (code === 'DLSH-ZP-002') {
        this.selectIpList = [];
      } else {
        this.msgService.warning('该产线不存在对应摄像地址IP');
        this.selectIpList = [];
      }
      if (this.selectIpList.length) {
        this.login();
      }
    });
  }

  ngOnDestroy() {
    this.logout();
  }

  login() {
    // document.getElementById('divPlugin').style.display = 'block';
    const len = this.selectIpList.length;
    if (len) {
      if (len === 1) {
        this.iWndType = 1;
      } else if (len <= 4) {
        this.iWndType = 2;
      } else if (len <= 9) {
        this.iWndType = 3;
      } else {
        this.iWndType = 4;
      }
      this.hikWebProxy.init(this.selectIpList, this.iWndType);
      this.hikWebProxy.changeWndNum(this.iWndType);
      this.selectDisabled = true;
      for (let index = 0; index < 5; index++) {
        if (document.getElementsByTagName('embed').length) {
          document.getElementsByTagName('embed')[0].style.position = 'relative';
          document.getElementsByTagName('embed')[0].style.zIndex = '9999';
          break;
        }
      }
    } else {
      this.msgService.warning('请先选择ip地址！');
    }
  }

  logout() {
    this.hikWebProxy.clickStopRealPlay(this.selectIpList);
    this.hikWebProxy.clickLogout(this.selectIpList);
    this.selectDisabled = false;
    // document.getElementById('divPlugin').style.display = 'none';
  }

  closeCurrentUrl() {
    const firstTags = document.getElementsByClassName('reuseTab-col active ng-star-inserted');
    if (firstTags.length) {
      const secondTags = firstTags[0].getElementsByTagName('i');
      if (secondTags) {
        const currentTab = secondTags[0];
        currentTab.click();
      }
    }
    const url = '../ComprehensiveBoard';
    this.router.navigate([url], {relativeTo: this.route}).then(() => {
      this.logout();
      this.selectIpList = [];
    });
  }

}