视频监控

css/video/video.css

@@ -157,9 +157,9 @@ body {
 }
 
 #left-top-two {
-    width: 100%;
+    width: 92%;
     height: 26%;
-    justify-content: space-evenly;
+    justify-content: space-between;
 }
 
 #jj-box,
@@ -307,7 +307,7 @@ body {
 /*视频框样式*/
 
 .ball-content {
-    width: 96%;
+    width: 98%;
     height: 94%;
     margin: 4% 1% 0 1%;
     pointer-events: none;
@@ -368,4 +368,37 @@ body {
     justify-content: end;
 }
 
-/* 右侧样式 start */
+/* 右侧样式 start */
+
+/* dtree 样式 start */
+.dtree-nav-item {
+    background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(35, 161, 161, 0.5) 49%, rgba(153, 255, 255, 0) 100%);
+    border-radius: 0px 0px 0px 0px;
+    margin: 10px 0 10px 0;
+}
+
+.dtree-laySimple-item:hover {
+    background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
+    border-radius: 0px 0px 0px 0px;
+}
+
+.dtree-laySimple-item-this {
+    background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
+    border-radius: 0px 0px 0px 0px;
+    color: rgba(50, 251, 251, 0.6) !important;
+}
+
+.dtree-laySimple-item cite {
+    font-size: 16px !important;
+}
+
+.dtree-laySimple-item:hover cite {
+    color: rgba(50, 251, 251, 0.6) !important;
+}
+
+.dtree-laySimple-ficon {
+    font-size: 14px !important;
+    color: #fff !important;
+}
+
+/* dtree 样式 start */

js/pages/video/video.js

@@ -1,15 +1,61 @@
-let layer, form;
+let layer, form, util, dtree, videoTree;
 let winDom = 'videoPlayer1';
-layui.use(['layer', 'form'], function () {
+layui.config({
+    base: "../../plugin/layui-v2.9.7/layui/dtree/", //此处路径请自行处理, 可以使用绝对路径
+}).extend({
+    dtree: 'dtree'
+}).use(['layer', 'form', 'dtree', 'util'], function () {
     form = layui.form;
     layer = layui.layer;
-    $("#voi-photo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
-    $("body").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
-    console.log("选中的标段编码：" + parent.$('#bidPro').val())
+    dtree = layui.dtree;
+    util = layui.util;
     initVideo();
-    setTimeout(() => {
-        QXPlayVideo('201115200124261007', '0', winDom)
-    }, 2000);
-
     loadVideoTree();
+    $("body").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+    $("#voi-photo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+    $("#video-tree").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+    dtree.on("node('video-tree')", function (obj) {
+        if (obj.param.level === '1') {
+            return parent.layer.msg('请选择球机', { icon: 7 });
+        }
+        const nodeId = obj.param.nodeId;
+        let puid = nodeId.replace('QJ', '');
+        if (puid) {
+            parent.layer.msg("视频加载中,请稍候...", { icon: 16, scrollbar: false, time: 1000, });
+            QXPlayVideo(puid, '0', winDom)
+            playControl();
+            videoObject.devCode = puid;
+        } else {
+            return parent.layer.msg('请选择球机', { icon: 7 });
+        }
+    });
+
+    util.event('lay-active', {
+        // 本地抓拍
+        photoLocal: function () {
+            screenshot();
+        },
+        // 远程录像
+        videoRemote: function () {
+            if (videoObject.playState) {
+                if (isEmpty(videoObject.remoteId)) {
+                    // $(this).attr("src", "../../img/video/videoRemote-select.png");
+                    remoteVideo(videoObject.devCode, 0);
+                } else {
+                    // $(this).attr("src", "../../img/video/videoRemote.png");
+                    stopRemote(videoObject.remoteId, 0)
+                }
+            } else {
+                parent.layer.msg("请先播放视频。。。", { icon: 7 });
+            }
+        },
+        // 远程抓拍
+        photoRemote: function () {
+            if (videoObject.playState) {
+                remoteVideo(videoObject.devCode, 1);
+            } else {
+                parent.layer.msg("请先播放视频。。。", { icon: 7 });
+            }
+        }
+    });
 });

js/pages/video/videoAjax.js

@@ -1,14 +1,14 @@
 /* 球机树 */
 function loadVideoTree() {
     const bidCode = parent.$('#bidPro').val();
-    const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
+    const keyWord = $('#keyWord').val();
+    const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&param=' + keyWord;
     let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
     const url = commonUrl + 'screen/largeScreen/video/getVideoTree?params=' + montageParam;
     ajaxRequestGet(url, "GET", true, function () {
     }, function (result) {
-        console.log(result);
         if (result.code === 200) {
-            // setData(result.data);
+            setData(result.data);
         } else if (result.code === 500) {
             console.error('视频树' + result.msg);
         } else if (result.code === 401) {
@@ -18,4 +18,31 @@ function loadVideoTree() {
         error(xhr, status, error)
     }, aqEnnable);
 
+    function setData(data) {
+        let totalNum = 0, onlineNum = 0, offLineNum = 0;
+        $.each(data, function (index, item) {
+            if (item.id !== '0') {
+                totalNum++;
+                if (item.onLine === '1') {
+                    onlineNum++;
+                    item.title = '<img src="../../../img/video/ball_online.png"><span>' + item.title + '</span>'
+                } else {
+                    offLineNum++;
+                    item.title = '<img src="../../../img/video/ball_offline.png"><span>' + item.title + '</span>'
+                }
+            }
+        })
+        videoTree = dtree.render({
+            elem: "#video-tree",
+            width: "96%", // 指定树的宽度
+            data: data,
+            dataFormat: "list",
+            skin: "laySimple",
+            line: false,  // 显示树线
+        });
+        // 设备在线情况
+        $('.device-status').eq(0).html('全部（' + totalNum + '）')
+        $('.device-status').eq(1).html('在线（' + onlineNum + '）')
+        $('.device-status').eq(2).html('离线（' + offLineNum + '）')
+    }
 }

js/pages/video/videoConnect.js

@@ -74,7 +74,6 @@ function getQXConnect() {
  * @param dom 窗口id
  */
 function QXPlayVideo(puId, idx, dom) {
-
     //播视频接口
     destoryVideo(flvPlayer);
     let url = qxUrl + "stream.flv?puid=" + puId + "&idx=" + idx + "&stream=0&token=" + qxToken;
@@ -108,7 +107,7 @@ function QXPlayVideo(puId, idx, dom) {
             flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => {
                 if (flvPlayer) {
                     videoObject.playState = true;
-                    $('.noVideoMask').css('background-image', 'none')
+                    // $('.noVideoMask').css('background-image', 'none')
                     //视频断流、延迟处理
                     $('#' + dom).attr("ontimeupdate", "progress(event)")
                     recordVideo();
@@ -222,10 +221,10 @@ function remoteVideo(puid, type) {
     requestPost("CSS/C_CSS_StartManualStorage" + "?token=" + qxToken, params, function (data) {
         if (data.responseJSON.Error === '0') {
             if (type === 0) {
-                layer.msg("开始录像成功", { icon: 1 });
+                parent.layer.msg("开始录像成功", { icon: 1 });
                 videoObject.remoteId = data.responseJSON.Param.ID
             } else {
-                layer.msg("抓拍成功", { icon: 1 });
+                parent.layer.msg("抓拍成功", { icon: 1 });
                 setTimeout(function () {
                     stopRemote(data.responseJSON.Param.ID, 1)
                 }, 3000);
@@ -250,7 +249,7 @@ function stopRemote(id, type) {
     requestPost("CSS/C_CSS_StopManualStorage" + "?token=" + qxToken, params, function (data) {
         if (!isEmpty(data)) {
             if (type === 0) {
-                layer.msg("停止录像成功", { icon: 1 });
+                parent.layer.msg("停止录像成功", { icon: 1 });
                 videoObject.remoteId = null;
             }
         }
@@ -307,7 +306,7 @@ function destoryVideo(flvPlayer) {
  */
 function recordVideo() {
     let video = $("#videoPlayer1")[0];
-    let encodeType = "video/webm;codecs=vp9";
+    let encodeType = "video/webm;codecs=vp9,opus";
     let chunks = [];
     //创建MediaRecorder，设置媒体参数
     let stream = video.captureStream();
@@ -322,17 +321,15 @@ function recordVideo() {
     $('#videoLocal')[0].onclick = function () {
         if (start) {
             videoObject.recordVideoState = true;
-            layer.msg("开启本地录像", { icon: 0 });
+            parent.layer.msg("开启本地录像", { icon: 0 });
             chunks = [];
             recorder.start(10);
-            $(this).attr("src", "../../img/video/videoLocal-select.png");
             start = false;
         } else {
-            layer.msg("关闭本地录像", { icon: 0 });
+            parent.layer.msg("关闭本地录像", { icon: 0 });
             videoObject.recordVideoState = false;
             recorder.stop();
             download();
-            $(this).attr("src", "../../img/video/videoLocal.png");
             start = true;
         }
     }
@@ -340,12 +337,22 @@ function recordVideo() {
     //下载录制内容
     function download() {
         let blob = new Blob(chunks, { type: 'video/webm' });
-        let file = new window.File([blob], new Date().getTime() + ".webm", { type: 'video/webm' })
-        console.log(file);
-        let formData = new FormData();
-        formData.append("multipartFile", file)
-        let loadingMsg = layer.msg('视频加载中,请稍候...', { icon: 16, scrollbar: false, time: 0 });
-        $.ajax({
+        const a = document.createElement('a');
+             document.body.appendChild(a)
+             a.style.display = 'none'
+             const url = window.URL.createObjectURL(blob);
+             a.href = url;
+             a.download = '视频.webm'; //视频下载后的名称
+             a.click();
+             document.body.removeChild(a)
+             window.URL.revokeObjectURL(url);
+
+        // let file = new window.File([blob], new Date().getTime() + ".webm", { type: 'video/webm' })
+        // console.log(file);
+        // let formData = new FormData();
+        // formData.append("multipartFile", file)
+        // let loadingMsg = layer.msg('视频加载中,请稍候...', { icon: 16, scrollbar: false, time: 0 });        
+        /* $.ajax({
             url: dataUrl + 'system/sys/video/webmToMp4?token=' + token,
             type: 'POST',
             headers: {
@@ -367,7 +374,7 @@ function recordVideo() {
             },
             error: function (result) {
             }
-        });
+        }); */
     }
 }
 
@@ -376,7 +383,7 @@ function recordVideo() {
  */
 function screenshot() {
     let video = $("#videoPlayer1")[0];
-    let canvas = $('#canvasPlayer1')[0];
+    let canvas = document.getElementById("canvas");;
     let ctx = canvas.getContext('2d');
     let H = window.innerHeight;
     let W = window.innerWidth;
@@ -475,4 +482,35 @@ function uploadRectFile(obj) {
     xhr.send();
 }
 
+function playControl() {
+    let key;
+    //点击事件
+    let btn = $('[lay-event=control]');
+    btn.unbind();
+    btn.mousedown(function (event) {
+        if (videoObject.playState) {
+            key = qxControlType[$(this).attr('id')];
+            if (key[2]) {
+                turnControl(key[0], videoObject.devCode).then(r => {
+                });
+            } else {
+                qxControl(videoObject.devCode, key[1])
+            }
+        }
+        event.stopPropagation();
+    }).mouseup(function (event) {
+        if (videoObject.playState) {
+            key = qxControlType[$(this).attr('id')];
+            if (key[2]) {
+                turnControl(key[3], videoObject.devCode).then(r => {
+                });
+            } else {
+                qxControl(videoObject.devCode, key[3])
+            }
+        } else {
+            parent.layer.msg("请先播放视频....", { icon: 7 });
+        }
+        event.stopPropagation();
+    });
 
+}

pages/video/video.html

@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../../css/font.css">
     <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
+    <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/dtree/dtree.css">
+    <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/dtree/font/dtreefont.css">
     <link rel="stylesheet" href="../../css/video/video.css">
     <link rel="stylesheet" href="../../plugin/toolTip/mTips.css">
     <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
@@ -27,35 +29,35 @@
                 <div id="left-top-one" class="layout">
                     <div id="one-child">
                         <div id="yclx" class="layout">
-                            <button></button>
+                            <button id="videoRemote" lay-active="videoRemote"></button>
                             <p>远程录像</p>
                         </div>
                         <div id="bdlx" class="layout">
-                            <button></button>
+                            <button id="videoLocal"></button>
                             <p>本地录像</p>
                         </div>
                     </div>
                     <div id="two-child" class="layout">
                         <div id="yt" class="layout">
                             <div id="yt-left" class="layout">
-                                <button></button>
+                                <button id="left" lay-event="control"></button>
                             </div>
                             <div id="yt-center" class="layout">
-                                <button></button>
-                                <button></button>
+                                <button id="up" lay-event="control"></button>
+                                <button id="down" lay-event="control"></button>
                             </div>
                             <div id="yt-right" class="layout">
-                                <button></button>
+                                <button id="right" lay-event="control"></button>
                             </div>
                         </div>
                     </div>
                     <div id="three-child">
                         <div id="yczp" class="layout">
-                            <button></button>
+                            <button id="photoRemote" lay-active="photoRemote"></button>
                             <p>远程抓拍</p>
                         </div>
                         <div id="bdzp" class="layout">
-                            <button></button>
+                            <button id="photoLocal" lay-active="photoLocal"></button>
                             <p>本地抓拍</p>
                         </div>
                     </div>
@@ -63,47 +65,49 @@
                 <div id="left-top-two" class="layout">
                     <div id="jj-box" class="layout">
                         <div id="jj" class="layout">
-                            <button></button>
-                            <button></button>
+                            <button id="nearFocus" lay-event="control"></button>
+                            <button id="farFocus" lay-event="control"></button>
                         </div>
                         <p>聚焦</p>
                     </div>
                     <div id="sf-box" class="layout">
                         <div id="sf" class="layout">
-                            <button></button>
-                            <button></button>
+                            <button id="amplify" lay-event="control"></button>
+                            <button id="shrink" lay-event="control"></button>
                         </div>
                         <p>缩放</p>
                     </div>
-                    <div id="gq-box" class="layout">
+                    <!-- <div id="gq-box" class="layout">
                         <div id="gq" class="layout">
-                            <button></button>
-                            <button></button>
+                            <button id="apertureMinus" lay-event="control"></button>
+                            <button id="apertureAdd" lay-event="control"></button>
                         </div>
                         <p>光圈</p>
-                    </div>
+                    </div> -->
                 </div>
             </div>
             <!-- 球机列表 -->
             <div id="left-bottom">
                 <div id="search-box">
-                    <form class="layui-form layout">
-                        <input class="layui-input" autocomplete="off" placeholder="请输入关键字">
-                        <img src="../../img/video/search.png" id="search-img" alt="搜索">
+                    <form class="layui-form layout" onsubmit="return false;">
+                        <input class="layui-input" autocomplete="off" id="keyWord" placeholder="请输入关键字">
+                        <img src="../../img/video/search.png" id="search-img" alt="搜索" onclick="loadVideoTree()">
                     </form>
                 </div>
                 <div id="device-online-box" class="layout">
-                    <div class="device-status layout">全部（100）</div>
-                    <div class="device-status layout">在线（20）</div>
-                    <div class="device-status layout">离线（80）</div>
+                    <div class="device-status layout">全部（0）</div>
+                    <div class="device-status layout">在线（0）</div>
+                    <div class="device-status layout">离线（0）</div>
+                </div>
+                <div id="device-tree">
+                    <ul id="video-tree" class="dtree" style="height: 100%;overflow: auto;margin: 0 2%;" data-id="-1"></ul>
                 </div>
-                <div id="device-tree"></div>
             </div>
         </div>
         <div id="center-box">
             <div id="video-box">
                 <div id="balla" class="split split-horizontal">
-                    <div id="windowbox" class="ballsplit "
+                    <div id="windowbox" class="ballsplit " ondblclick="ballScreenBig('1')"
                         style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto">
                         <video id="videoPlayer1" class="ball-content"></video>
                     </div>
@@ -127,7 +131,7 @@
                         </div>
                     </div>
                     <div class="voi-item">
-                        <img src="../../img/video/voi_photo.png">
+                        <img src="../../img/video/voi_photo2.png">
                         <div class="voi-info layout">
                             <div class="voi-time layout">
                                 <img src="../../img/video/alarm.png" alt="告警">
@@ -139,7 +143,7 @@
                         </div>
                     </div>
                     <div class="voi-item">
-                        <img src="../../img/video/voi_photo.png">
+                        <img src="../../img/video/voi_photo3.png">
                         <div class="voi-info layout">
                             <div class="voi-time layout">
                                 <img src="../../img/video/alarm.png" alt="告警">
@@ -151,7 +155,7 @@
                         </div>
                     </div>
                     <div class="voi-item">
-                        <img src="../../img/video/voi_photo.png">
+                        <img src="../../img/video/voi_photo4.png">
                         <div class="voi-info layout">
                             <div class="voi-time layout">
                                 <img src="../../img/video/alarm.png" alt="告警">
@@ -167,6 +171,7 @@
         </div>
     </div>
 </body>
+<canvas id="canvas" style="display:none;" width="640" height="360"></canvas>
 <script type="text/javascript" src="../../js/pages/video/qx/conf.js"></script>
 <script type="text/javascript" src="../../js/pages/video/qx/flv.min.js"></script>
 <script type="text/javascript" src="../../js/pages/video/qx/FileSaver.min.js"></script>