| src/main/resources/public/css/controles.css | ●●●●● patch | view | raw | blame | history | |
| src/main/resources/public/js/live/liveComponent.js | ●●●●● patch | view | raw | blame | history | |
| src/main/resources/public/js/renderer.js | ●●●●● patch | view | raw | blame | history | |
| src/main/resources/public/monitor/history.html | ●●●●● patch | view | raw | blame | history | |
| src/main/resources/public/monitor/live.html | ●●●●● patch | view | raw | blame | history |
src/main/resources/public/css/controles.css
@@ -26,29 +26,22 @@ .player .control{ position: absolute; background: rgba(255, 255, 255, 0.3); width: 680px; width: 120px; height: 40px; border-radius: 10px; left: 60%; bottom: -10px; transform: translateX(-48%); bottom: -60px; transform: translateX(-50%); display: none; } .player .control div{ display: inline-block; line-height: 40px; margin-left: 14px; font-size: 18px; color: #fff; margin: 0px 11px 0px 9px; } .player .control .play_pause,.player .control .expand{ color: rgb(246, 255, 249); } .player .control div:nth-child(2){ width: 460px; height: 10px; background-color: rgba(255, 255, 255, 0.5); border-radius: 5px; overflow: hidden; } .player .control .progress{ display: block; src/main/resources/public/js/live/liveComponent.js
@@ -16,10 +16,8 @@ let rtspUrl = opt.rtspUrl; this.container = document.getElementById("container"); let $play = document.getElementById('play'); let $stop = document.getElementById('stop'); let h5lc = new Jessibuca({container, decoder: "js/jessibuca/ff.js", videoBuffer: 0}); let h5lc = new Jessibuca({container, decoder: "../js/jessibuca/ff.js", videoBuffer: 0}); //rtspURL不为空 走rtsp rtspURL为空 走平台摄像头id if (opt.rtspUrl){ @@ -30,18 +28,16 @@ this.play(jessicaURL); } stream_path = result.streamPath; $play.style.display = 'none'; $stop.style.display = 'inline'; }); }else { this.playVideo(cameraId, function (result) { //视频画面完全填充canvas区域 h5lc.setScaleMode(0); h5lc.onLoad = function () { let jessicaURL = result.jessicaURL; this.play(jessicaURL); } stream_path = result.streamPath; $play.style.display = 'none'; $stop.style.display = 'inline'; }); } @@ -54,7 +50,7 @@ h5lc.destroy(); than.closeVideo(stream_path) than.elem.style.display = 'none'; }, false); }); //全屏 let $expand = document.getElementById('expand'); @@ -62,27 +58,29 @@ h5lc.fullscreen=true }, false); //截图 let $screenshot = document.getElementById('screenshot'); $screenshot.addEventListener('click', function () { h5lc.screenshot(null,"png",0.5) h5lc.fullscreen=false }, false); } function appendContent(element) { let _content = "<div class=\"content\">\n" + " <div class=\"player\" onmouseover=\"$('.player .control').css('display', 'block')\" onmouseout=\"$('.player .control').css('display', 'none')\">\n" + " <div class=\"player-wrapper\" id=\"container\" style=\"background-color: #0D0E1B;\">\n" + " </div>\n" + " <div class=\"control\">\n" + " <div class=\"fa fa-play\" id=\"play\"></div>\n" + " <div class=\"fa fa-stop\" id=\"stop\" style=\"display: none\"></div>\n" + " <div class=\"timer\">\n" + " <span class=\"progress_timer\">00:00:00</span>\n" + " <span class=\"duration_timer\">00:00:00</span>\n" + let _content = " <div class=\"content\">\n" + " <div class=\"player\" id=\"player\" onmouseover=\"$('.player .control').css('display', 'block')\" onmouseout=\"$('.player .control').css('display', 'none')\">\n" + " <div class=\"player-wrapper\" id=\"container\" style=\"background-color: #0D0E1B;\">\n" + " </div>\n" + " <div class=\"fa fa-expand expand\" id=\"expand\"></div>\n" + " <div class=\"fa fa-close\" id=\"close\"></div>\n" + " <div class=\"control\">\n" + " <div class=\"fa fa-expand expand\" id=\"expand\"></div>\n" + " <div class=\"fa fa-camera\" id=\"screenshot\"></div>\n" + " <div class=\"fa fa-close\" id=\"close\"></div>\n" + " </div>\n" + " </div>\n" + " </div>\n" + " </div>"; " </div>"; element.innerHTML=_content; }
@@ -45,11 +45,11 @@ this._opt.isDebug = opt.debug === true; this._opt.timeout = typeof opt.timeout === 'number' ? opt.timeout : 30; this._opt.supportDblclickFullscreen = opt.supportDblclickFullscreen === true; //this._opt.showBandwidth = opt.showBandwidth === true; opt.showBandwidth = true; this._opt.showBandwidth = opt.showBandwidth === true; opt.showBandwidth = false; this._opt.operateBtns = Object.assign({ fullscreen: true, screenshot: true, fullscreen: false, screenshot: false, play: false, audio: false }, opt.operateBtns || {}); @@ -1357,6 +1357,7 @@ this._trigger('fullscreen', value); } this._fullscreen = value; //解决在预览模式页面无法全屏情况 if(this._fullscreen==true){ this.resize() } src/main/resources/public/monitor/history.html
@@ -5,8 +5,8 @@ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Jessibuca【回放】</title> <meta charset="utf-8"/> <link rel="stylesheet" href="css/progressTime.css"> <link rel="stylesheet" href="css/history/historyStyle.css"> <link rel="stylesheet" href="../css/progressTime.css"> <link rel="stylesheet" href="../css/history/historyStyle.css"> </head> @@ -16,11 +16,11 @@ <div id="jessibucaContainerHistory"></div> <script src="js/jquery.min.js"></script> <script src="js/ajax.js"></script> <script src="js/renderer.js"></script> <script src="js/jquery.progressTime.js"></script> <script src="js/history/historyComponent.js"></script> <script src="../js/jquery.min.js"></script> <script src="../js/ajax.js"></script> <script src="../js/renderer.js"></script> <script src="../js/jquery.progressTime.js"></script> <script src="../js/history/historyComponent.js"></script> <script> src/main/resources/public/monitor/live.html
@@ -5,9 +5,9 @@ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Jessibuca【直播】</title> <meta charset="utf-8"/> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/controles.css"> <link rel="stylesheet" href="css/live/liveStyle.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> <link rel="stylesheet" href="../css/controles.css"> <link rel="stylesheet" href="../css/live/liveStyle.css"> </head> @@ -15,19 +15,20 @@ <body> <!-- jessiebuca播放器 --> <div id="jessibucaContainer"></div> <div id="jessibucaContainer"> </div> <script src="js/jquery.min.js"></script> <script src="js/ajax.js"></script> <script src="js/renderer.js"></script> <script src="js/live/liveComponent.js"></script> <script src="../js/jquery.min.js"></script> <script src="../js/ajax.js"></script> <script src="../js/renderer.js"></script> <script src="../js/live/liveComponent.js"></script> <script> let liveComponent =new LiveComponent({ elem:"jessibucaContainer", cameraId:"ff80808178af424e0178af44e677000343616d657261", rtspUrl:"rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301", let liveComponent = new LiveComponent({ elem: "jessibucaContainer", cameraId: "ff80808178af424e0178af44e677000343616d657261", rtspUrl: "rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301", }); //关闭流 //liveComponent.close();
