diff --git a/.history/public/webs/css/style_20231212102045.css b/.history/public/webs/css/style_20231212102045.css new file mode 100644 index 0000000..1e9ac83 --- /dev/null +++ b/.history/public/webs/css/style_20231212102045.css @@ -0,0 +1,32 @@ +@charset "utf-8"; +* { + margin:0; + padding:0; +} +html { + width:100%; + height:100%; + font-size:12px; + font-family:Arial, Helvetica, sans-serif; + -webkit-text-size-adjust:none; + background:#FFFFFF; + overflow: hidden; +} +body { + width: 100%; + height: 100%; + overflow: hidden; +} +.h5-left { + width: 100%; + height: 100%; +} + +.h5-play-wrap { + width: auto; + height: auto; + background-color: #000; + border: 1px solid #333; + position: relative; + overflow: hidden; +} diff --git a/.history/public/webs/index_20231212101944.js b/.history/public/webs/index_20231212101944.js new file mode 100644 index 0000000..adec45d --- /dev/null +++ b/.history/public/webs/index_20231212101944.js @@ -0,0 +1,306 @@ +let $ip, + $port, + $user, + $password, + $loginState, + $stream, + $volume, + $canvas, //canvas播放视频DOM + $video, //video播放视频DOM + $canvas_ivs, //canvas绘图DOM + $video_wrap, //视频外层Wrap + $videoLoading, //“加载中...”提示 + WndIndex = 0, //宫格窗口Id + WebCaps = null; //webCapsConfig文件转存变量 +let isLogin = false; //是否登录 +let channel = 0; //当前通道 +let curPage = 1; //视频下载列表的当前页 +let totalPage = 1; //视频下载列表的总页数 +let recordArr = []; //视频文件数组 +let canvasSon = null; //canvas绘图实例 +let playerInstance = []; //播放|回放实例数组 +let recordInstance = []; //录像下载实例数组 +let talkInstance = []; //对讲实例数组 +let ivsInstance = []; //canvas绘图实例数组 +let cutInstance = []; //视频裁剪实例数组 +let onlineChannel = []; //当前成功拉流的视频通道数组 +let isCuting = false; //是否正在进行视频裁剪 +let downList = []; //勾选的视频下载列表 +let downItemIndex = 0; //视频下载索引 +let canvasParam = { + //canvas绘图默认传参 + strokeColor: "#FF0000", + title: "", + resizeEnable: false, + moveEnable: false, + closeEnable: true, + array: true, + showSize: false, + selectType: "inSide", + disappear: true, + selected: false, +}; +const lINENUMBER = 16; //回放列表每页显示录像条数 +let curEnlargeWnd = 0; + +/** + * @description 初始化 + */ +const init = () => { + let videoStr = ""; + for (var i = 0; i < 16; i++) { + videoStr += + '
'; + } + document.querySelector(".h5-play-wrap").innerHTML = videoStr; + document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => { + item.addEventListener("click", function (event) { + let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0; + if ( + !(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback) + ) { + channel = event.target.parentNode.getAttribute("channel") - 0; + document.querySelectorAll("#h5_channel_list li").forEach((item) => { + item.classList.remove("fn-fontRed"); + }); + } + document + .querySelectorAll(".h5-play-wrap div") + .forEach(function (item, index) { + if (index === _wndIndex) { + item.style.borderColor = "rgb(255, 204, 0)"; + if ( + !( + playerInstance[_wndIndex] && + playerInstance[_wndIndex].isPlayback + ) + ) { + if (onlineChannel.indexOf(channel) > -1) { + document + .querySelector( + '#h5_channel_list li[channel="' + channel + '"]' + ) + .classList.add("fn-fontRed"); + } + } + WndIndex = _wndIndex; + setVideoDom(); + } else { + item.style.borderColor = "rgb(125, 125, 125)"; + } + }); + }); + }); + $ip = $("#h5_ip"); + $port = $("#h5_port"); + $user = $("#h5_user"); + $password = $("#h5_password"); + $loginState = $("#h5_loginState"); + $stream = $("#h5_stream"); + $volume = $("#h5_volume"); + $video_wrap = document.querySelector(".h5-play-wrap"); + setVideoDom(); + + let inputArr = document.querySelectorAll("input[btn-for]"); + for (let node of inputArr) { + node.addEventListener("click", bindClickEvent); + } + + let selArr = document.querySelectorAll("select[sel-for]"); + for (let node of selArr) { + node.addEventListener("change", bindChangeEvent); + } + [ + "fullscreenchange", + "webkitfullscreenchange", + "mozfullscreenchange", + "msfullscreenchange", + ].forEach((item, index) => { + document.addEventListener(item, fullscreenchange, false); + }); + onPreview(false); +}; +/** + * @description 切换宫格时重新设置当前视频dom + */ +const setVideoDom = () => { + $canvas = $("#h5_canvas_" + WndIndex); + $video = $("#h5_video_" + WndIndex); + $canvas_ivs = $("#h5_ivs_" + WndIndex); + $videoLoading = $("#h5_loading_" + WndIndex); +}; +/** +/** + * @description 预览 + * @param {boolean} isPlayback 是否是回放 + * @param {string} url 回放视频的url + * @param {number} playbackIndex 回放视频的索引 + * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流 + */ +const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => { + if ( + playerInstance[WndIndex] && + onlineChannel.indexOf(channel) > -1 && + !isChangeStream + ) { + alert("通道" + (channel + 1) + "已存在!"); + return; + } + onStopPreview(); + var player = null + let options = { + + wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket", + rtspURL: + "rtsp://" + + "221.214.127.18" + + ":" + + "8200" + + "/cam/realmonitor?channel=10" + + "&subtype=0" + + "&proto=Private3", + username: "admin", + password: "pyss2017", + lessRateCanvas: true, + playback: isPlayback, + isPrivateProtocol: false, + realm: RPC.realm, //设备登录返回的realm + playbackIndex: playbackIndex, + }; + player = new PlayerControl(options); + + player.on("MSEResolutionChanged", function (e) { + console.log(e); + }); + player.on("PlayStart", function (e) { + console.log(e); + $videoLoading.style.display = "none"; + if (!player.isPlayback) { + onlineChannel.push(channel); + updateChannelList(); + // if(curWndType !== 1) { + // clickNextWnd(); + // } + } + }); + + player.on("GetFrameRate", function (e) { + console.log("GetFrameRate: " + e); + }); + player.on("FrameTypeChange", function (e) { + console.log("FrameTypeChange: " + e); + }); + player.on("Error", function (e) { + //console.log('Error: ' + JSON.stringify(e)) + }); + player.on("IvsDraw", function (e) { + //console.log('IvsDraw: ' + JSON.stringify(e)) + }); + player.on("WorkerReady", function () { + player.connect(); + }); + player.init($canvas, $video); + $canvas.parentNode.setAttribute("channel", channel); + $videoLoading.style.display = ""; +}; +/** + * @description 更新通道列表 + */ +const updateChannelList = () => { + document.querySelectorAll("#h5_channel_list li").forEach((item) => { + item.classList.remove("fn-fontBlue"); + item.classList.remove("fn-fontRed"); + if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) { + item.classList.add("fn-fontBlue"); + } + }); +}; +/** + * @description 停止预览 + */ +const onStopPreview = () => { + if (playerInstance[WndIndex]) { + playerInstance[WndIndex].stop(); + playerInstance[WndIndex].close(); + playerInstance[WndIndex] = null; + let _index = onlineChannel.indexOf(channel); + onlineChannel.splice(_index, 1); + updateChannelList(); + let dom = $canvas; + if (dom.style.display === "none") { + dom = $video; + } + dom.style.display = "none"; + if (talkInstance[WndIndex]) { + talkInstance[WndIndex].talk("off"); + talkInstance[WndIndex] = null; + } + if (recordInstance[WndIndex]) { + recordInstance[WndIndex].startRecord(false); + recordInstance[WndIndex] = null; + } + } +}; +/** + * @description 自定义选择器 + * @param {string} str dom元素 + */ +function $(str) { + if (str.charAt(0) == "#") { + return document.getElementById(str.substring(1)); + } else if (str.charAt(0) == ".") { + return document.getElementsByClassName(str.substring(1)); + } else { + return document.getElementsByTagName(str); + } +} +/** + * @description 设置样式 + * @param {object} obj dom元素 + * @param {*} json css样式 + */ +function setStyle(obj, json) { + for (let i in json) { + obj.style[i] = json[i]; + } +} +/** + * @description 绑定click事件 + * @param {object} event event对象 + */ +function bindClickEvent(event) { + let $el = event.target, + method = $el.getAttribute("btn-for"), + disabled = $el.getAttribute("disabled"); + if (!disabled) { + eval(method + "()"); + } +} +/** + * @description 绑定change事件 + * @param {object} event event对象 + */ +function bindChangeEvent(event) { + let $el = event.target, + method = $el.getAttribute("sel-for"), + disabled = $el.getAttribute("disabled"); + if (!disabled) { + eval(method + "()"); + } +} +function fullscreenchange() { + if (getFull()) { + return; + } +} +init(); diff --git a/.history/src/views/Zhou/ZNYWJK_20231212102212.vue b/.history/src/views/Zhou/ZNYWJK_20231212102212.vue new file mode 100644 index 0000000..f43771d --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212102212.vue @@ -0,0 +1,1148 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212102221.vue b/.history/src/views/Zhou/ZNYWJK_20231212102221.vue new file mode 100644 index 0000000..7bcf0e5 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212102221.vue @@ -0,0 +1,1148 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212102231.vue b/.history/src/views/Zhou/ZNYWJK_20231212102231.vue new file mode 100644 index 0000000..219eebb --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212102231.vue @@ -0,0 +1,1148 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212102239.vue b/.history/src/views/Zhou/ZNYWJK_20231212102239.vue new file mode 100644 index 0000000..8bae20e --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212102239.vue @@ -0,0 +1,1148 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212102313.vue b/.history/src/views/Zhou/ZNYWJK_20231212102313.vue new file mode 100644 index 0000000..4616f6a --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212102313.vue @@ -0,0 +1,1139 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212102322.vue b/.history/src/views/Zhou/ZNYWJK_20231212102322.vue new file mode 100644 index 0000000..cfbd9c5 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212102322.vue @@ -0,0 +1,1138 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212105852.vue b/.history/src/views/Zhou/ZNYWJK_20231212105852.vue new file mode 100644 index 0000000..6d4f62c --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212105852.vue @@ -0,0 +1,1139 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212105920.vue b/.history/src/views/Zhou/ZNYWJK_20231212105920.vue new file mode 100644 index 0000000..d83470a --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212105920.vue @@ -0,0 +1,1141 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110223.vue b/.history/src/views/Zhou/ZNYWJK_20231212110223.vue new file mode 100644 index 0000000..0f245a3 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110223.vue @@ -0,0 +1,1159 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110304.vue b/.history/src/views/Zhou/ZNYWJK_20231212110304.vue new file mode 100644 index 0000000..b7f5572 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110304.vue @@ -0,0 +1,1159 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110313.vue b/.history/src/views/Zhou/ZNYWJK_20231212110313.vue new file mode 100644 index 0000000..27b7e14 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110313.vue @@ -0,0 +1,1159 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110323.vue b/.history/src/views/Zhou/ZNYWJK_20231212110323.vue new file mode 100644 index 0000000..64ae8c4 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110323.vue @@ -0,0 +1,1160 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110328.vue b/.history/src/views/Zhou/ZNYWJK_20231212110328.vue new file mode 100644 index 0000000..cb69840 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110328.vue @@ -0,0 +1,1161 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110405.vue b/.history/src/views/Zhou/ZNYWJK_20231212110405.vue new file mode 100644 index 0000000..4e5ec5f --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110405.vue @@ -0,0 +1,1161 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110411.vue b/.history/src/views/Zhou/ZNYWJK_20231212110411.vue new file mode 100644 index 0000000..f91f552 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110411.vue @@ -0,0 +1,1161 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110529.vue b/.history/src/views/Zhou/ZNYWJK_20231212110529.vue new file mode 100644 index 0000000..8dd6051 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110529.vue @@ -0,0 +1,1161 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110534.vue b/.history/src/views/Zhou/ZNYWJK_20231212110534.vue new file mode 100644 index 0000000..f9a956d --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110534.vue @@ -0,0 +1,1161 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212110629.vue b/.history/src/views/Zhou/ZNYWJK_20231212110629.vue new file mode 100644 index 0000000..d9c6346 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212110629.vue @@ -0,0 +1,1157 @@ + + + diff --git a/public/webs/css/style.css b/public/webs/css/style.css index 8af0526..1e9ac83 100644 --- a/public/webs/css/style.css +++ b/public/webs/css/style.css @@ -13,7 +13,6 @@ html { overflow: hidden; } body { -<<<<<<< HEAD width: 100%; height: 100%; overflow: hidden; @@ -26,206 +25,8 @@ body { .h5-play-wrap { width: auto; height: auto; -======= - padding:10px; - min-width: 1280px; - width: 100%; - height: 100%; - overflow: scroll; -} -.h5-left, -.h5-right { - float: left; - margin-right: 20px; -} -.fn-padl10 { - padding-left: 10px; -} -.fn-marl10 { - margin-left: 10px; -} -.fn-clear { - clear: both; -} -.fn-overflow { - overflow: hidden; -} -.fn-width100 { - width: 100px; -} -.fn-marl10 { - margin-left: 10px; -} -.fn-marl150 { - margin-left: 150px; -} -.fn-mart10 { - margin-top: 10px; -} -.fn-fontBlue { - color: blue; -} -.fn-fontRed { - color: red !important; -} -.fn-lightBorder { - border: 1px solid rgb(255, 204, 0) !important; -} -.fn-normalBorder { - border: 1px solid rgb(125, 125, 125) !important; -} -fieldset { - display:block; - margin-top: 10px; -} -fieldset legend{ - font-size: 14px; -} -.h5-play-wrap { - width: 500px; - height: 300px; ->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e background-color: #000; border: 1px solid #333; position: relative; overflow: hidden; } -<<<<<<< HEAD -======= -.h5-fieldset-wrap { - width: 520px; - padding: 10px; - border: 1px solid #333; -} -.h5-form-item { - float: left; - height: auto; - overflow: hidden; - margin-bottom: 5px; -} -.h5-form-item label { - width: 80px; - display: inline-block; -} -.h5-form-item input { - width: 130px; -} -.h5-form-item select { - width: 134px; -} -.h5-form-item span { - width: 60px; -} -.h5-form-item .h5-button { - width: 80px; - height: 30px; - font-size: 12px; -} -.h5-ptz-wrap { - width: 210px; - float: left; -} -.h5-step-wrap { - margin-bottom: 10px; -} -.h5-zoomfocus-wrap { - width: 200px; - float: left; -} -.h5-preset-wrap { - float: left; - margin-top: 10px; -} -.h5-ptz-wrap .h5-button { - width: 60px; - height: 30px; - margin-bottom: 3px; -} -.h5-zoomfocus-wrap .h5-button { - width: 80px; - height: 30px; - margin-bottom: 3px; -} -.h5-preset-wrap .h5-button { - width: 60px; - height: 30px; - margin-bottom: 3px; -} -.h5-preset-wrap input { - width: 130px; -} -.h5-table { - border-collapse: collapse; - background: #ddd; - width: 600px; - float: left; - height: 300px; - display: block; - overflow-y: scroll; -} -.h5-table tbody tr:nth-child(odd) { - background-color: #fff; -} - -.h5-table tr td{ - text-align: center; - padding: 5px 0; - border: 1px solid #999; -} -.h5-table tr:hover{ - cursor: text; -} -a.i-download { - display: block; - width: 20px; - height: 20px; - margin: 0 auto; - cursor: pointer; - background: #cccccc; - border-radius: 50%; -} -a.i-download:hover { - background: #999; -} -.h5-page { - text-align: right; - margin-top: 10px; - margin-right: 18px; - display: block; - float: left; -} -.h5-ul { - float: left; - background: #ccc; - list-style: none; - max-height: 250px; - overflow-y: scroll; -} -.h5-ul li { - cursor: pointer; - height: 20px; - line-height: 20px; -} -.h5-ul li:hover { - background-color: #eee; -} -.video_loading{ - position: absolute; - top: 0; - left: 0; - color: #fff; -} -.h5-menu-list { - margin-top: 40px; - background-color: #ccc; -} -.h5-menu-list li { - height: 40px; - line-height: 40px; - font-size: 20px; - cursor: pointer; -} -.h5-menu-list li:hover { - background-color: #eee; -} ->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e diff --git a/public/webs/index.js b/public/webs/index.js index 37bd1ad..adec45d 100644 --- a/public/webs/index.js +++ b/public/webs/index.js @@ -157,14 +157,9 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => { return; } onStopPreview(); -<<<<<<< HEAD var player = null let options = { -======= - var player = null; - let options = { ->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket", rtspURL: "rtsp://" + diff --git a/src/views/Zhou/ZNYWJK.vue b/src/views/Zhou/ZNYWJK.vue index 0830e3f..d9c6346 100644 --- a/src/views/Zhou/ZNYWJK.vue +++ b/src/views/Zhou/ZNYWJK.vue @@ -25,7 +25,7 @@ >;