流媒体服务器如何在浏览器播放RTSP格式的视频流?
一般海康威视摄像头的视频流采用的RTSP协议的视频流,但是html5支持的是RTMP,所以RTSP协议的视频流无法直接在web页面上面显示。我们的EasyNVR流媒体服务器是支持RTSP协议和RTMP协议输出的视频流,下面我们来看一下流媒体服务器如何在浏览器播放RTSP格式的视频流。
先来说一说RTSP协议的一些特点: (1)是流媒体协议。 (2)RTSP协议是共有协议,并有专门机构做维护。 (3)RTSP协议一般传输的是 ts、mp4 格式的流。 (4)RTSP传输一般需要 2-3 个通道,命令和数据通道分离。以上是我在网上搜到的一些RTSP协议的特点。下面就来说一说我要做的工作。
浏览器支持RTSP格式也是比较简单的,但是对于不同的浏览器会有不一样的实现方式,比如安装VLC插件,这种方法对于IE比较适合(高版本的IE不清楚),下面就来说一说具体的实现。
VLC实现播放RTSP格式的视频流非常简单,只要安装了VLC的插件或者安装了VLC的播放器就可以了,VLC播放器和插件我也都放在了GitHub上面,下面会有链接。安装完VLC插件后,直接在页面显示视频流代码就可以。
<html>
<body>
<!--[if IE]>
<object type='application/x-vlc-plugin' id='vlc' events='True'
classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="720" height="540">
<param name='mrl' value='rtsp://admin:hik12345+@10.168.5.111:554/H264/ch1/main/av_stream' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
<![endif]-->
<!--[if !IE]><!-->
<object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
<param name='mrl' value='rtsp://admin:hik12345+@10.168.5.111:554/H264/ch1/main/av_stream' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
</object>
<!--<![endif]-->
</body
</html>
代码非常简单,这里要注意你的RTSP路径,因为我的是海康威视的摄像机,所以会有一定的格式,大家也要注意各自开发时的URL。我这里没有安装插件,只是之前安装了VLC播放器,所以没有安装插件来测试,如果有问题的话,欢迎大家提出问题,一起解决。
上面也说了,VLC插件现在支持的浏览器不是很多了,比如谷歌和火狐的高版本就不再支持VLC’插件,所以这里还要在想一个解决办法,解决谷歌播放RTSP格式的视频流。但是不凑巧,我看到关于谷歌工程师的一个帖子,他说谷歌就不应该支持RTSP格式的视频流,将来也不会。有点灰心,但我还是找到了一个方法。利用vxgplayer。Vxgplayer是一个谷歌浏览器的插件,好像也只支持谷歌浏览器,在其他浏览器上面我还没有找到这个插件,现在谷歌的问题也是如此,插件我就不再上传上去了,插件和js文件两个都有就可以播放视频了。
不过要注意的是,这个页面要放在tomcat上面运行启动,我会把整个压缩包放上去,这些都是在官网上面下载的,在文章的最后我也会放上去这几天我查到的一些有用的官网资料。