海康摄像头设备对接——js接入自己系统的流程方法_vue hcwebsdkplugin

本次对接海康摄像头的系统前端采用的是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 ">
1
2

第3步：js代码vue中data

data () {
    return {
		g_iWndIndex:0
	}
}
1
2
3
4
5

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

	this.videoInitPlugin();
1

第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();
         }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

第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();//窗口销毁和关闭
    }
  },
1
2
3
4
5
6
7

最后的效果如下图

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