在angular项目中集成海康视频web插件 V1.4.1

在近期的angular项目中，需要跟海康iSecure Center平台对接，实现监控点视频的实时和录像播放功能。

对接过程并不顺畅。

本来已经通过视频流转http-flv协议，利用flvjs实现了基于Html5无插件的实时视频播放功能。

但是在对接录像时，由于需要录像时间轴控制的能力，原计划想用HLS协议进行对接，但是海康的技术回复说我们采购的平台里，录像接口不支持HLS协议……wtf……。无奈项目紧迫，只能退而求其次，使用海康提供的视频web插件来实现了。

看了半天文档和demo源码，由于网上找不到angular对接此插件的相关技术参考，只能自己摸索实现。幸好天不负人，还是顺利对接了。

过程曲折，不想细谈，在此只记录一下对接的关键步骤和代码，以供将来有需要的兄弟们参考。

 

 

1）首先，你得安装海康视频web插件。下载链接如下

https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10

唉，几十兆的安装文件……，没办法，能用就行，为了交差。

确定安装好压缩包中bin下的exe文件。

 

 

2）将压缩包中三个关键js文件拷贝到angular项目assets目录下，

 

 

3）在项目的index.html文件中，添加三个js文件的引用

<script src="assets/js/jquery-1.12.4.min.js"></script>

<script src="assets/js/jsencrypt.min.js"></script>

<script src="assets/js/jsWebControl-1.0.0.min.js"></script>

为啥放到这里？

……因为放到我们项目的styles.less里，有冲突，不清楚其他项目是否可以，如果不行，参考这个步骤来。

 

 

4) 编写hikWebProxy.js文件，用于执行JS接口的调用，代码比较长，截取一部分展示，后附资源。

 

 

5）自定义Directive，实现调用海康web接口服务功能，代码也在附件中。

 

 

6）使用这个Directive，绑定到想要显示视频窗口的元素上。

 

<div class="dialog-content" [id]="'videoInMap' + code" appHikVideo [videoData]="$videoData"></div>

 

将平台接口获得的监控点 ID ，通过videoData传给directive对象。

如果要播放录像，还需要在data中传number类型startTime和endTime（通过Date.getTime()获得）。

注意：多个视频播放控件同时展示时，需要为上面的div设置不同的id，海康插件通过id来绑定这个div。

 

一旦videoData绑定成功，则视频自动开始播放。

抛砖引玉，希望能帮到有需要的童靴。代码文件可以在我的下载资源中找到。