文章目录
一、单页面版本二、组件封装版本2.1. 父页面2.2. 子组件一、单页面版本
appkey: '根据实际情况填写', // 海康平台提供的appkeyip: '根据实际情况填写', // 平台地址secret: '根据实际情况填写', // 海康平台提供的secret
<template><div><div style="display: flex;margin-top: 20px;margin-left: 20px"><el-inputstyle="width: 260px;"placeholder="请输入 equipmentno"v-model="equipmentno"clearable></el-input><el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button><el-button type="primary" size="mini" icon="el-icon-search" @click="stopAllPreview()">停止预览</el-button></div><div ref="playWndBox" class="videoMain" style="margin-top: 20px"><divid="playWnd"class="playWnd":style="{height: playWndHeight + 'px',width: playWndWidth + 'px',}"/></div></div></template><script>export default {name: 'Video',data() {return {equipmentno: '',// height: 735px;// width: 1144px;// 视频盒子的高度playWndHeight: '735',// playWndHeight: '1076',// 视频盒子的宽度playWndWidth: '1144',// playWndWidth: '1920',oWebControl: null,initCount: 0,pubKey: '',cameraIndexCode: '', // 这里面是监控点编号objData: {appkey: '根据实际需要填写', // 海康平台提供的appkeyip: 'IP地址根据实际需要填写', // 平台地址secret: '根据实际需要填写', // 海康平台提供的secretport: 443,playMode: 0, // 0 预览 1回放layout: '1x1' // 页面展示的模块数【16】}}},// mounted中获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成mounted() {// 首次加载时的到父容器的高度this.playWndHeight = this.$refs.playWndBox.clientHeight// 首次加载时的到父容器的宽度this.playWndWidth = this.$refs.playWndBox.clientWidth// 初始化播放器插件this.$nextTick(() => {this.initPlugin()})// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化window.addEventListener('scroll', () => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.$refs.playWndBox.clientWidth,this.$refs.playWndBox.clientHeight)this.setWndCover()}})// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化window.addEventListener('resize', (e) => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.$refs.playWndBox.clientWidth,this.$refs.playWndBox.clientHeight)this.setWndCover()}})},// 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用destroyed() {if (this.oWebControl != null) {// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题this.oWebControl.JS_HideWnd()// 销毁当前播放的视频this.oWebControl.JS_RequestInterface({funcName: 'destroyWnd'})// 断开与插件服务连接this.oWebControl.JS_Disconnect()}},// 方法区域methods: {// 创建播放实例initPlugin() {const that = thisthis.oWebControl = null// eslint-disable-next-line no-undefthat.oWebControl = new WebControl({szPluginContainer: 'playWnd', // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15909,szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsidcbConnectSuccess: () => {// 创建WebControl实例成功that.oWebControl.JS_StartService('window', {// WebControl实例创建成功后需要启动服务// 值"./VideoPluginConnect.dll"写死dllPath: './VideoPluginConnect.dll'}).then(function () {// 设置消息回调that.oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: that.cbIntegrationCallBack})// JS_CreateWnd创建视频播放窗口，宽高可设定that.oWebControl.JS_CreateWnd('playWnd', 2040, 945, {bEmbed: true})// 注：2040,945这是我本人项目视频盒子的大小，你们要根据自己视频盒子的大小进行修改，不然初始化插件的时候会有空白闪烁。.then(function () {// 创建播放实例成功后初始化that.init()})},function () {// 启动插件服务失败})},// 创建WebControl实例失败cbConnectError: function () {that.oWebControl = nullalert('插件未启动，正在尝试启动，请稍候...')that.$message.warning("插件未启动，正在尝试启动，请稍候...");// 程序未启动时执行error函数，采用wakeup来启动程序window.WebControl.JS_WakeUp('VideoWebPlugin://')that.initCount++if (that.initCount < 3) {setTimeout(function () {that.initPlugin()}, 3000)} else {// gblfy 默认注释that.messageBox = truealert('插件启动失败，请安装插件并重新启动！')that.downloadHikVideo()setTimeout(function () {that.messageBox = false}, 5000)setTimeout(function () {alert('插件启动失败，请检查插件是否安装！')that.$message({message: '插件启动失败，请检查插件是否安装！ \n 插件下载地址：',type: 'warning'});}, 5000)}},cbConnectClose: () => {// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = true// console.log("cbConnectClose");that.oWebControl = null}})},// 初始化init(callback) {const that = thisthat.getPubKey(() => {const appkey = that.objData.appkey // 综合安防管理平台提供的appkey，必填const secret = that.setEncrypt(that.objData.secret) // 综合安防管理平台提供的secret，必填const ip = that.objData.ip // 综合安防管理平台IP地址，必填const playMode = that.objData.playMode // 初始播放模式：0-预览，1-回放const port = that.objData.port // 综合安防管理平台端口，若启用HTTPS协议，默认443const snapDir = 'D:\\SnapDir' // 抓图存储路径const videoDir = 'D:\\VideoDir' // 紧急录像或录像剪辑存储路径const layout = that.objData.layout // playMode指定模式的布局const enableHTTPS = 1 // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1const encryptedFields = 'secret' // 加密字段，默认加密领域为secretconst showToolbar = 1 // 是否显示工具栏，0-不显示，非0-显示const showSmart = 1 // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示const buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' // 自定义工具条按钮// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮that.oWebControl.JS_RequestInterface({funcName: 'init',argument: JSON.stringify({appkey: appkey, // API网关提供的appkeysecret: secret, // API网关提供的secretip: ip, // API网关IP地址playMode: playMode, // 播放模式（决定显示预览还是回放界面）port: port, // 端口snapDir: snapDir, // 抓图存储路径videoDir: videoDir, // 紧急录像或录像剪辑存储路径layout: layout, // 布局enableHTTPS: enableHTTPS, // 是否启用HTTPS协议encryptedFields: encryptedFields, // 加密字段showToolbar: showToolbar, // 是否显示工具栏showSmart: showSmart, // 是否显示智能信息buttonIDs: buttonIDs// 自定义工具条按钮})}).then(function (oData) {that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题if (callback) {callback()}// 隐藏// that.oWebControl.JS_HideWnd()})})},// 获取公钥getPubKey(callback) {const that = thisthis.oWebControl.JS_RequestInterface({funcName: 'getRSAPubKey',argument: JSON.stringify({keyLength: 1024})}).then(function (oData) {if (oData.responseMsg.data) {that.pubKey = oData.responseMsg.datacallback()}})},// RSA 加密setEncrypt(value) {const that = thisconst encrypt = new window.JSEncrypt()encrypt.setPublicKey(that.pubKey)return encrypt.encrypt(value)},// 回调的消息cbIntegrationCallBack(oData) {const {responseMsg: type} = oDataif (type === 'error') {// eslint-disable-next-line no-empty} else {}},// 视频预览功能previewVideo() {const that = thisconsole.log("-------that.equipmentno->{}", that.cameraIndexCode);const cameraIndexCode = that.equipmentno // 获取输入的监控点编号值，必填const streamMode = 0 // 主子码流标识：0-主码流，1-子码流const transMode = 0 // 传输协议：0-UDP，1-TCPconst gpuMode = 0 // 是否启用GPU硬解，0-不启用，1-启用const wndId = -1 // 播放窗口序号（在2x2以上布局下可指定播放窗口）console.log(cameraIndexCode, "-------cameraIndexCode-");that.oWebControl.JS_RequestInterface({funcName: 'startPreview',argument: JSON.stringify({cameraIndexCode: cameraIndexCode.trim(), // 监控点编号streamMode: streamMode, // 主子码流标识transMode: transMode, // 传输协议gpuMode: gpuMode, // 是否开启GPU硬解wndId: wndId // 可指定播放窗口})})},// 停止全部预览stopAllPreview() {this.oWebControl.JS_RequestInterface({funcName: 'stopAllPreview'})},// 格式化时间dateFormat(oDate, fmt) {const o = {'M+': oDate.getMonth() + 1, // 月份'd+': oDate.getDate(), // 日'h+': oDate.getHours(), // 小时'm+': oDate.getMinutes(), // 分's+': oDate.getSeconds(), // 秒'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度S: oDate.getMilliseconds() // 毫秒}if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1,(oDate.getFullYear() + '').substr(4 - RegExp.$1.length))}for (const k in o) {if (new RegExp('(' + k + ')').test(fmt)) {fmt = fmt.replace(RegExp.$1,RegExp.$1.length === 1? o[k]: ('00' + o[k]).substr(('' + o[k]).length))}}return fmt},// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口setWndCover() {var iWidth = $(window).width()var iHeight = $(window).height()var oDivRect = $('#playWnd').get(0).getBoundingClientRect()var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0iCoverLeft = (iCoverLeft > 2041) ? 2041 : iCoverLeftiCoverTop = (iCoverTop > 945) ? 945 : iCoverTopiCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRightiCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottomthis.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946) // 多1个像素点防止还原后边界缺失一个像素条if (iCoverLeft !== 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946)}if (iCoverTop !== 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if (iCoverRight !== 0) {this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946)}if (iCoverBottom !== 0) {this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom)}}}}</script>
二、组件封装版本
appkey: '根据实际情况填写', // 海康平台提供的appkeyip: '根据实际情况填写', // 平台地址secret: '根据实际情况填写', // 海康平台提供的secret
2.1. 父页面
<template><div><el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button><div v-if="dialogVideoFlag"><el-dialogv-show="dialogVideoFlag"title="海康视频实时录像":before-close="handleClose"><span>海康视频</span><span slot="footer" class="dialog-footer"><HaiKangVideo:equipmentno="equipmentno"></HaiKangVideo><el-button @click="dialogVideoFlag = false">取 消</el-button><el-button type="primary" @click="dialogVideoFlag = false">确 定</el-button></span></el-dialog></div></div></template><script>// 父页面import HaiKangVideo from "../components/HaiKangVideo";export default {name: 'Video',components: {HaiKangVideo},data() {return {dialogVideoFlag: false,equipmentno: '8888',}},methods: {previewVideo() {this.dialogVideoFlag = true},handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});}}}</script>
2.2. 子组件
<template><div><div style="display: flex;margin-top: 20px;margin-left: 20px"><el-inputstyle="width: 260px;"placeholder="请输入 equipmentno"v-model="equipmentno"clearable></el-input><el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button><el-button type="primary" size="mini" icon="el-icon-search" @click="stopAllPreview()">停止预览</el-button></div><div ref="playWndBox" class="videoMain" style="margin-top: 20px"><divid="playWnd"class="playWnd":style="{height: playWndHeight + 'px',width: playWndWidth + 'px',}"/></div></div></template><script>export default {name: 'Video',props: {//props列表equipmentno: {type: String,default: "我是默认字符串",//定义参数默认值required: true//定义参数是否必须值},},created() {console.log("this.equipmentno 组件->{}", this.equipmentno)},data() {return {// equipmentno: '',// height: 735px;// width: 1144px;// 视频盒子的高度playWndHeight: '420',// playWndHeight: '735',// playWndHeight: '1076',// 视频盒子的宽度playWndWidth: '1144',// playWndWidth: '1920',oWebControl: null,initCount: 0,pubKey: '',cameraIndexCode: '', // 这里面是监控点编号objData: {appkey: '根据实际情况填写', // 海康平台提供的appkeyip: '根据实际情况填写', // 平台地址secret: '根据实际情况填写', // 海康平台提供的secretport: 443,playMode: 0, // 0 预览 1回放layout: '1x1' // 页面展示的模块数【16】}}},// mounted中获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成mounted() {// 首次加载时的到父容器的高度this.playWndHeight = this.$refs.playWndBox.clientHeight// 首次加载时的到父容器的宽度this.playWndWidth = this.$refs.playWndBox.clientWidth// 初始化播放器插件this.$nextTick(() => {this.initPlugin()})// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化window.addEventListener('scroll', () => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.$refs.playWndBox.clientWidth,this.$refs.playWndBox.clientHeight)this.setWndCover()}})// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化window.addEventListener('resize', (e) => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.$refs.playWndBox.clientWidth,this.$refs.playWndBox.clientHeight)this.setWndCover()}})},// 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用destroyed() {if (this.oWebControl != null) {// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题this.oWebControl.JS_HideWnd()// 销毁当前播放的视频this.oWebControl.JS_RequestInterface({funcName: 'destroyWnd'})// 断开与插件服务连接this.oWebControl.JS_Disconnect()}},// 方法区域methods: {// 创建播放实例initPlugin() {const that = thisthis.oWebControl = null// eslint-disable-next-line no-undefthat.oWebControl = new WebControl({szPluginContainer: 'playWnd', // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15909,szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsidcbConnectSuccess: () => {// 创建WebControl实例成功that.oWebControl.JS_StartService('window', {// WebControl实例创建成功后需要启动服务// 值"./VideoPluginConnect.dll"写死dllPath: './VideoPluginConnect.dll'}).then(function () {// 设置消息回调that.oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: that.cbIntegrationCallBack})// JS_CreateWnd创建视频播放窗口，宽高可设定that.oWebControl.JS_CreateWnd('playWnd', 2040, 945, {bEmbed: true})// 注：2040,945这是我本人项目视频盒子的大小，你们要根据自己视频盒子的大小进行修改，不然初始化插件的时候会有空白闪烁。.then(function () {// 创建播放实例成功后初始化that.init()})},function () {// 启动插件服务失败})},// 创建WebControl实例失败cbConnectError: function () {that.oWebControl = nullalert('插件未启动，正在尝试启动，请稍候...')that.$message.warning("插件未启动，正在尝试启动，请稍候...");// 程序未启动时执行error函数，采用wakeup来启动程序window.WebControl.JS_WakeUp('VideoWebPlugin://')that.initCount++if (that.initCount < 3) {setTimeout(function () {that.initPlugin()}, 3000)} else {// gblfy 默认注释that.messageBox = truealert('插件启动失败，请安装插件并重新启动！')that.downloadHikVideo()setTimeout(function () {that.messageBox = false}, 5000)setTimeout(function () {alert('插件启动失败，请检查插件是否安装！')that.$message({message: '插件启动失败，请检查插件是否安装！ \n 插件下载地址：',type: 'warning'});}, 5000)}},cbConnectClose: () => {// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = true// console.log("cbConnectClose");that.oWebControl = null}})},// 初始化init(callback) {const that = thisthat.getPubKey(() => {const appkey = that.objData.appkey // 综合安防管理平台提供的appkey，必填const secret = that.setEncrypt(that.objData.secret) // 综合安防管理平台提供的secret，必填const ip = that.objData.ip // 综合安防管理平台IP地址，必填const playMode = that.objData.playMode // 初始播放模式：0-预览，1-回放const port = that.objData.port // 综合安防管理平台端口，若启用HTTPS协议，默认443const snapDir = 'D:\\SnapDir' // 抓图存储路径const videoDir = 'D:\\VideoDir' // 紧急录像或录像剪辑存储路径const layout = that.objData.layout // playMode指定模式的布局const enableHTTPS = 1 // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1const encryptedFields = 'secret' // 加密字段，默认加密领域为secretconst showToolbar = 1 // 是否显示工具栏，0-不显示，非0-显示const showSmart = 1 // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示const buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' // 自定义工具条按钮// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮that.oWebControl.JS_RequestInterface({funcName: 'init',argument: JSON.stringify({appkey: appkey, // API网关提供的appkeysecret: secret, // API网关提供的secretip: ip, // API网关IP地址playMode: playMode, // 播放模式（决定显示预览还是回放界面）port: port, // 端口snapDir: snapDir, // 抓图存储路径videoDir: videoDir, // 紧急录像或录像剪辑存储路径layout: layout, // 布局enableHTTPS: enableHTTPS, // 是否启用HTTPS协议encryptedFields: encryptedFields, // 加密字段showToolbar: showToolbar, // 是否显示工具栏showSmart: showSmart, // 是否显示智能信息buttonIDs: buttonIDs// 自定义工具条按钮})}).then(function (oData) {that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题if (callback) {callback()}// 隐藏// that.oWebControl.JS_HideWnd()})})},// 获取公钥getPubKey(callback) {const that = thisthis.oWebControl.JS_RequestInterface({funcName: 'getRSAPubKey',argument: JSON.stringify({keyLength: 1024})}).then(function (oData) {if (oData.responseMsg.data) {that.pubKey = oData.responseMsg.datacallback()}})},// RSA 加密setEncrypt(value) {const that = thisconst encrypt = new window.JSEncrypt()encrypt.setPublicKey(that.pubKey)return encrypt.encrypt(value)},// 回调的消息cbIntegrationCallBack(oData) {const {responseMsg: type} = oDataif (type === 'error') {// eslint-disable-next-line no-empty} else {}},// 视频预览功能previewVideo() {console.log("-------开始 预览---------");const that = thisconsole.log("-------that.equipmentno->{}", that.equipmentno);const cameraIndexCode = that.equipmentno // 获取输入的监控点编号值，必填const streamMode = 0 // 主子码流标识：0-主码流，1-子码流const transMode = 0 // 传输协议：0-UDP，1-TCPconst gpuMode = 0 // 是否启用GPU硬解，0-不启用，1-启用const wndId = -1 // 播放窗口序号（在2x2以上布局下可指定播放窗口）// console.log(cameraIndexCode, "-------cameraIndexCode-");that.oWebControl.JS_RequestInterface({funcName: 'startPreview',argument: JSON.stringify({cameraIndexCode: cameraIndexCode.trim(), // 监控点编号streamMode: streamMode, // 主子码流标识transMode: transMode, // 传输协议gpuMode: gpuMode, // 是否开启GPU硬解wndId: wndId // 可指定播放窗口})})},// 停止全部预览stopAllPreview() {console.log("-------预览 结束---------");this.oWebControl.JS_RequestInterface({funcName: 'stopAllPreview'})},// 格式化时间dateFormat(oDate, fmt) {const o = {'M+': oDate.getMonth() + 1, // 月份'd+': oDate.getDate(), // 日'h+': oDate.getHours(), // 小时'm+': oDate.getMinutes(), // 分's+': oDate.getSeconds(), // 秒'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度S: oDate.getMilliseconds() // 毫秒}if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1,(oDate.getFullYear() + '').substr(4 - RegExp.$1.length))}for (const k in o) {if (new RegExp('(' + k + ')').test(fmt)) {fmt = fmt.replace(RegExp.$1,RegExp.$1.length === 1? o[k]: ('00' + o[k]).substr(('' + o[k]).length))}}return fmt},// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口setWndCover() {var iWidth = $(window).width()var iHeight = $(window).height()var oDivRect = $('#playWnd').get(0).getBoundingClientRect()var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0iCoverLeft = (iCoverLeft > 2041) ? 2041 : iCoverLeftiCoverTop = (iCoverTop > 945) ? 945 : iCoverTopiCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRightiCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottomthis.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946) // 多1个像素点防止还原后边界缺失一个像素条if (iCoverLeft !== 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946)}if (iCoverTop !== 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if (iCoverRight !== 0) {this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946)}if (iCoverBottom !== 0) {this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom)}}}}</script>
