├── README.md └── components └── hkVideo ├── index.vue └── lib ├── initPlugin.js └── pubKey.js /README.md: -------------------------------------------------------------------------------- 1 | # vue-hk-video 2 | 海康web插件1.5.2版本组件 3 | 4 | 前言: 5 | 6 | 使用前请确保index.html已正确引入官方插件包query-1.12.4.min.js、jsencrypt.min.js、jsWebControl-1.0.0.min.js 7 | 8 | 9 | 10 | **Props** 11 | 12 | | 参数 |说明 |类型 | 默认值| 可选值 |是否必须 | 13 | | --- | --- | --- | --- | --- | --- | 14 | width|组件宽(单位px)|Number |1000|—— |否| 15 | height |组件高(单位px)| Number |600| —— |否 16 | playMode| 模式，0：预览，1：回放| Number| 0| 1| 否 17 | autoResize| 浏览器窗口改变时候是否动态改变组件宽度，开启的话将按照初始化组件占浏览器可视区域比例缩放组件宽度，如果设置false，请手动监听浏览器窗口大小变化动态设置width值 |Boolean |true| false| 否 18 | downloadDialog| 未安装海康视频插件时候是否显示插件下载对话框提示用户下载功能,需支持element的el-dialog组件| Boolean| false| true| 否 19 | downloadText| 海康视频插件下载对话框提示文字| String|插件启动失败，请检查插件是否安装，如果未安装请点击下载安装，安装后刷新页面| ——|否| 20 | downloadUrl| 海康视频插件下载地址| String| —— |—— |downloadDialog为true必须 21 | argument| 初始化组件参数，具体看下表，argument内的playMode优先级高于props属性playMode| Object| ——|——| 是 22 | 23 | 24 | 25 | **argument** 26 | | 参数 |说明 |类型 | 默认值| 可选值 |是否必须 | 27 | | --- | --- | --- | --- | --- | --- | 28 | appkey| API网关提供的appkey|String| ——|——| 是 29 | secret| API网关提供的secret |String| ——| —— |是 30 | ip |API网关IP地址| String |—— |—— |是 31 | port |平台端口 Number |443| ——|——| 否 32 | playMode| 初始播放模式，优先级高于prop的playMode |Number |0 |1| 否 33 | layout| 布局| String| '2x2' |可选值有“1x1”、“2x2”、 “3x3”、“4x4”、“5x5”、“1x2”、“1+2”、 “1+5”、“1+7”、“1+8”、“1+9”、“1+12”、 “1+16”、“4+9”、“1+1+12”、“3+4”、 “1x4”、“4x6 |否 34 | encryptedFields| 加密字段| String |secret|——|否 35 | videoDir| 紧急录像或录像剪辑存储 路径| String| ——| —— |否 36 | showToolbar| 是否显示工具栏，0不显示其他值显示| Number| 非0| 0| 否 37 | buttonIDs |工具条按钮字符串，多个 之间以“,”分割，值具体看开发指南 |Sting| ——|——|否 38 | toolBarButtonIDs |工具栏按钮字符串，多个 之间以“,”分割，值具体看开发指南 |String| ——|——|否 39 | evelType| 时间轴级别| String |24h|”24h，12h，6h，1h，36m，24m， 12m” |否 40 | 41 | 42 | **Event** 43 | 44 | | 事件名 |说明 |回调参数 45 | | --- | --- |--- | 46 | windowChang |选中窗口改变 |（windId）windId：窗口号，从1开始 47 | layoutChange |布局分屏改变 |（e） e:{layout:，//布局例如‘3x3’ wnNum//窗口数例如9} 48 | initFinish| 组件初始化完成 |无 49 | pluginError| 海康视频插件启动失败（未安装） |无 50 | clickDownload |海康视频插件下载对话框，点击下载按钮事件 |无 51 | 52 | 53 | **方法** 54 | 通过实例调用例如：this.$refs.hkvideo.setLayout('3x3'); 55 | 参数argument：api参数具体查看开发指南，argument内部参数优先级高于方法参数 56 | 57 | | 方法名 |说明 |参数 58 | | --- | --- |--- | 59 | startPreview| 单个窗口预览 |（cameraIndexCode, argument = {})cameraIndexCode：监控点编号，必填， 60 | stopAllPreview |停止所有窗口预览 |无 61 | stopListPreview |批量(指定窗口)停止播放 |（idArr）idArr：播放窗口序号数组，必填 62 | startPlayBack|根据监控点编号录像回放|(cameraIndexCode, startTime, endTime, recordLocation=0,argument = {}) cameraIndexCode :获取输入的监控点编号值，必填，startTime:开始时间，endTime:结束时间，recordLocation://录像存储位置：0-中心存储，1-设备存储 63 | stopAllPlayBack |停止所有回放| 无 64 | setLayout| 设置窗口布局 |(layout)layout：布局例如（‘3x3’），必填 65 | drawText|画面字符叠加|(text, x = 5,y = 5, fontSize = 20, color = 16777215,argument = {}) ，text :文字，必填， x:相对播放窗口左上角的横坐标起点，y:相对播放窗口左上角的纵坐标起点，fontSize:字体大小，color:字体颜色，默认白色 66 | setFullScreen |进入全屏 |无 67 | exitFullScreen| 退出全屏| 无 68 | snapShot |播放抓图 |无 69 | setResize|设置组件尺寸 |（width,height）width:组件宽，height:组件高 70 | 71 | 72 | **demo** 73 | 74 | ```html 75 | 94 | ``` 95 | 96 | ```javascript 97 | 494 | -------------------------------------------------------------------------------- /components/hkVideo/lib/initPlugin.js: -------------------------------------------------------------------------------- 1 | 2 | import { getPubKey, setEncrypt } from './pubKey' 3 | var initCount = 0; 4 | var oWebControl; 5 | /** 6 | * 7 | * @param {*} id :组件容器id 8 | * @param {*} iWidth :组件容器宽 9 | * @param {*} iHeight :组件容器高 10 | * @param {*}cbIntegrationCallBack：消息推送回调函数 11 | * @param {*} argument:初始化api参数 12 | * @param {*} completeCallBack：初始化成功回调函数 13 | * @param {*} plugErrorCallBack：插件启动失败回调函数 14 | */ 15 | const initPlugin = (id, iWidth, iHeight, argument, cbIntegrationCallBack = () => { }, completeCallBack = () => { }, plugErrorCallBack = () => { }) => { 16 | // eslint-disable-next-line no-undef 17 | oWebControl = new WebControl({ 18 | szPluginContainer: id, // 指定容器id 19 | iServicePortStart: 15900, // 指定起止端口号，建议使用该值 20 | iServicePortEnd: 15909, 21 | szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid 22 | cbConnectSuccess: function () { // 创建WebControl实例成功 23 | oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务 24 | dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 25 | }).then(function () { // 启动插件服务成功 26 | oWebControl.JS_SetWindowControlCallback({ // 设置消息回调 27 | cbIntegrationCallBack: cbIntegrationCallBack 28 | }); 29 | 30 | oWebControl.JS_CreateWnd(id, iWidth, iHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定 31 | init(argument, iWidth, iHeight,completeCallBack()); // 创建播放实例成功后初始化 32 | 33 | }); 34 | 35 | }, function () { // 启动插件服务失败 36 | 37 | }); 38 | }, 39 | // eslint-disable-next-line no-unused-vars 40 | cbConnectError: function (e) { // 创建WebControl实例失败 41 | oWebControl = null; 42 | // eslint-disable-next-line no-undef 43 | // $(id).html("插件未启动，正在尝试启动，请稍候..."); 44 | // eslint-disable-next-line no-undef 45 | WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 46 | 47 | initCount++; 48 | if (initCount < 2) { 49 | setTimeout(function () { 50 | initPlugin(id, iWidth, iHeight, argument, cbIntegrationCallBack,completeCallBack,plugErrorCallBack); 51 | }, 1000) 52 | } else { 53 | 54 | // eslint-disable-next-line no-undef 55 | // $(id).html("插件启动失败，请检查插件是否安装！"); 56 | plugErrorCallBack() 57 | 58 | } 59 | }, 60 | // eslint-disable-next-line no-unused-vars 61 | cbConnectClose: function (bNormalClose) { 62 | // 异常断开：bNormalClose = false 63 | // JS_Disconnect正常断开：bNormalClose = true 64 | console.log("cbConnectClose"); 65 | oWebControl = null; 66 | } 67 | }); 68 | return oWebControl 69 | } 70 | 71 | 72 | //初始化 73 | function init(argument, iWidth, iHeight,callback=()=>{}) { 74 | getPubKey(oWebControl, function () { 75 | 76 | oWebControl.JS_RequestInterface({ 77 | funcName: "init", 78 | argument: JSON.stringify({ 79 | ...argument, 80 | secret: setEncrypt(argument.secret) 81 | }) 82 | // eslint-disable-next-line no-unused-vars 83 | }).then(function (oData) { 84 | callback() 85 | //oWebControl.JS_Resize(iWidth, iHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 86 | 87 | }); 88 | }) 89 | } 90 | 91 | export default initPlugin -------------------------------------------------------------------------------- /components/hkVideo/lib/pubKey.js: -------------------------------------------------------------------------------- 1 | var pubKey; 2 | //获取公钥 3 | export function getPubKey(oWebControl,callback) { 4 | // eslint-disable-next-line no-undef 5 | oWebControl.JS_RequestInterface({ 6 | funcName: "getRSAPubKey", 7 | argument: JSON.stringify({ 8 | keyLength: 1024 9 | }) 10 | }).then(function (oData) { 11 | if (oData.responseMsg.data) { 12 | pubKey = oData.responseMsg.data; 13 | callback() 14 | } 15 | }) 16 | } 17 | 18 | //RSA加密 19 | export function setEncrypt(value) { 20 | // eslint-disable-next-line no-undef 21 | var encrypt = new JSEncrypt(); 22 | encrypt.setPublicKey(pubKey); 23 | return encrypt.encrypt(value); 24 | } --------------------------------------------------------------------------------