海康威视官网有提供二次开发的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>
遇到的坑
-
浏览器
选择。一般的警告错误就是说WebComponent.exe未安装，查了一些资料，大家都认为IE浏览器比较好兼容，在这里我推荐360极速浏览器（极速模式），因为我的IE也用不了。 -
登录成功，预览成功（在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 = [];
});
}
}