{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\thread-loader\\dist\\cjs.js!D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js!D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"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":["import \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/web.dom.iterable\";\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//\n//\n\n/**\r\n * @description 自定义选择器\r\n * @param {string} str dom元素\r\n */\nfunction $(str) {\n  if (str.charAt(0) == '#') {\n    return document.getElementById(str.substring(1));\n  } else if (str.charAt(0) == '.') {\n    return document.getElementsByClassName(str.substring(1));\n  } else {\n    return document.getElementsByTagName(str);\n  }\n}\n\nexport default {\n  name: 'videoPlayerDH',\n  props: {\n    wrapperName: {\n      type: String,\n      default: 'h5-play-wrap'\n    },\n    showWdn: {\n      type: Boolean,\n      default: true\n    },\n    showFull: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data: function data() {\n    return {\n      curDeviceIndex: 0,\n      deviceObject: {\n        loginState: [],\n        session: []\n      },\n      $loginState: '',\n      $stream: '',\n      $volume: '',\n      $canvas: '',\n      //canvas播放视频DOM\n      $video: '',\n      //video播放视频DOM\n      $canvas_ivs: '',\n      //canvas绘图DOM\n      $video_wrap: '',\n      //视频外层Wrap\n      $videoLoading: '',\n      //“加载中...”提示\n      player: null,\n      playerInstance: [],\n      //播放|回放实例数组\n      channel: 0,\n      //当前通道\n      curEnlargeWnd: 0,\n      onlineChannel: [],\n      //当前成功拉流的视频通道数组\n      WndIndex: 0,\n      //宫格窗口Id\n      ivsInstance: [],\n      //canvas绘图实例数组\n      curWndType: 1 //窗口分割类型\n\n    };\n  },\n  created: function created() {},\n  mounted: function mounted() {\n    this.init();\n  },\n  beforeDestroy: function beforeDestroy() {\n    this.stopAll();\n  },\n  methods: {\n    stopAll: function stopAll() {\n      this.playerInstance.forEach(function (item) {\n        if (item) {\n          item.close();\n          item = null;\n        }\n      });\n    },\n    play: function play(videoData) {\n      var _this = this;\n\n      var ip = videoData.ip,\n          cameraCode = videoData.cameraCode,\n          dyAccount = videoData.dyAccount,\n          dyPassword = videoData.dyPassword;\n\n      if (this.playerInstance[this.WndIndex]) {\n        this.playerInstance[this.WndIndex].close();\n        this.playerInstance[this.WndIndex] = null;\n        console.log('停止');\n      }\n\n      var channel = cameraCode ? cameraCode : 1;\n\n      if (!dyAccount || !dyPassword) {\n        this.$message.warning('摄像机数据获取失败！');\n      }\n\n      var options = {\n        wsURL: \"ws://\".concat(ip, \"/rtspoverwebsocket\"),\n        rtspURL: \"rtsp://\".concat(ip, \"/cam/realmonitor?channel=\").concat(channel, \"&subtype=0&proto=Private3\"),\n        username: dyAccount,\n        password: dyPassword\n      };\n      this.$videoLoading.style.display = '';\n      this.$videoLoading.innerText = '加载中...';\n      var player = new PlayerControl(options);\n      this.playerInstance[this.WndIndex] = player;\n      player.on('WorkerReady', function () {\n        player.connect();\n        _this.$videoLoading.style.display = '';\n        _this.$videoLoading.innerText = '连接中...';\n      });\n      player.on('PlayStart', function () {\n        _this.$videoLoading.style.display = 'none';\n        _this.$videoLoading.innerText = '';\n      });\n      player.on('Error', function (rs) {\n        console.log(rs, rs.description, 'error');\n        var message = '打开失败！';\n        if (rs.description) message = rs.description;\n        if (rs.errorCode == 101) message = '';\n        _this.$videoLoading.style.display = '';\n        _this.$videoLoading.innerText = message;\n      });\n      player.init(this.$canvas, this.$video);\n    },\n    stop: function stop() {\n      this.playerInstance[this.WndIndex].close();\n    },\n\n    /**\r\n     * @description 初始化\r\n     */\n    init: function init() {\n      var _this2 = this;\n\n      var initWidth = '50%';\n\n      if (!this.showWdn) {\n        initWidth = '100%';\n      }\n\n      var videoStr = '';\n\n      for (var i = 0; i < 16; i++) {\n        videoStr += '<div wnd-index=\"' + i + '\" style=\"float: left; background-color: #000; position: relative; width: calc(' + initWidth + ' - 2px); height: calc(' + initWidth + ' - 2px);overflow:hidden;border:1px solid rgb(125,125,125)\"><canvas id=\"h5_canvas_' + i + '_' + this.wrapperName + '\" style=\"width:100%;height:100%;\"></canvas><p id=\"h5_loading_' + i + '_' + this.wrapperName + '\" class=\"video_loading\"  style=\"display:none; position: absolute; top: 50%; left: 50%; color: #fff; transform:translate(-50%,-50%)\">加载中...</p><video id=\"h5_video_' + i + '_' + this.wrapperName + '\" style=\"display: none;width:100%;height:100%;position:absolute;top:0;left:0\"></video><canvas id=\"h5_ivs_' + i + '_' + this.wrapperName + '\" style=\"position: absolute;left: 0;top: 0;width: 100%;height: 100%;\" width=\"500\" height=\"300\"></canvas></div>';\n      }\n\n      document.querySelector(\".\".concat(this.wrapperName)).innerHTML = videoStr;\n      document.querySelectorAll(\".\".concat(this.wrapperName, \" div\")).forEach(function (item, index) {\n        item.addEventListener('click', function (event) {\n          var _wndIndex = event.target.parentNode.getAttribute('wnd-index') - 0;\n\n          if (!(_this2.playerInstance[_wndIndex] && _this2.playerInstance[_wndIndex].isPlayback)) {\n            _this2.channel = event.target.parentNode.getAttribute('channel') - 0;\n            document.querySelectorAll('#h5_channel_list li').forEach(function (item) {\n              item.classList.remove('fn-fontRed');\n            });\n          }\n\n          document.querySelectorAll(\".\".concat(_this2.wrapperName, \" div\")).forEach(function (item, index) {\n            if (index === _wndIndex && _this2.showWdn) {\n              item.style.borderColor = 'rgb(255, 204, 0)';\n\n              if (!(_this2.playerInstance[_wndIndex] && _this2.playerInstance[_wndIndex].isPlayback)) {\n                if (_this2.onlineChannel.indexOf(_this2.channel) > -1) {\n                  document.querySelector('#h5_channel_list li[channel=\"' + _this2.channel + '\"]').classList.add('fn-fontRed');\n                }\n              }\n\n              _this2.WndIndex = _wndIndex;\n\n              _this2.setVideoDom();\n            } else {\n              item.style.borderColor = 'rgb(125, 125, 125)';\n            }\n          });\n        });\n      });\n      this.$video_wrap = document.querySelector(\".\".concat(this.wrapperName));\n      this.setVideoDom();\n      ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach(function (item, index) {\n        document.addEventListener(item, _this2.fullscreenchange, false);\n      });\n    },\n\n    /**\r\n     * @description 切换宫格时重新设置当前视频dom\r\n     */\n    setVideoDom: function setVideoDom() {\n      this.$canvas = $('#h5_canvas_' + this.WndIndex + '_' + this.wrapperName);\n      this.$video = $('#h5_video_' + this.WndIndex + '_' + this.wrapperName);\n      this.$canvas_ivs = $('#h5_ivs_' + this.WndIndex + '_' + this.wrapperName);\n      this.$videoLoading = $('#h5_loading_' + this.WndIndex + '_' + this.wrapperName);\n    },\n\n    /**\r\n     * @description 切换窗口分割\r\n     */\n    onChangeWdnNum: function onChangeWdnNum(val) {\n      var ivsDom = document.querySelectorAll('[id^=h5_ivs_]');\n      var divDom = document.querySelectorAll(\".\".concat(this.wrapperName, \" div\"));\n      this.curWndType = val;\n\n      if (val === '1') {\n        divDom.forEach(function (item) {\n          item.style.width = 'calc(100% - 2px)';\n          item.style.height = 'calc(100% - 2px)';\n          item.style.borderColor = '#000';\n        });\n      } else if (val === '2') {\n        divDom.forEach(function (item, index) {\n          item.style.width = 'calc(50% - 2px)';\n          item.style.height = 'calc(50% - 2px)';\n\n          if (index === 0) {\n            item.style.borderColor = ' rgb(255, 204, 0)';\n          } else {\n            item.style.borderColor = ' rgb(125, 125, 125)';\n          }\n        });\n      } else if (val === '3') {\n        divDom.forEach(function (item, index) {\n          item.style.height = 'calc(33.333% - 2px)';\n          item.style.width = 'calc(33.333% - 2px)';\n\n          if (index === 0) {\n            item.style.borderColor = ' rgb(255, 204, 0)';\n          } else {\n            item.style.borderColor = ' rgb(125, 125, 125)';\n          }\n        });\n      } else if (val === '4') {\n        divDom.forEach(function (item, index) {\n          item.style.width = 'calc(25% - 2px)';\n          item.style.height = 'calc(25% - 2px)';\n\n          if (index === 0) {\n            item.style.borderColor = 'rgb(255, 204, 0)';\n          } else {\n            item.style.borderColor = 'rgb(125, 125, 125)';\n          }\n        });\n      }\n\n      ivsDom.forEach(function (item) {\n        item.setAttribute('width', \"\".concat(item.parentNode.clientWidth));\n        item.setAttribute('height', \"\".concat(item.parentNode.clientHeight));\n      });\n      this.ivsInstance.forEach(function (item) {\n        item && item.resize();\n      });\n      document.querySelector('#h5_ivs_0').click();\n    },\n\n    /**\r\n     * @description 设置全屏\r\n     */\n    onSetFull: function onSetFull() {\n      debugger;\n\n      if (this.getFull()) {\n        this.exitfullScreen();\n      } else {\n        this.setfullScreen();\n      }\n    },\n\n    /**\r\n     * @description 获取全屏状态\r\n     */\n    getFull: function getFull() {\n      return window.top.document.mozFullScreen || window.top.document.webkitIsFullScreen || window.top.document.msFullscreenElement;\n    },\n\n    /**\r\n     * @description 全屏状态改变的回调事件\r\n     */\n    fullscreenchange: function fullscreenchange() {\n      if (this.getFull()) {\n        return;\n      } else {\n        this.exitfullScreen();\n      }\n    },\n\n    /**\r\n     * @description 设置全屏\r\n     */\n    setfullScreen: function setfullScreen() {\n      var docElm = window.top.document.documentElement;\n\n      if (docElm.requestFullScreen) {\n        docElm.requestFullScreen();\n      } else if (docElm.mozRequestFullScreen) {\n        docElm.mozRequestFullScreen();\n      } else if (docElm.webkitRequestFullScreen) {\n        docElm.webkitRequestFullScreen();\n      } else if (docElm.msRequestFullscreen) {\n        docElm.msRequestFullscreen();\n      }\n\n      this.handleFullscreen(true);\n    },\n\n    /**\r\n     * @description 退出全屏\r\n     */\n    exitfullScreen: function exitfullScreen() {\n      var docElm = window.top.document.documentElement;\n\n      if (docElm.exitFullscreen) {\n        docElm.exitFullscreen();\n      } else if (docElm.mozCancelFullScreen) {\n        docElm.mozCancelFullScreen();\n      } else if (docElm.webkitCancelFullScreen) {\n        docElm.webkitCancelFullScreen();\n      } else if (docElm.msExitFullscreen) {\n        docElm.msExitFullscreen();\n      }\n\n      this.handleFullscreen(false);\n    },\n\n    /**\r\n     * @description 处理全屏开关时的窗口大小\r\n     * @param {boolean} bool 是否要全屏\r\n     */\n    handleFullscreen: function handleFullscreen(bool) {\n      if (bool) {\n        var wrap = {\n          position: 'fixed',\n          left: 0,\n          top: 0,\n          width: window.screen.width + 'px',\n          height: window.screen.height + 'px',\n          overflow: 'visible',\n          zIndex: 1\n        };\n        this.setStyle(this.$video_wrap, wrap);\n      } else {\n        var _wrap = {\n          position: 'relative',\n          overflow: 'hidden',\n          width: '100%',\n          height: '100%'\n        };\n        this.setStyle(this.$video_wrap, _wrap);\n      }\n    },\n\n    /**\r\n     * @description 设置样式\r\n     * @param {object} obj dom元素\r\n     * @param {*} json css样式\r\n     */\n    setStyle: function setStyle(obj, json) {\n      for (var i in json) {\n        obj.style[i] = json[i];\n      }\n    },\n\n    /**\r\n     * @description 登录\r\n     */\n    onLogin: function onLogin(ip) {\n      var _this3 = this;\n\n      this.playerInstance.forEach(function (item) {\n        if (item) {\n          item.close();\n          item = null;\n        }\n      }); // $('#h5_channel_list').innerHTML = ''\n      // $('#h5_playback_channel').options.length = 0\n\n      this.onlineChannel = [];\n      var port = '80';\n      var name = 'admin';\n      var pswd = 'CQ@hik12345.';\n      var target = ip + ':' + port;\n      setIP(target);\n      RPC.login(name, pswd, false).then(function (res) {\n        setCookie('DWebClientSessionID', '', -1);\n        setCookie('DhWebClientSessionID', '', -1);\n        /**\r\n         * RPC.keepAlive 保活\r\n         */\n\n        RPC.keepAlive(300, 60000, _getSession(), target, _this3.WndIndex);\n\n        _this3.afterLogin();\n\n        _this3.onRealPreview(ip, port, name, pswd); //登录后拉流\n\n      }).catch(function (err) {\n        console.log(err);\n        loginError(err);\n        _this3.$videoLoading.style.display = '';\n        _this3.$videoLoading.innerText = '打开失败！';\n      });\n    },\n\n    /**\r\n     * @description 登录之后调用，获取设备能力，获取通道、码流\r\n     */\n    afterLogin: function afterLogin() {\n      var _this4 = this;\n\n      this.deviceObject.loginState[this.curDeviceIndex] = true;\n      this.deviceObject.session[this.curDeviceIndex] = _getSession();\n      this.$stream.options.length = 0;\n      $('#h5_playback_channel').options.length = 0;\n      $('#h5_channel').options.length = 0;\n      /**\r\n       * RPC.MagicBox.getProductDefinition 获取产品定义\r\n       * @param {string}  'MaxExtraStream' 定义名称\r\n       * @returns {Promise}\r\n       */\n\n      RPC.MagicBox.getProductDefinition('MaxExtraStream').then(function (params) {\n        var maxExtra = params.definition;\n\n        _this4.$stream.options.add(new Option('主码流', 0));\n\n        if (maxExtra > 1) {\n          for (var i = 1; i <= maxExtra; i++) {\n            _this4.$stream.options.add(new Option('辅码流' + i, i));\n          }\n        } else {\n          _this4.$stream.options.add(new Option('辅码流', 1));\n        }\n      });\n      var curDate = new Date();\n      var dateString = curDate.toLocaleDateString();\n      var dateSplit = dateString.split('/');\n      var month = dateSplit[1] - 0;\n\n      if (month < 10) {\n        dateSplit[1] = '0' + month;\n      }\n\n      var day = dateSplit[2] - 0;\n\n      if (day < 10) {\n        dateSplit[2] = '0' + day;\n      }\n\n      var date = dateSplit.join('-');\n      $('#h5_startTime').value = date + 'T' + '00:00';\n      $('#h5_endTime').value = date + 'T' + '23:59:59';\n    },\n    onRealPreview: function onRealPreview(ip, port, name, pswd) {\n      var _this5 = this;\n\n      if (this.playerInstance[this.WndIndex]) {\n        this.playerInstance[this.WndIndex].stop();\n        this.playerInstance[this.WndIndex].close();\n        this.playerInstance[this.WndIndex] = null;\n        var dom = this.$canvas;\n\n        if (dom.style.display === 'none') {\n          dom = this.$video;\n        }\n\n        dom.style.display = 'none';\n      }\n\n      var player = null;\n      var curChannel = channel + 1; //无插件通道号从1开始\n\n      var stream = this.$stream.value - 0;\n      var options = {\n        wsURL: 'ws://' + ip + ':' + port + '/rtspoverwebsocket',\n        rtspURL: 'rtsp://' + ip + ':' + port + '/cam/realmonitor?channel=' + curChannel + '&subtype=' + stream + '&proto=Private3',\n        username: name,\n        password: pswd,\n        lessRateCanvas: true\n      };\n      player = new PlayerControl(options);\n      player.on('MSEResolutionChanged', function (e) {\n        console.log(e);\n      });\n      player.on('PlayStart', function (e) {\n        console.log(e);\n\n        _this5.$canvas.parentNode.setAttribute('deviceindex', _this5.curDeviceIndex);\n\n        _this5.$videoLoading.style.display = 'none'; // let curWndType =\n        //     _doc.querySelector('[sel-for=onChangeWdnNum]').value - 0\n        // let _newDom = _doc.querySelector(\n        //     '.h5-menu-list li:nth-child(' + (curDeviceIndex + 2) + ')'\n        // )\n        // let hasLoginNum = getLoginState()\n        // if (\n        //     curWndType !== 1 &&\n        //     _newDom != null &&\n        //     isStartAll &&\n        //     hasLoginNum < curWndType * curWndType\n        // ) {\n        //     clickNextWnd()\n        //     _newDom.click()\n        // } else {\n        //     isStartAll = false\n        // }\n      });\n      player.on('DecodeStart', function (e) {\n        console.log(e);\n\n        if (e.decodeMode === 'video') {\n          _this5.$canvas.style.display = 'none';\n          _this5.$video.style.display = '';\n        } else {\n          _this5.$video.style.display = 'none';\n          _this5.$canvas.style.display = '';\n        }\n\n        canvasSon = new PluginCanvasES6();\n        canvasSon.init(_this5.$canvas_ivs, function (data) {\n          _this5.rebackActivateLocalEnlarging(data);\n        });\n        canvasSon.addChangeShapeEvent();\n        _this5.playerInstance[WndIndex] = player;\n        _this5.ivsInstance[WndIndex] = canvasSon;\n      });\n      player.on('GetFrameRate', function (e) {\n        console.log('GetFrameRate: ' + e);\n      });\n      player.on('FrameTypeChange', function (e) {\n        console.log('FrameTypeChange: ' + e);\n      });\n      player.on('Error', function (e) {//console.log('Error: ' + JSON.stringify(e))\n      });\n      player.on('WorkerReady', function () {\n        player.connect();\n      });\n      player.init(this.$canvas, this.$video);\n      this.$videoLoading.style.display = '';\n      this.$videoLoading.innerText = '加载中...';\n    },\n\n    /**\r\n     * @description 设置登录状态\r\n     * @param {boolean} bool 设备是否已经登录\r\n     */\n    setLoginState: function setLoginState(bool) {\n      isLogin = bool;\n    },\n\n    /**\r\n     * @description 绘制电子放大后的回调函数\r\n     * @param {object} data 矩形框的坐标信息\r\n     */\n    rebackActivateLocalEnlarging: function rebackActivateLocalEnlarging(data) {\n      if (this.curEnlargeWnd != this.WndIndex) return;\n      var pos = data.data;\n      var newData;\n\n      if (pos[0][0] === pos[1][0]) {// return false;\n      } else {\n        newData = {\n          left: pos[0][0],\n          top: pos[0][1],\n          right: pos[1][0],\n          bottom: pos[1][1]\n        };\n      }\n\n      var dom = this.$canvas;\n\n      if (dom.style.display === 'none') {\n        dom = this.$video;\n      } // 倒着画\n\n\n      if (newData.right < newData.left) {\n        var tmp = newData.left;\n        newData.left = newData.right;\n        newData.right = tmp;\n      }\n\n      if (newData.bottom < newData.top) {\n        var _tmp = newData.top;\n        newData.top = newData.bottom;\n        newData.bottom = _tmp;\n      }\n\n      var scaleW = this.$video_wrap.childNodes[this.WndIndex].clientWidth / 8191;\n      var scaleH = this.$video_wrap.childNodes[this.WndIndex].clientHeight / 8191;\n      var result = zoomArea(newData.left * scaleW, newData.top * scaleH, newData.right * scaleW, newData.bottom * scaleH, this.$video_wrap.childNodes[this.WndIndex].clientWidth, this.$video_wrap.childNodes[this.WndIndex].clientHeight);\n      dom.style.width = result.width + 'px';\n      dom.style.height = result.height + 'px';\n      dom.style.left = result.left + 'px';\n      dom.style.top = result.top + 'px';\n      dom.style.position = 'absolute';\n      this.ivsInstance[this.WndIndex].removeShapeDrawEvent();\n    }\n  }\n};",null]}