vue集成海康威视视频监控(海康威视web开发接口文档)

vue+js+海康Web开发包连接海康摄像机1.登录海康威视开放平台下载Web开发包。下载时需要先登录海康威视账号。如果您没有，您需要先注册一个。

海康威视开放平台Web开发包下载地址：

2.在vue项目中引入web开发包

下载并解压后的包目录如下：

将webs下的整个codebase文件夹和jquery-1.7.1.min.js复制到public文件夹下，并在index.html下引入相应的文件。只需要引入jquery-1.7.1.min.js和jquery-1.7.1.min.js即可。webVideoCtrl.js

!--海康插件介绍--scriptsrc='./jquery-1.7.1.min.js'/scriptscriptsrc='./codebase/encryption/AES.js'/scriptscriptsrc='./codebase/加密/cryptico.min.js'/scriptscriptsrc='./codebase/encryption/crypto-3.1.2.min.js'/scriptscriptid='videonode'src='./codebase/webVideoCtrl.js'/script

3.安装webs/codebase/WebComponentsKit.exe

4.运行解压后的nginx-1.10.2/start.bat。nginx启动端口可以自行修改；这里默认是80。为了方便在开发环境中测试，我将nginx-1.10.2放入项目和public文件中。同级文件夹，所以nginx的根路径设置为./dist

开发环境配置：在vue.config.js文件下配置nginx对应的反向代理。以下webSocketVideoCtrlProxy反向配置尚未配置成功。因此开发过程中无法观看视频，但可以调用登录等与websocket无关的接口。想要成功串流观看视频，首先要打包部署。有了解的朋友可以告诉你。

'/ISAPI':{target:'',//本地nginx服务changeOrigin:true,ws:true,pathRewrite:{'^/ISAPI':'/',},},'/SDK':{target:'',//本地nginx服务changeOrigin:true,ws:true,pathRewrite:{'^/SDK':'/',},},//webSocketVideoCtrlProxy反向配置尚未配置成功，当前配置正在开发中可以实现除播放视频以外的功能，无需封装。

注意：

1、本地开发过程中必须运行nginx服务

2、开发过程中，运行的项目地址必须是本机IP地址。不能使用localhost，否则登录不成功。

3、开发过程中如果想预览监控视频，需要先打包，然后访问部署的项目路径。访问IP必须是服务器IP地址。不能使用localhost或127.0.0.1，否则登录不成功。

5.初始化

divid='divPlugin'style='height:100%;宽度：100%'/div

注意：Dom元素ID必须是divPlugin，否则会出现问题

初始化函数如下：

/***初始化*@param{number}iWndowType分屏类型：1-1*1,2-2*2,3-3*3,4-4*4，默认值1，单屏*@param{number}width插件的宽度*@param{number}height插件的高度*@returns成功返回0，失败返回-1*/letlogout=(deviceIdentify)={returnwebVideoCtrl.I_Logout(deviceIdentify);};

获取模拟通道

/***获取模拟通道*@param{string}deviceIdentify设备标识*@param{*}options可选参数对象：**asynchttp交互模式，true表示异步，false表示同步；**success回调函数有一个参数，表示返回的XML内容。**错误失败回调函数，有两个参数，第一个是http状态码，第二个是设备返回的XML*/letgetAnalogChannelInfo=(deviceIdentify,options)={webVideoCtrl.I_GetAnalogChannelInfo(设备识别，选项）；}；

解析模拟频道XML内容

/***解析模拟通道XML内容*@param{XMLDocument}xmlDocXML内容*@returnscameraList:监控列表*/letanalysisAnalogChannelInfo=(xmlDoc)={letcameraList=[];letchannels=$(xmlDoc)?find('VideoInputChannel');$.each(channels,(i,channel)={letid=$(channel).find('id').eq(0).text();letname=$(channel).find('name').eq(0).text();if(name==''){name='相机'+(i9?'0'+(i+1):i+1);}cameraList.push({id,name,});});返回cameraList;};

获取数字频道

/***获取数字通道*@param{string}deviceIdentify设备标识*@param{*}options可选参数对象：**asynchttp交互模式，true表示异步，false表示同步；**success回调函数有一个参数，表示返回的XML内容。**错误失败回调函数，有两个参数，第一个是http状态码，第二个是设备返回的XML*/letgetDigitalChannelInfo=(deviceIdentify,options)={webVideoCtrl.I_GetDigitalChannelInfo(设备识别，选项）；}；

解析数字频道XML内容

/***解析数字通道XML内容*@param{XMLDocument}xmlDocXML内容*@param{boolean}filterOnline是否过滤禁用的数字通道*@returnscameraList:监控列表*/letanalysisDigitalChannelInfo=(xmlDoc,filterOnline)={letcameraList=[];让通道=$(xmlDoc)?find('InputProxyChannelStatus');$.each(通道，(i,通道)={letid=$(channel).find('id').eq(0).text();letname=$(channel).find('name').eq(0).text();letonline=$(channel).find('online').eq(0).text();if(filterOnlineonline=='false'){//过滤禁用数字频道returntrue;}if(name==''){name='IPCamera'+(i9?'0'+(i+1):i+1);}cameraList.push({id,名称，在线，});});返回cameraList;};

获取零通道

/***获取零通道*@param{string}deviceIdentify设备标识*@param{*}options可选参数对象：**asynchttp交互模式，true表示异步，false表示同步；**success回调函数有一个参数，表示返回的XML内容。**错误失败回调函数，有两个参数，第一个是http状态码，第二个是设备返回的XML*/letgetZeroChannelInfo=(deviceIdentify,options)={webVideoCtrl.I_GetZeroChannelInfo(设备识别，选项）；}；

解析零通过XML内容

/***解析零通道XML内容*@param{XMLDocument}xmlDocXML内容*@param{boolean}filterEnabled是否过滤禁用的零通道*@returnscameraList:监控列表*/letanalysisZeroChannelInfo=(xmlDoc,filterEnabled)={letcameraList=[];让通道=$(xmlDoc)?find('ZeroVideoChannel');$.each(通道，(i,通道)={letid=$(channel).find('id').eq(0).text();letname=$(channel).find('name').eq(0).text();if(name==''){name='零通道'+(i9?'0'+(i+1):i+1);}让启用=$(channel).find('启用').eq(0).text();if(filterEnabled启用=='false'){//过滤禁用零通道returntrue;}cameraList.push({id,name,enabled,});});returncameraList;};

开始预览

/***开始预览*@param{string}deviceIdentify设备识别(IP_Port)*@param{*}options可选参数对象：**iWndIndex播放窗口，如果不传则默认使用当前选择窗口进行播放**iStreamType码流类型1-主码流，2-子码流，默认使用主码流预览**iChannelID播放通道号，默认通道1**bZeroChannel是否播放零通道，默认为false**iPortRTSP端口号，可以选择传入，如果没有，开发包会自动判断设备的RTSP端口**success成功回调函数**error失败回调函数*/letstartRealPlay=(deviceIdentify,选项)={webVideoCtrl.I_StartRealPlay(deviceIdentify,选项);};

停止播放

/***停止播放*@param{*}options可选参数对象：**iWndIndex播放窗口号，可选，表示当前选中窗口的操作**success成功回调函数**error失败回调函数*/letstopPlay=(选项)={webVideoCtrl.I_Stop(选项);};

常用函数封装文件下载地址：

详细的API请参见下载的开发包中的Web3.2_ControlDevelopmentKitProgrammingGuide.pdf。上面的下载地址只是我封装了两次的一些API。

实际结果图：