请登录注册
手机版
查看手机网站
查看手机网站
收藏本站我的资料

通过DSMS安防综合管理平台系统实现监控直播

79
发表时间：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示例:

http://120.77.215.176:8081/rtmp.html


五、在手机浏览器调用连接


将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示例:

http://120.77.215.176:8081/m3u8.html


分享到：
website qrcode
关注我们：