通过DSMS安防综合管理平台系统实现监控直播79
发表时间:2020-04-11 10:58作者:kdacctv 一、RTMP概述 RTMP是adobe开发的针对网页应用的流媒体格式,因目前多数浏览器已经集成FLASH插件,所以可以在网页中轻松嵌入音视频监控直播,实现各种平台的广泛兼容。 RTMP协议握手过程: 客户端被指定依次向服务器发送C0,C1,C2三个chunk,服务器向客户端发送S0,S1,S2三个chunk。 详细发送要求:
二、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分享界面,点击新建: ▲选择需要分享的通道/码流/时间 2.设置成功显示在线并生成url 四、在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 |