From d8a274cd30024a992cbf757cb6738c96a373b368 Mon Sep 17 00:00:00 2001
From: xc <double72cheng@gmail.com>
Date: Tue, 27 Apr 2021 17:26:35 +0800
Subject: [PATCH] 通过rtsp 实现 通过摄像头ID 实现
---
/dev/null | 105 -----------------
src/main/resources/public/monitor/history.html | 22 +-
src/main/resources/public/js/live/liveComponent.js | 132 ++++++++++++++++++++++
src/main/resources/public/js/history/historyComponent.js | 55 +++++---
src/main/resources/public/monitor/live.html | 24 ++--
5 files changed, 189 insertions(+), 149 deletions(-)
diff --git a/src/main/resources/public/js/history/historypler.js b/src/main/resources/public/js/history/historyComponent.js
similarity index 64%
rename from src/main/resources/public/js/history/historypler.js
rename to src/main/resources/public/js/history/historyComponent.js
index 6f08c17..6776c09 100755
--- a/src/main/resources/public/js/history/historypler.js
+++ b/src/main/resources/public/js/history/historyComponent.js
@@ -1,8 +1,6 @@
;!(function () {
-
-
- function Historypler(opt) {
+ function HistoryComponent(opt) {
if (typeof opt.elem === 'string') {
opt.elem = document.getElementById(opt.elem);
}
@@ -14,11 +12,11 @@
appendContent(this.elem);
let stream_path;
- let ffurl = opt.ffurl;
- let code = opt.code;
+ let cameraId = opt.cameraId;
+
let container = document.getElementById("container");
- let h5lc = new Jessibuca({container, decoder: ffurl, videoBuffer: 0});
+ let h5lc = new Jessibuca({container, decoder: "js/jessibuca/ff.js", videoBuffer: 0});
let hourTimestamp = 3600 * 1000;
let dayTimestamp = hourTimestamp * 24;
@@ -50,11 +48,16 @@
//播放
$(".progressTime-left-b-start").on("click", function () {
- historypler.playVideo(code,currentTimer,function (result) {
- h5lc.onLoad = function () {
- this.play(result.jessicaURL);
- }
- });
+ if (opt.rtspUrl){
+ let rtspUrl = opt.rtspUrl;
+ historyComponent.playVideoRTSP(rtspUrl,currentTimer,function (result) {
+ h5lc.play(result.jessicaURL)
+ });
+ }else {
+ historyComponent.playVideo(cameraId,currentTimer,function (result) {
+ h5lc.play(result.jessicaURL)
+ });
+ }
});
let than = this;
@@ -62,7 +65,7 @@
$(".progressTime-left-b-start stop").on("click", function () {
$(this).removeClass("stop");
h5lc.destroy();
- than.closeVideo(stream_path)
+ than.closeVideo(stream_path);
than.elem.style.display = 'none';
});
@@ -75,12 +78,23 @@
element.innerHTML = _content;
}
- //播放
- Historypler.prototype.playVideo = function (video_id,starttime, callback) {
+ //播放 - 针对摄像头id
+ HistoryComponent.prototype.playVideo = function (video_id,starttime, callback) {
$.ajax({
type: "get",
- //url: "../../webapi/media/live?param=" + video_id,
- url: "../../monica/history?param=" + video_id+ "&startTime=" + starttime,
+ url: "../../webapi/media/historical?param=" + video_id+ "&startTime=" + starttime+"&endTime=",
+ timeout: 5000,
+ async: false,
+ success: function (result) {
+ callback(result);
+ }
+ });
+ };
+ //播放 - 针对rtsp
+ HistoryComponent.prototype.playVideoRTSP = function (rtspURL,starttime, callback) {
+ $.ajax({
+ type: "get",
+ url: "../../webapi/media/rtsp/historical?param=" + rtspURL+ "&startTime=" + starttime+"&endTime=",
timeout: 5000,
async: false,
success: function (result) {
@@ -90,12 +104,11 @@
};
//关闭流
- Historypler.prototype.closeVideo = function (streamPath) {
+ HistoryComponent.prototype.closeVideo = function (streamPath) {
if (streamPath && typeof streamPath === "string") {
$.ajax({
type: "get",
- //url: "../../webapi/media/stop?param=" + streamPath,
- url: "../../monica/stop?param=" + streamPath,
+ url: "../../webapi/media/stop?param=" + streamPath,
async: false,
success: function (result) {
}
@@ -103,11 +116,11 @@
}
};
- Historypler.prototype.close = function () {
+ HistoryComponent.prototype.close = function () {
this.closeVideo(this.stream_path);
};
- window.Historypler = Historypler;
+ window.HistoryComponent = HistoryComponent;
})()
diff --git a/src/main/resources/public/js/live/liveComponent.js b/src/main/resources/public/js/live/liveComponent.js
new file mode 100755
index 0000000..47fb3d3
--- /dev/null
+++ b/src/main/resources/public/js/live/liveComponent.js
@@ -0,0 +1,132 @@
+;!(function () {
+
+ function LiveComponent(opt) {
+ if (typeof opt.elem === 'string') {
+ opt.elem = document.getElementById(opt.elem);
+ }
+ if (!opt.elem) {
+ throw new Error('需要容器');
+ return;
+ }
+ this.elem = opt.elem;
+ appendContent(this.elem);
+
+ let stream_path;
+ let cameraId = opt.cameraId;
+ 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});
+
+ //rtspURL不为空 走rtsp rtspURL为空 走平台摄像头id
+ if (opt.rtspUrl){
+ let rtspUrl = opt.rtspUrl;
+ this.playVideoRTSP(rtspUrl, function (result) {
+ h5lc.onLoad = function () {
+ let jessicaURL = result.jessicaURL;
+ this.play(jessicaURL);
+ }
+ stream_path = result.streamPath;
+ $play.style.display = 'none';
+ $stop.style.display = 'inline';
+ });
+ }else {
+ this.playVideo(cameraId, function (result) {
+ h5lc.onLoad = function () {
+ let jessicaURL = result.jessicaURL;
+ this.play(jessicaURL);
+ }
+ stream_path = result.streamPath;
+ $play.style.display = 'none';
+ $stop.style.display = 'inline';
+ });
+ }
+
+ this.stream_path = stream_path;
+
+ let $close = document.getElementById('close');
+ let than = this;
+ //关闭
+ $close.addEventListener('click', function () {
+ h5lc.destroy();
+ than.closeVideo(stream_path)
+ than.elem.style.display = 'none';
+ }, false);
+
+ //全屏
+ let $expand = document.getElementById('expand');
+ $expand.addEventListener('click', function () {
+ h5lc.fullscreen=true
+ }, 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" +
+ " </div>\n" +
+ " <div class=\"fa fa-expand expand\" id=\"expand\"></div>\n" +
+ " <div class=\"fa fa-close\" id=\"close\"></div>\n" +
+ " </div>\n" +
+ " </div>\n" +
+ " </div>";
+ element.innerHTML=_content;
+ }
+
+ //播放 - 针对摄像头id
+ LiveComponent.prototype.playVideo = function (video_id, callback) {
+ $.ajax({
+ type: "get",
+ url: "../../webapi/media/live?param=" + video_id,
+ timeout: 5000,
+ async: false,
+ success: function (result) {
+ callback(result);
+ }
+ });
+ }
+ //播放 - 针对 rtsp
+ LiveComponent.prototype.playVideoRTSP = function (rtspUrl, callback) {
+ $.ajax({
+ type: "get",
+ url: "../../webapi/media/rtsp/live?param=" + rtspUrl,
+ timeout: 5000,
+ async: false,
+ success: function (result) {
+ callback(result);
+ }
+ });
+ }
+
+ //关闭
+ LiveComponent.prototype.closeVideo = function (streamPath) {
+ if (streamPath && typeof streamPath === "string") {
+ $.ajax({
+ type: "get",
+ url: "../../webapi/media/stop?param=" + streamPath,
+ async: false,
+ success: function (result) {
+ }
+ });
+ }
+ };
+
+ LiveComponent.prototype.close = function () {
+ this.closeVideo(this.stream_path);
+ };
+ window.LiveComponent = LiveComponent;
+})();
+
diff --git a/src/main/resources/public/js/live/livepler.js b/src/main/resources/public/js/live/livepler.js
deleted file mode 100755
index 575f2a7..0000000
--- a/src/main/resources/public/js/live/livepler.js
+++ /dev/null
@@ -1,105 +0,0 @@
-;!(function () {
-
-
- function Livepler(opt) {
- if (typeof opt.elem === 'string') {
- opt.elem = document.getElementById(opt.elem);
- }
- if (!opt.elem) {
- throw new Error('需要容器');
- return;
- }
- this.elem = opt.elem;
- appendContent(this.elem);
-
- let stream_path;
- let ffurl = opt.ffurl;
- let code = opt.code;
- this.container = document.getElementById("container");
-
- let $play = document.getElementById('play');
- let $stop = document.getElementById('stop');
-
- let h5lc = new Jessibuca({container, decoder: ffurl, videoBuffer: 0});
- this.playVideo(code, function (result) {
- h5lc.onLoad = function () {
- this.play(result.jessicaURL);
- }
- stream_path = result.streamPath;
- $play.style.display = 'none';
- $stop.style.display = 'inline';
- });
- this.stream_path = stream_path;
-
- let $close = document.getElementById('close');
- let than = this;
- //关闭
- $close.addEventListener('click', function () {
- h5lc.destroy();
- than.closeVideo(stream_path)
- than.elem.style.display = 'none';
- }, false);
-
- //全屏
- let $expand = document.getElementById('expand');
- $expand.addEventListener('click', function () {
- h5lc.fullscreen=true
- }, 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" +
- " </div>\n" +
- " <div class=\"fa fa-expand expand\" id=\"expand\"></div>\n" +
- " <div class=\"fa fa-close\" id=\"close\"></div>\n" +
- " </div>\n" +
- " </div>\n" +
- " </div>";
- element.innerHTML=_content;
- }
-
- Livepler.prototype.playVideo = function (video_id, callback) {
- $.ajax({
- type: "get",
- //url: "../../webapi/media/live?param=" + video_id,
- url: "../../monica/live?param=" + video_id,
- timeout: 5000,
- async: false,
- success: function (result) {
- callback(result);
- }
- });
- }
-
- Livepler.prototype.closeVideo = function (streamPath) {
- if (streamPath && typeof streamPath === "string") {
- $.ajax({
- type: "get",
- //url: "../../webapi/media/stop?param=" + streamPath,
- url: "../../monica/stop?param=" + streamPath,
- async: false,
- success: function (result) {
- }
- });
- }
- };
-
- Livepler.prototype.close = function () {
- this.closeVideo(this.stream_path);
- };
-
- window.Livepler = Livepler;
-})();
-
diff --git a/src/main/resources/public/monitor/history.html b/src/main/resources/public/monitor/history.html
index 7e33e23..ee25407 100755
--- a/src/main/resources/public/monitor/history.html
+++ b/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,22 +16,22 @@
<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/historypler.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>
- let historypler =new Historypler({
+ let historyComponent =new HistoryComponent({
elem:"jessibucaContainerHistory",
- ffurl:"../js/jessibuca/ff.js",
- code:"ff80808178af424e0178af44e677000343616d657261",
+ cameraId:"ff80808178af424e0178af44e677000343616d657261",
+ rtspUrl:"rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301",
});
//关闭流
- livepler.close();
+ //historyComponent.close();
</script>
</body>
diff --git a/src/main/resources/public/monitor/live.html b/src/main/resources/public/monitor/live.html
index 11959f8..a97c41a 100755
--- a/src/main/resources/public/monitor/live.html
+++ b/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>
@@ -17,20 +17,20 @@
<!-- jessiebuca播放器 -->
<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/livepler.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 livepler =new Livepler({
+ let liveComponent =new LiveComponent({
elem:"jessibucaContainer",
- ffurl:"../js/jessibuca/ff.js",
- code:"ff80808178af424e0178af44e677000343616d657261",
+ cameraId:"ff80808178af424e0178af44e677000343616d657261",
+ rtspUrl:"rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301",
});
-
- livepler.close();
+ //关闭流
+ //liveComponent.close();
</script>
</body>
--
Gitblit v1.9.1