{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\Normal\\components\\videoPlayerDH.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\Normal\\components\\videoPlayerDH.vue","mtime":1710961694264},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\n/**\r\n * @description 自定义选择器\r\n * @param {string} str dom元素\r\n */\r\nfunction $(str) {\r\n if (str.charAt(0) == '#') {\r\n return document.getElementById(str.substring(1))\r\n } else if (str.charAt(0) == '.') {\r\n return document.getElementsByClassName(str.substring(1))\r\n } else {\r\n return document.getElementsByTagName(str)\r\n }\r\n}\r\nexport default {\r\n name: 'videoPlayerDH',\r\n props: {\r\n wrapperName: {\r\n type: String,\r\n default: 'h5-play-wrap',\r\n },\r\n showWdn: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n showFull: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n data() {\r\n return {\r\n curDeviceIndex: 0,\r\n deviceObject: {\r\n loginState: [],\r\n session: [],\r\n },\r\n $loginState: '',\r\n $stream: '',\r\n $volume: '',\r\n $canvas: '', //canvas播放视频DOM\r\n $video: '', //video播放视频DOM\r\n $canvas_ivs: '', //canvas绘图DOM\r\n $video_wrap: '', //视频外层Wrap\r\n $videoLoading: '', //“加载中...”提示\r\n player: null,\r\n playerInstance: [], //播放|回放实例数组\r\n channel: 0, //当前通道\r\n curEnlargeWnd: 0,\r\n onlineChannel: [], //当前成功拉流的视频通道数组\r\n WndIndex: 0, //宫格窗口Id\r\n ivsInstance: [], //canvas绘图实例数组\r\n curWndType: 1, //窗口分割类型\r\n }\r\n },\r\n created() {},\r\n mounted() {\r\n this.init()\r\n },\r\n beforeDestroy() {\r\n this.stopAll()\r\n },\r\n methods: {\r\n stopAll() {\r\n this.playerInstance.forEach((item) => {\r\n if (item) {\r\n item.close()\r\n item = null\r\n }\r\n })\r\n },\r\n play(videoData) {\r\n let {ip, cameraCode, dyAccount, dyPassword} = videoData\r\n if (this.playerInstance[this.WndIndex]) {\r\n this.playerInstance[this.WndIndex].close()\r\n this.playerInstance[this.WndIndex] = null\r\n console.log('停止')\r\n }\r\n let channel = cameraCode ? cameraCode : 1\r\n if (!dyAccount || !dyPassword) {\r\n this.$message.warning('摄像机数据获取失败!')\r\n }\r\n var options = {\r\n wsURL: `ws://${ip}/rtspoverwebsocket`,\r\n rtspURL: `rtsp://${ip}/cam/realmonitor?channel=${channel}&subtype=0&proto=Private3`,\r\n username: dyAccount,\r\n password: dyPassword,\r\n }\r\n this.$videoLoading.style.display = ''\r\n this.$videoLoading.innerText = '加载中...'\r\n let player = new PlayerControl(options)\r\n this.playerInstance[this.WndIndex] = player\r\n player.on('WorkerReady', () => {\r\n player.connect()\r\n this.$videoLoading.style.display = ''\r\n this.$videoLoading.innerText = '连接中...'\r\n })\r\n player.on('PlayStart', () => {\r\n this.$videoLoading.style.display = 'none'\r\n this.$videoLoading.innerText = ''\r\n })\r\n player.on('Error', (rs) => {\r\n console.log(rs, rs.description, 'error')\r\n let message = '打开失败!'\r\n if (rs.description) message = rs.description\r\n if (rs.errorCode == 101) message = ''\r\n this.$videoLoading.style.display = ''\r\n this.$videoLoading.innerText = message\r\n })\r\n player.init(this.$canvas, this.$video)\r\n },\r\n stop() {\r\n this.playerInstance[this.WndIndex].close()\r\n },\r\n /**\r\n * @description 初始化\r\n */\r\n init() {\r\n let initWidth = '50%'\r\n if (!this.showWdn) {\r\n initWidth = '100%'\r\n }\r\n let videoStr = ''\r\n for (var i = 0; i < 16; i++) {\r\n videoStr +=\r\n '

加载中...

'\r\n }\r\n document.querySelector(`.${this.wrapperName}`).innerHTML = videoStr\r\n document\r\n .querySelectorAll(`.${this.wrapperName} div`)\r\n .forEach((item, index) => {\r\n item.addEventListener('click', (event) => {\r\n let _wndIndex =\r\n event.target.parentNode.getAttribute('wnd-index') -\r\n 0\r\n if (\r\n !(\r\n this.playerInstance[_wndIndex] &&\r\n this.playerInstance[_wndIndex].isPlayback\r\n )\r\n ) {\r\n this.channel =\r\n event.target.parentNode.getAttribute(\r\n 'channel'\r\n ) - 0\r\n document\r\n .querySelectorAll('#h5_channel_list li')\r\n .forEach((item) => {\r\n item.classList.remove('fn-fontRed')\r\n })\r\n }\r\n document\r\n .querySelectorAll(`.${this.wrapperName} div`)\r\n .forEach((item, index) => {\r\n if (index === _wndIndex && this.showWdn) {\r\n item.style.borderColor = 'rgb(255, 204, 0)'\r\n if (\r\n !(\r\n this.playerInstance[_wndIndex] &&\r\n this.playerInstance[_wndIndex]\r\n .isPlayback\r\n )\r\n ) {\r\n if (\r\n this.onlineChannel.indexOf(\r\n this.channel\r\n ) > -1\r\n ) {\r\n document\r\n .querySelector(\r\n '#h5_channel_list li[channel=\"' +\r\n this.channel +\r\n '\"]'\r\n )\r\n .classList.add('fn-fontRed')\r\n }\r\n }\r\n this.WndIndex = _wndIndex\r\n this.setVideoDom()\r\n } else {\r\n item.style.borderColor =\r\n 'rgb(125, 125, 125)'\r\n }\r\n })\r\n })\r\n })\r\n this.$video_wrap = document.querySelector(`.${this.wrapperName}`)\r\n this.setVideoDom()\r\n ;[\r\n 'fullscreenchange',\r\n 'webkitfullscreenchange',\r\n 'mozfullscreenchange',\r\n 'msfullscreenchange',\r\n ].forEach((item, index) => {\r\n document.addEventListener(item, this.fullscreenchange, false)\r\n })\r\n },\r\n /**\r\n * @description 切换宫格时重新设置当前视频dom\r\n */\r\n setVideoDom() {\r\n this.$canvas = $(\r\n '#h5_canvas_' + this.WndIndex + '_' + this.wrapperName\r\n )\r\n this.$video = $(\r\n '#h5_video_' + this.WndIndex + '_' + this.wrapperName\r\n )\r\n this.$canvas_ivs = $(\r\n '#h5_ivs_' + this.WndIndex + '_' + this.wrapperName\r\n )\r\n this.$videoLoading = $(\r\n '#h5_loading_' + this.WndIndex + '_' + this.wrapperName\r\n )\r\n },\r\n /**\r\n * @description 切换窗口分割\r\n */\r\n onChangeWdnNum(val) {\r\n let ivsDom = document.querySelectorAll('[id^=h5_ivs_]')\r\n let divDom = document.querySelectorAll(`.${this.wrapperName} div`)\r\n this.curWndType = val\r\n if (val === '1') {\r\n divDom.forEach((item) => {\r\n item.style.width = 'calc(100% - 2px)'\r\n item.style.height = 'calc(100% - 2px)'\r\n item.style.borderColor = '#000'\r\n })\r\n } else if (val === '2') {\r\n divDom.forEach((item, index) => {\r\n item.style.width = 'calc(50% - 2px)'\r\n item.style.height = 'calc(50% - 2px)'\r\n if (index === 0) {\r\n item.style.borderColor = ' rgb(255, 204, 0)'\r\n } else {\r\n item.style.borderColor = ' rgb(125, 125, 125)'\r\n }\r\n })\r\n } else if (val === '3') {\r\n divDom.forEach((item, index) => {\r\n item.style.height = 'calc(33.333% - 2px)'\r\n item.style.width = 'calc(33.333% - 2px)'\r\n if (index === 0) {\r\n item.style.borderColor = ' rgb(255, 204, 0)'\r\n } else {\r\n item.style.borderColor = ' rgb(125, 125, 125)'\r\n }\r\n })\r\n } else if (val === '4') {\r\n divDom.forEach((item, index) => {\r\n item.style.width = 'calc(25% - 2px)'\r\n item.style.height = 'calc(25% - 2px)'\r\n if (index === 0) {\r\n item.style.borderColor = 'rgb(255, 204, 0)'\r\n } else {\r\n item.style.borderColor = 'rgb(125, 125, 125)'\r\n }\r\n })\r\n }\r\n ivsDom.forEach((item) => {\r\n item.setAttribute('width', `${item.parentNode.clientWidth}`)\r\n item.setAttribute('height', `${item.parentNode.clientHeight}`)\r\n })\r\n this.ivsInstance.forEach((item) => {\r\n item && item.resize()\r\n })\r\n document.querySelector('#h5_ivs_0').click()\r\n },\r\n /**\r\n * @description 设置全屏\r\n */\r\n onSetFull() {\r\n debugger\r\n if (this.getFull()) {\r\n this.exitfullScreen()\r\n } else {\r\n this.setfullScreen()\r\n }\r\n },\r\n /**\r\n * @description 获取全屏状态\r\n */\r\n getFull() {\r\n return (\r\n window.top.document.mozFullScreen ||\r\n window.top.document.webkitIsFullScreen ||\r\n window.top.document.msFullscreenElement\r\n )\r\n },\r\n /**\r\n * @description 全屏状态改变的回调事件\r\n */\r\n fullscreenchange() {\r\n if (this.getFull()) {\r\n return\r\n } else {\r\n this.exitfullScreen()\r\n }\r\n },\r\n /**\r\n * @description 设置全屏\r\n */\r\n setfullScreen() {\r\n let docElm = window.top.document.documentElement\r\n if (docElm.requestFullScreen) {\r\n docElm.requestFullScreen()\r\n } else if (docElm.mozRequestFullScreen) {\r\n docElm.mozRequestFullScreen()\r\n } else if (docElm.webkitRequestFullScreen) {\r\n docElm.webkitRequestFullScreen()\r\n } else if (docElm.msRequestFullscreen) {\r\n docElm.msRequestFullscreen()\r\n }\r\n this.handleFullscreen(true)\r\n },\r\n /**\r\n * @description 退出全屏\r\n */\r\n exitfullScreen() {\r\n let docElm = window.top.document.documentElement\r\n if (docElm.exitFullscreen) {\r\n docElm.exitFullscreen()\r\n } else if (docElm.mozCancelFullScreen) {\r\n docElm.mozCancelFullScreen()\r\n } else if (docElm.webkitCancelFullScreen) {\r\n docElm.webkitCancelFullScreen()\r\n } else if (docElm.msExitFullscreen) {\r\n docElm.msExitFullscreen()\r\n }\r\n this.handleFullscreen(false)\r\n },\r\n /**\r\n * @description 处理全屏开关时的窗口大小\r\n * @param {boolean} bool 是否要全屏\r\n */\r\n handleFullscreen(bool) {\r\n if (bool) {\r\n let wrap = {\r\n position: 'fixed',\r\n left: 0,\r\n top: 0,\r\n width: window.screen.width + 'px',\r\n height: window.screen.height + 'px',\r\n overflow: 'visible',\r\n zIndex: 1,\r\n }\r\n this.setStyle(this.$video_wrap, wrap)\r\n } else {\r\n let wrap = {\r\n position: 'relative',\r\n overflow: 'hidden',\r\n width: '100%',\r\n height: '100%',\r\n }\r\n this.setStyle(this.$video_wrap, wrap)\r\n }\r\n },\r\n\r\n /**\r\n * @description 设置样式\r\n * @param {object} obj dom元素\r\n * @param {*} json css样式\r\n */\r\n setStyle(obj, json) {\r\n for (let i in json) {\r\n obj.style[i] = json[i]\r\n }\r\n },\r\n /**\r\n * @description 登录\r\n */\r\n onLogin(ip) {\r\n this.playerInstance.forEach((item) => {\r\n if (item) {\r\n item.close()\r\n item = null\r\n }\r\n })\r\n // $('#h5_channel_list').innerHTML = ''\r\n // $('#h5_playback_channel').options.length = 0\r\n this.onlineChannel = []\r\n let port = '80'\r\n let name = 'admin'\r\n let pswd = 'CQ@hik12345.'\r\n let target = ip + ':' + port\r\n setIP(target)\r\n RPC.login(name, pswd, false)\r\n .then((res) => {\r\n setCookie('DWebClientSessionID', '', -1)\r\n setCookie('DhWebClientSessionID', '', -1)\r\n /**\r\n * RPC.keepAlive 保活\r\n */\r\n RPC.keepAlive(\r\n 300,\r\n 60000,\r\n _getSession(),\r\n target,\r\n this.WndIndex\r\n )\r\n this.afterLogin()\r\n this.onRealPreview(ip, port, name, pswd) //登录后拉流\r\n })\r\n .catch((err) => {\r\n console.log(err)\r\n loginError(err)\r\n this.$videoLoading.style.display = ''\r\n this.$videoLoading.innerText = '打开失败!'\r\n })\r\n },\r\n /**\r\n * @description 登录之后调用,获取设备能力,获取通道、码流\r\n */\r\n afterLogin() {\r\n this.deviceObject.loginState[this.curDeviceIndex] = true\r\n this.deviceObject.session[this.curDeviceIndex] = _getSession()\r\n this.$stream.options.length = 0\r\n $('#h5_playback_channel').options.length = 0\r\n $('#h5_channel').options.length = 0\r\n /**\r\n * RPC.MagicBox.getProductDefinition 获取产品定义\r\n * @param {string} 'MaxExtraStream' 定义名称\r\n * @returns {Promise}\r\n */\r\n RPC.MagicBox.getProductDefinition('MaxExtraStream').then(\r\n (params) => {\r\n let maxExtra = params.definition\r\n this.$stream.options.add(new Option('主码流', 0))\r\n if (maxExtra > 1) {\r\n for (let i = 1; i <= maxExtra; i++) {\r\n this.$stream.options.add(\r\n new Option('辅码流' + i, i)\r\n )\r\n }\r\n } else {\r\n this.$stream.options.add(new Option('辅码流', 1))\r\n }\r\n }\r\n )\r\n let curDate = new Date()\r\n let dateString = curDate.toLocaleDateString()\r\n let dateSplit = dateString.split('/')\r\n let month = dateSplit[1] - 0\r\n if (month < 10) {\r\n dateSplit[1] = '0' + month\r\n }\r\n let day = dateSplit[2] - 0\r\n if (day < 10) {\r\n dateSplit[2] = '0' + day\r\n }\r\n let date = dateSplit.join('-')\r\n $('#h5_startTime').value = date + 'T' + '00:00'\r\n $('#h5_endTime').value = date + 'T' + '23:59:59'\r\n },\r\n onRealPreview(ip, port, name, pswd) {\r\n if (this.playerInstance[this.WndIndex]) {\r\n this.playerInstance[this.WndIndex].stop()\r\n this.playerInstance[this.WndIndex].close()\r\n this.playerInstance[this.WndIndex] = null\r\n let dom = this.$canvas\r\n if (dom.style.display === 'none') {\r\n dom = this.$video\r\n }\r\n dom.style.display = 'none'\r\n }\r\n var player = null\r\n let curChannel = channel + 1 //无插件通道号从1开始\r\n let stream = this.$stream.value - 0\r\n let options = {\r\n wsURL: 'ws://' + ip + ':' + port + '/rtspoverwebsocket',\r\n rtspURL:\r\n 'rtsp://' +\r\n ip +\r\n ':' +\r\n port +\r\n '/cam/realmonitor?channel=' +\r\n curChannel +\r\n '&subtype=' +\r\n stream +\r\n '&proto=Private3',\r\n username: name,\r\n password: pswd,\r\n lessRateCanvas: true,\r\n }\r\n player = new PlayerControl(options)\r\n player.on('MSEResolutionChanged', (e) => {\r\n console.log(e)\r\n })\r\n player.on('PlayStart', (e) => {\r\n console.log(e)\r\n this.$canvas.parentNode.setAttribute(\r\n 'deviceindex',\r\n this.curDeviceIndex\r\n )\r\n this.$videoLoading.style.display = 'none'\r\n // let curWndType =\r\n // _doc.querySelector('[sel-for=onChangeWdnNum]').value - 0\r\n // let _newDom = _doc.querySelector(\r\n // '.h5-menu-list li:nth-child(' + (curDeviceIndex + 2) + ')'\r\n // )\r\n // let hasLoginNum = getLoginState()\r\n // if (\r\n // curWndType !== 1 &&\r\n // _newDom != null &&\r\n // isStartAll &&\r\n // hasLoginNum < curWndType * curWndType\r\n // ) {\r\n // clickNextWnd()\r\n // _newDom.click()\r\n // } else {\r\n // isStartAll = false\r\n // }\r\n })\r\n player.on('DecodeStart', (e) => {\r\n console.log(e)\r\n if (e.decodeMode === 'video') {\r\n this.$canvas.style.display = 'none'\r\n this.$video.style.display = ''\r\n } else {\r\n this.$video.style.display = 'none'\r\n this.$canvas.style.display = ''\r\n }\r\n canvasSon = new PluginCanvasES6()\r\n\r\n canvasSon.init(this.$canvas_ivs, (data) => {\r\n this.rebackActivateLocalEnlarging(data)\r\n })\r\n canvasSon.addChangeShapeEvent()\r\n this.playerInstance[WndIndex] = player\r\n this.ivsInstance[WndIndex] = canvasSon\r\n })\r\n player.on('GetFrameRate', function (e) {\r\n console.log('GetFrameRate: ' + e)\r\n })\r\n player.on('FrameTypeChange', function (e) {\r\n console.log('FrameTypeChange: ' + e)\r\n })\r\n player.on('Error', function (e) {\r\n //console.log('Error: ' + JSON.stringify(e))\r\n })\r\n player.on('WorkerReady', function () {\r\n player.connect()\r\n })\r\n player.init(this.$canvas, this.$video)\r\n this.$videoLoading.style.display = ''\r\n this.$videoLoading.innerText = '加载中...'\r\n },\r\n /**\r\n * @description 设置登录状态\r\n * @param {boolean} bool 设备是否已经登录\r\n */\r\n setLoginState(bool) {\r\n isLogin = bool\r\n },\r\n /**\r\n * @description 绘制电子放大后的回调函数\r\n * @param {object} data 矩形框的坐标信息\r\n */\r\n rebackActivateLocalEnlarging(data) {\r\n if (this.curEnlargeWnd != this.WndIndex) return\r\n let pos = data.data\r\n let newData\r\n if (pos[0][0] === pos[1][0]) {\r\n // return false;\r\n } else {\r\n newData = {\r\n left: pos[0][0],\r\n top: pos[0][1],\r\n right: pos[1][0],\r\n bottom: pos[1][1],\r\n }\r\n }\r\n let dom = this.$canvas\r\n if (dom.style.display === 'none') {\r\n dom = this.$video\r\n }\r\n // 倒着画\r\n if (newData.right < newData.left) {\r\n let tmp = newData.left\r\n newData.left = newData.right\r\n newData.right = tmp\r\n }\r\n\r\n if (newData.bottom < newData.top) {\r\n let tmp = newData.top\r\n newData.top = newData.bottom\r\n newData.bottom = tmp\r\n }\r\n\r\n let scaleW =\r\n this.$video_wrap.childNodes[this.WndIndex].clientWidth / 8191\r\n let scaleH =\r\n this.$video_wrap.childNodes[this.WndIndex].clientHeight / 8191\r\n\r\n let result = zoomArea(\r\n newData.left * scaleW,\r\n newData.top * scaleH,\r\n newData.right * scaleW,\r\n newData.bottom * scaleH,\r\n this.$video_wrap.childNodes[this.WndIndex].clientWidth,\r\n this.$video_wrap.childNodes[this.WndIndex].clientHeight\r\n )\r\n dom.style.width = result.width + 'px'\r\n dom.style.height = result.height + 'px'\r\n dom.style.left = result.left + 'px'\r\n dom.style.top = result.top + 'px'\r\n dom.style.position = 'absolute'\r\n this.ivsInstance[this.WndIndex].removeShapeDrawEvent()\r\n },\r\n },\r\n}\r\n",null]}