通過DSMS安防綜合管理平臺系統實現監控直播

10
發表時間:2020-04-11 10:58作者:kdacctv

一、RTMP概述


RTMP是adobe開發的針對網頁應用的流媒體格式,因目前多數瀏覽器已經集成FLASH插件,所以可以在網頁中輕松嵌入音視頻監控直播,實現各種平臺的廣泛兼容。


RTMP協議握手過程:

通過DSMS安防綜合管理平臺系統實現監控直播.png

客戶端被指定依次向服務器發送C0,C1,C2三個chunk,服務器向客戶端發送S0,S1,S2三個chunk。 詳細發送要求:

  • 客戶端開始發送C0,C1;

  • 客戶端必須收到S1后,才發送C2;

  • 客戶端必須收到S2后才開始發送其他信息(控制信息和音視頻數據) 服務器要等收到C0才能發送S0和S1;

  • 服務器必須等C1后才能發送S2 服務器必須等收到C2之后才能發送其他數據(控制信息和音視頻數據)


二、M3U8概述


M3U8是蘋果公司推出的視頻播放標準,是m3u的一種,編碼格式采用的是UTF-8,是HTTP Live Streaming(縮寫為 HLS)協議的部分內容,HLS是由蘋果公司提出的基于HTTP的流媒體網絡傳輸協議。特點是將流媒體切分為若干 TS 片段,然后通過一個擴展的 m3u 列表文件將這些 TS 片段集中起來供客戶端播放器接收。這樣做相比使用 RTSP 協議的好處在于,一旦切分完成,之后的分發過程完全不需要額外使用任何專門軟件,普通的網絡服務器即可,大大降低了 CDN 邊緣服務器的配置要求.


M3U8格式文件打開如下:

#EXTM3U

#EXT-X-VERSION:3

#EXT-X-TARGETDURATION:8

#EXT-X-MEDIA-SEQUENCE:0

#EXTINF:4.000000,

2cb056dc5bb000000.ts

#EXTINF:4.000000,

2cb056dc5bb000001.ts

#EXTINF:4.000000,

2cb056dc5bb000002.ts

#EXTINF:4.000000,

2cb056dc5bb000447.ts

#EXTINF:1.400000,

2cb056dc5bb000448.ts

#EXT-X-ENDLIST


2cb056dc5bb000000.ts到2cb056dc5bb000448.ts,按順序共449個ts文件,這些就是具體的視頻內容文件片段了,一個個下載下來,然后通過合并文件就能組成最終能播放的視頻文件了。


三、通過RTMP/M3U8進行視頻分享


1.通過杰士安DSMS安防綜合管理平臺系統,將所需監控進行RTMP/M3U8視頻分享;

進入DSMS分享界面,點擊新建:

通過RTMP進行視頻分享

▲選擇需要分享的通道/碼流/時間

2.設置成功顯示在線并生成url

通過M3U8進行視頻分享


四、在HTML頁面調用連接


將rtmp的url填寫進編輯好的HTML播放頁面如下:

<!doctype html>

<html>

      <head>

      <meta charset="utf-8">

       <title>JSACCTV</title>

            <link href="css/video-js.min.css" rel="stylesheet">

              <style>

              body{background-color: #191919}

              .m{ width: 640px; height: auto; margin-left: auto; margin-right: 100px; margin-top: 40px; }

              </style>

      </head>

<body>

     <table align="center">

           <tr align="center">

                <td align="center" class="m">

                <video id="rtmpVideo" class="video-js" controls preload="auto" width="740" height="440" data-setup='{ "html5" : { "nativeTextTracks" : false } }'>

                </video>

<script src="js/video.min.js"></script>

<script src="js/videojs-flash.min.js"></script>

<script type="text/javascript">

   videojs.options.flash.swf = 'js/video-js.swf';

   var myPlayer = videojs('rtmpVideo', {

    autoplay: true,

    controls: true,

    muted: true,

    preload: "auto",

    language: "zh-CN",

    playbackRates: [1, 2, 3, 4, 5, 8, 10, 20],

    'techOrder': ['flash'],

                      sources: [{

                    /*rtmp://live.hkstv.hk.lxdns.com/live/hks*/

                src: 'rtmp://120.77.215.176:12935/hls/33010010000F4256$0$1',

                type: 'rtmp/flv'

            }]

}, function () {

    console.log("-成功初始化-");

    myPlayer.one("playing", function () {         

        console.log("開始播放");

    });

    myPlayer.one("error", function (error) {     

        console.error("監聽到異常,錯誤信息:%o",error);

    });

});

</script></td>

    <td align="center" class="m">

<video id="rtmpVideoo" class="videojs" controls preload="auto" width="740" height="440" datasetup='{ "html5" : { "nativeTextTracks" : false } }'>

   </video>

<script src="js/video.min.js"></script>

<script src="js/videojs-flash.min.js"></script>

<script type="text/javascript">

   videojs.options.flash.swf = 'js/video-js.swf';

   var myPlayer = videojs('rtmpVideoo', {

    autoplay: true,

    controls: true,

    muted: true,

    preload: "auto",

    language: "zh-CN",

    playbackRates: [1, 2, 3, 4, 5, 8, 10, 20],

    'techOrder': ['flash'],

                      sources: [{

                    /*rtmp://live.hkstv.hk.lxdns.com/live/hks*/

                src: 'rtmp://120.77.215.176:12935/hls/33010010000F4256$1$1',

                type: 'rtmp/flv'

            }]

}, function () {

    console.log("-成功初始化視頻-");

    myPlayer.one("playing", function () {         

        console.log("開始播放");

    });

    myPlayer.one("error", function (error) {     

        console.error("監聽到異常,錯誤信息:%o",error);

    });

});

                     </script>

                </td>

           </tr>

     </table>

</body>

</html>


RTMP示例:


五、在手機瀏覽器調用連接


將m3u8的url填寫進編輯好的HTML播放頁面,如下:

<video class="vjs-tech" width="100%" height="100%" controls="controls" autoplay="autoplay" x-webkit-airplay="true" x5-video-player-fullscreen="true" preload="auto" playsinline="true" webkit-playsinlinex5-video-player-typ="h5">

<source type="application/x-mpegURL" src="http://120.77.215.176:19090/hls/33010010000F4256$0$1.m3u8">

</video>


M3U8示例:


website qrcode
關注我們: