通过rtsp 实现 通过摄像头ID 实现

xc

2021-04-27 d8a274cd30024a992cbf757cb6738c96a373b368

通过rtsp 实现
通过摄像头ID 实现

 src/main/resources/public/js/history/historyComponent.js

File was renamed from src/main/resources/public/js/history/historypler.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;

})()


 src/main/resources/public/js/live/liveComponent.js

New file
@@ -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;
})();


 src/main/resources/public/js/live/livepler.js

File was deleted

 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>

 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>