本次对接海康摄像头的系统前端采用的是VUE2-CLI，而海康硬件对接前端接入客服提供的是jq+原生版本，如果需要官方客服提供的对接demo（包含接口文档），可以下拉到底部附上了下载云盘资源，

接下来记录整个对接的代码流程——

第1步：把海康提供的播放器HCWebSDKPlugin.exe插件放到到自己的服务器某个已发布的系统中，生成一个下载地址，这个地址用于后面的代码中，代码中检测用户浏览器是否安装此播放器插件，未安装则提供该下载地址供用户下载。

第2步：在 public目录下index.html文件中引入jq和海康的视频播放webVideoCtrl.js库

<script src=" .. /haikang/jquery - 1.7.1.min.js "></script>
<script src=" .. /haikang/webVideoCtrl.js ">

第3步：js代码vue中data

data () {
    return {
		g_iWndIndex:0
	}
}

第4步：js代码vue生命周期-mounted

	this.videoInitPlugin();

第5步：js代码vue中method

videoInitPlugin(){
		let that = this;
        var iRet = WebVideoCtrl.I_CheckPluginInstall();
        //console.log("插件是否安装："+iRet);
        if (iRet === -1 || iRet == false) {
          that.$message.info("您还未安装过插件，请安装WebComponentsKit.exe插件！");
          window.open("https://www.xxxx.com:8080/static/haikang/HCWebSDKPlugin.exe", "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
          that.onCancelVideo();
          return;
        }
        this.initPlugin()
    },
initPlugin () { //插件初始化
        let that = this;
        let par = (new Function("return " + that.param.params))();
        that.companyVideoData.IP = that.param.deviceId;//ip赋值
        that.companyVideoData.Port = that.param.addr;//端口赋值
        that.companyVideoData.Username = par.username;//连接用户名赋值
        that.companyVideoData.Password = par.password;//连接密码赋值
        $("#video-container").width(900);//容器初始化赋值宽度
        $("#video-container").height(500);//容器初始化赋值高度
        WebVideoCtrl.I_InsertOBJECTPlugin("video-container").then(() => {
            // 检查插件是否最新
            WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                    that.$message.warning("检测到新的插件版本，双击下载文件HCWebSDKPlugin.exe升级！");
                  window.open("https://www.XXXX.com:8080/static/haikang/HCWebSDKPlugin.exe", "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
                    that.onCancelVideo();
                    return;
                }
            });
            }, () => {
            that.onCancelVideo();
            return;
        });
        WebVideoCtrl.I_InitPlugin({
          bWndFull: true,
          iWndowType: 1,//单画面展示模式
          //bDebugMode:true,  //调试时可以放开调试模式
          cbSelWnd: '<?xml version="1.0"?><RealPlayInfo><SelectWnd>0</SelectWnd></RealPlayInfo>'
        });
        setTimeout(function() {
            that.clickLogin(that.companyVideoData);
        }, 1000);

    },
    
clickLogin(data) {
        let that = this;
        if ("" == data.IP || "" == data.Port) {
            that.$message.warning("ip或者端口不能为空！");
            that.onCancelVideo();
            return;
        }
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
        if (oWndInfo != null) {// 已经在播放了，先停止再登出
            WebVideoCtrl.I_Stop();
            WebVideoCtrl.I_Logout(data.IP+"_"+data.Port);
        }
        WebVideoCtrl.I_Login(data.IP, 1, data.Port, data.Username, data.Password, {
                timeout: 3000,
                success: function (xmlDoc) {
                    setTimeout(function() {
                        that.getChannelInfo();
                    }, 1000);
                },
                error: function (oError) {
                    console.log(" 登录失败！");
                    //console.log(oError);
                }
            });
    },

getChannelInfo(){ //获取通道
        var that = this;
        // 模拟通道
        WebVideoCtrl.I_GetAnalogChannelInfo(that.companyVideoData.IP+"_"+that.companyVideoData.Port, {
            async: false,
            success: function (xmlDoc) {
                var oChannels = $(xmlDoc).find("VideoInputChannel");
                 that.startRealPlay(oChannels);
                 return;
            },
            error: function () {
                 //console.log("获取模拟通道失败！"+WebVideoCtrl.I_GetLastError());
                 // 尝试数字通道
                 WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP+"_"+that.companyVideoData.Port, {
                     async: false,
                     success: function (xmlDoc) {
                         var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
                         that.startRealPlay(oChannels);
                         return;
                     },
                     error: function () {
                         WebVideoCtrl.I_GetLastError()
                         //console.log("获取数字通道失败！");
  							// 尝试零通道                      
							WebVideoCtrl.I_GetZeroChannelInfo(that.companyVideoData.IP+"_"+that.companyVideoData.Port, {
                              async: false,
                              success: function (xmlDoc) {
                                  var oChannels = $(xmlDoc).find("ZeroVideoChannel");
                                  that.startRealPlay(oChannels);
                                  return;
                              },
                              error: function () {
                                   //console.log("获取零通道失败！"+WebVideoCtrl.I_GetLastError())
                              }
                          });
                     }
                 });
            }
        });
    },

startRealPlay(oChannels) { // 开始播放监控
        let that = this;
        let szIP = that.companyVideoData.IP+"_"+that.companyVideoData.Port;//ip地址_port
        let iChannelID = oChannels.length;//播放通道号
        var	iStreamType = 1;
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
        if (oWndInfo != null) {// 已经在播放了，先停止
            WebVideoCtrl.I_Stop(0);
        }
        WebVideoCtrl.I_StartRealPlay(szIP, {
            iStreamType: iStreamType,
            iChannelID: iChannelID,
            success: function (res) {
                console.log(res);
            },
            error: function (error) {
                console.log(error);
            }
        });
    },

onCancelVideo(){
        let that = this;
         if(WebVideoCtrl.I_GetWindowStatus().length>0){
            WebVideoCtrl.I_StopAllPlay ();
WebVideoCtrl.I_Logout(that.companyVideoData.IP+"_"+that.companyVideoData.Port);
            WebVideoCtrl.I_DestroyPlugin();
         }
    },

第6步：js代码vue生命周期-mounted

destroyed(){
    if( WebVideoCtrl.I_GetWindowStatus().length>0){
        WebVideoCtrl.I_StopAllPlay ();
        WebVideoCtrl.I_Logout(that.companyVideoData.IP+"_"+that.companyVideoData.Port);
        WebVideoCtrl.I_DestroyPlugin();//窗口销毁和关闭
    }
  },

最后的效果如下图

海康客服提供的demo对接包，资源下载地址——
百度网盘链接：https://pan.baidu.com/s/1ZLB8wr6cfmf3mWp2WrFU2g
提取码：zhao