web前端监控视频的展示

监控视频的前端展示,我主要做过三种视频流的展示:rtsp,HLS和FLV。

1、rtsp视频流

  rtsp视频流需要安装插件,我当时做这个流是安装VLC播放器插件,这个插件兼容性不好,目前只发现360浏览器能正常播放,局限性很大。用HTML5的Object标签,看代码:

  

 1 <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 
 2       codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
 3       id="vlc"
 4       name="vlc"
 5       class="vlcPlayer"
 6        events="True" width="400" height="400">
 7         <param name="Src" value="rtsp://admin:123456@IP:port/cam/realmonitor?channel=1&subtype=0" />
 8         <param name="ShowDisplay" value="True" />
 9         <param name="AutoLoop" value="False" />
10         <param name="AutoPlay" value="True" />
11         <param name='fullscreen' value='false'/>
12         <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="600" height="450"
13          target="rtsp://账号:密码@IP:port/cam/realmonitor?channel=1&subtype=0" ></embed>
14 </objetc>

  视频流的地址:

  rtsp://账号:密码@IP:port/cam/realmonitor?channel=1&subtype=0

2、HLS和FLV

  因为rtsp的局限性太大,后面客户要求换方式,于是就换了HLS和FLV流的方式,HLS会延时几秒,但是对网络环境要求不高,FLV没有延迟,但是对网络环境要求较高。这种方式用的是HTML5的新标签video,这个兼容性很好,可以兼容很多浏览器。

  HTML页面:

1 <div  id='camera'><video id='myVideo' class='video-js vjs-default-skin' controls preload='auto' autoplay='true'></div>

  js代码:

 1 /**
 2  * 根据视频流类型播放监控
 3  * @method playVideo
 4  * @param {string} videoUrl 视频流地址
 5  * @param {string} scheme 视频流类型
 6  * @return {返回值类型} 返回值说明
 7  **/
 8 function playVideo(videoUrl, scheme) {
 9     if (!flvjs.isSupported()) { alert("浏览器不支持 FLV, 请升级!"); }
10     if (!Hls.isSupported()) { alert("浏览器不支持 HLS, 请升级!"); }
11     var video = document.getElementById("myVideo");
12     //播放HLS流视频
13     if (scheme == 'HLS') {
14         var myPlayer = new Hls();
15         myPlayer.loadSource(videoUrl);
16         myPlayer.attachMedia(video);
17         myPlayer.on(Hls.Events.MANIFEST_PARSED, function () {
18             video.play();
19         });
20     } else {//播放FLV流视频
21         var myPlayer = flvjs.createPlayer({
22             type: 'flv',
23             url: videoUrl
24         });
25         myPlayer.attachMediaElement(video);
26         myPlayer.load();
27         myPlayer.play();
28     }
29 }

  HLS需要hls.min.js,FLV需要flv.min.js,这个网上应该有下载。

  此外,还需要设置css,css文件名为video-js-cdn.css,css代码比较长我就不粘贴出来了。

  这样就完工了。

  

posted @ 2019-09-05 15:22  我的webgis之路  阅读(6004)  评论(2编辑  收藏  举报