fzzy-igdss-web/src/main/java/com/fzzy/security/manager/SecManager.java
@@ -88,7 +88,7 @@ */ public ApiCameraResp getPlayAddr(Camera param, String requireIp) { if (StringUtils.isEmpty(param.getId())) { if (StringUtils.isEmpty(param.getId()) || StringUtils.isEmpty(param.getPlayType())) { log.error("没有获取到监控信息！"); return new ApiCameraResp("ERROR", "没有获取到监控信息！"); } @@ -108,7 +108,7 @@ apiCameraData.setIp(camera.getIp()); apiCameraData.setCtrlPort(camera.getControlPort()); apiCameraData.setWebPort(camera.getWebPort()); apiCameraData.setPlayType(camera.getPlayType()); apiCameraData.setPlayType(param.getPlayType()); apiCameraData.setSnapType(camera.getSnapType()); apiCameraData.setSn(camera.getSn()); apiCameraData.setChannel(camera.getChanNum()); @@ -119,7 +119,7 @@ apiCameraData.setMediaAddr(camera.getMediaAddr()); //根据播放方式获取对应的播放地址 ApiCameraResp resp = apiCameraManager.getApiCameraService(camera.getPlayType()).getPlayAddr(apiCameraData); ApiCameraResp resp = apiCameraManager.getApiCameraService(apiCameraData.getPlayType()).getPlayAddr(apiCameraData); return resp; }
@@ -7,7 +7,7 @@ var playCamera = null; var playList = {}; var playTag = 1; //默认内网播放 var playTag = "1"; //默认内网播放 var playUrl1 = null; var videoId1 = null; @@ -47,14 +47,32 @@ let mediaStream9; $(function () { layui.use(['layer', 'table'], function () { layui.use(['layer', 'form', 'table'], function () { layer = layui.layer; table = layui.table; form = layui.form; // 监听播放方式 form.on('select(select_play)', function (obj) { return renderPlayType(); }); }); //初始化渲染播放列表 renderList(); }); /** * 切换播放方式 */ function renderPlayType() { playTag = $("#playLan").val(); //内网播放，重置各个播放窗口 reloadView(1); reloadView(4); reloadView(9); } /** * 渲染监控列表 @@ -102,9 +120,14 @@ var camera = listCamera[index]; playList[windowsNum] = camera; var playType = camera.playType; if (playTag === "1") { //内网播放,赋值WebRtc播放方式 playType = "WEB_RTC"; } var data = { id: camera.id, playType: camera.playType playType: playType }; $.ajax({ type: 'POST', @@ -223,14 +246,20 @@ * 判断内网播放还是外网播放 */ function startPlay() { if (playTag === "1") { //内网播放 startPlay1(); } if (playTag === "2") { //外网播放 startPlay2(); } } /** * 外网播放 */ function startPlay1() { function startPlay2() { if(windowsNum > splitWin){ windowsNum = 1; @@ -240,28 +269,10 @@ } if (playCamera.playUrl) { var html = '<div class="mask" onclick="selectWin(' + splitWin + ',' + windowsNum + ')"></div>'; html += '<iframe src="' + playCamera.playUrl + '" width="99%" height="99%" frameborder="0" allowfullscreen></iframe>'; $("#f" + splitWin + "_d" + windowsNum).html(html); var divId = "#f" + splitWin + "_d" + windowsNum; var html = '<video class="video" id="video' + splitWin + '_' + windowsNum+'" style="width:100%;height: 100%" controls>'; $(divId).html(html); if (flvjs.isSupported()) { var videoElement = document.getElementById("video" + splitWin + '_' + windowsNum); var flvPlayer = flvjs.createPlayer({ type: 'flv', isLive: true, cors: true, url: playCamera.playUrl }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } // var html = '<video class="video" id="video'+splitWin + "_" + windowsNum+'" autoplay playsinline="true" webkit-playsinline="true" crossorigin="anonymous"'; // html += 'crossorigin="anonymous" src="blob:'+playCamera.playUrl+'" style="display: none;"></video>'; // html += '<canvas width="100%" height="100%" style="height: 100%">'; // $("#f" + splitWin + "_d" + windowsNum).html(html); curCamera = playList[windowsNum]; } else { $("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头(" + playCamera.cameraName + ")播放信息！！"); @@ -271,7 +282,7 @@ /** * 内网播放 */ function startPlay2() { function startPlay1() { if(windowsNum > splitWin){ windowsNum = 1; @@ -598,6 +609,7 @@ } /*============= 视频播放 ----- 结束 ===============*/ /*============= webRtc视频播放5 ----- 开始 ===============*/ /** * 开始播放 @@ -661,6 +673,7 @@ } /*============= 视频播放 ----- 结束 ===============*/ /*============= webRtc视频播放4 ----- 开始 ===============*/ /** * 开始播放 fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
@@ -16,6 +16,7 @@ height: 100%; overflow-y: hidden; } /* 页面基础重置 */ body { margin: 0; @@ -97,17 +98,21 @@ color: #fff; cursor: pointer; } .sp-table { overflow: auto; } .sp-table::-webkit-scrollbar { display: none; /* 隐藏滚动条 */ } .fenping_icon { position: absolute; right: 30px; top: 16px; right: 20px; top: 15px; } .div1 { width: 100%; height: 100%; @@ -120,6 +125,7 @@ box-sizing: border-box; overflow: hidden; } .div_v1 { background-color: #333; font-size: 24px; @@ -131,6 +137,7 @@ box-sizing: border-box; z-index: 1; /* 基础层级 */ } /* 选中项：红色边框（覆盖自身周边的白色分隔线） */ .div_v1.active::after { content: ''; @@ -145,6 +152,7 @@ box-sizing: border-box; transition: all 0.2s ease; } .div4 { width: 100%; height: 100%; @@ -157,6 +165,7 @@ box-sizing: border-box; overflow: hidden; } .div_v4 { background-color: #333; font-size: 24px; @@ -168,6 +177,7 @@ box-sizing: border-box; z-index: 1; /* 基础层级 */ } /* 选中项：红色边框（覆盖自身周边的白色分隔线） */ .div_v4.active::after { content: ''; @@ -182,6 +192,7 @@ box-sizing: border-box; transition: all 0.2s ease; } .div9 { width: 100%; height: 100%; @@ -194,6 +205,7 @@ box-sizing: border-box; overflow: hidden; } .div_v9 { background-color: #333; font-size: 24px; @@ -205,6 +217,7 @@ box-sizing: border-box; z-index: 1; /* 基础层级 */ } /* 选中项：红色边框（覆盖自身周边的白色分隔线） */ .div_v9.active::after { content: ''; @@ -219,9 +232,32 @@ box-sizing: border-box; transition: all 0.2s ease; } .video { width: 100%; height: 100%; } .playList { position: absolute; right: 200px; font-size: 16px; width: 200px; } .layui-input { background-color: #999; border-color: #999; } /* 遮罩层：覆盖整个容器，透明，点击时触发父div事件 */ .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1; /* 遮罩层在iframe上方 */ } </style> </head> @@ -238,10 +274,21 @@ <h3> <i></i>视频实时预览 </h3> <div class="playList"> <form class="layui-form"> <select id="playLan" lay-filter="select_play" class="form-control"> <option value="1">内网播放</option> <option value="2">外网播放</option> </select> </form> </div> <div class="fenping_icon"> <img onclick="fenping(1)" id="f_1" style="width: 30px" th:src="@{/img/web/group/fp_1_active.png}"/> <img onclick="fenping(4)" id="f_4" style="width: 30px" th:src="@{/img/web/group/fp_4.png}"/> <img onclick="fenping(9)" id="f_9" style="width: 30px" th:src="@{/img/web/group/fp_9.png}"/> <img onclick="fenping(1)" id="f_1" style="width: 38px" th:src="@{/img/web/group/fp_1_active.png}"/> <img onclick="fenping(4)" id="f_4" style="width: 38px" th:src="@{/img/web/group/fp_4.png}"/> <img onclick="fenping(9)" id="f_9" style="width: 38px" th:src="@{/img/web/group/fp_9.png}"/> </div> </div> @@ -366,11 +413,13 @@ </ul> </div> <div class="sp-bianbei fl"> <button type="button" class="sp-sxBtn sp-czBtn" onmousedown="ptzControl(9)" onmouseup="zoomStop()"> <button type="button" class="sp-sxBtn sp-czBtn" onmousedown="ptzControl(9)" onmouseup="zoomStop()"> <i>－</i> </button> <span>变焦</span> <button type="button" class="sp-fdBtn sp-czBtn" onmousedown="ptzControl(10)" onmouseup="zoomStop()"> <button type="button" class="sp-fdBtn sp-czBtn" onmousedown="ptzControl(10)" onmouseup="zoomStop()"> <i>＋</i> </button> </div>
