浏览器播放RTSP格式视频流的解决方法

　　公司最近在作一个和摄像头有关的项目，我也参与了一些边边角角的事情，下面就来讲一说我作的一些事情。javascript

　　公司采用的是海康威视的摄像头，海康威视仍是能够的，他会给客户提供一个摄像头web的管理系统，用户其实使用这个管理系统就能够完成基本的需求了，海康威视的提供仍是比较充分的。可能有些开发者对于这个管理系统仍是不够知足，想要本身开发一个能够在web页面显示摄像头视频画面。这个也是能够的，海康威视也是提供了一个web开发包，方便开发者的使用。我这几天在网上找了很久，都是一些下载要积分的，我这里把下载的地址放在GitHub上面，方便你们的下载。同时放上去的还有海康威视开发的SDK。css

　　海康威视摄像头的视频流采用的RTSP协议的视频流，可是html5支持的是RTMP，因此RTSP协议的食视频流没法直接在web页面上面显示。我要作的工做就是在web页面上面显示RTSP格式的摄像视频流。html

　　先来讲一说RTSP协议的一些特色：（1）是流媒体协议。（2）RTSP协议是共有协议，并有专门机构作维护。（3）RTSP协议通常传输的是 ts、mp4 格式的流。（4）RTSP传输通常须要 2-3 个通道，命令和数据通道分离。以上是我在网上搜到的一些RTSP协议的特色。下面就来讲一说我要作的工做。html5

　　浏览器支持RTSP格式也是比较简单的，可是对于不一样的浏览器会有不同的实现方式，好比安装VLC插件，这种方法对于IE比较适合（高版本的IE不清楚），下面就来讲一说具体的实现。java

VLC实现播放RTSP格式的视频流很是简单，只要安装了VLC的插件或者安装了VLC的播放器就能够了，VLC播放器和插件我也都放在了GitHub上面，下面会有连接。安装完VLC插件后，直接在页面显示视频流代码就能够。个人页面代码以下：git

<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播放器，因此没有安装插件来测试，若是有问题的话，欢迎你们提出问题，一块儿解决。github

上面也说了，VLC插件如今支持的浏览器不是不少了，好比谷歌和火狐的高版本就再也不支持VLC’插件，因此这里还要在想一个解决办法，解决谷歌播放RTSP格式的视频流。可是不凑巧，我看到关于谷歌工程师的一个帖子，他说谷歌就不该该支持RTSP格式的视频流，未来也不会。有点灰心，但我仍是找到了一个方法。利用vxgplayer。Vxgplayer是一个谷歌浏览器的插件，好像也只支持谷歌浏览器，在其余浏览器上面我尚未找到这个插件，如今谷歌的问题也是如此，插件我就再也不上传上去了，插件和js文件两个都有就能够播放视频了。web

　　不过要注意的是，这个页面要放在tomcat上面运行启动，我会把整个压缩包放上去，这些都是在官网上面下载的，在文章的最后我也会放上去这几天我查到的一些有用的官网资料。chrome

　　下面就是简答的代码。api

<!DOCTYPE html>

<html>

<head>

      

       <!-- vxgplayer -->

       <script type="text/javascript" src="vxgplayer-1.8.31.min.js"></script>

       <link href="vxgplayer-1.8.31.min.css" rel="stylesheet"/>

 

      

</head>

<body>

      

                           

                            <div id="runtimePlayers">

                            <div id="vxg_media_player1" class="vxgplayer" url="rtsp://admin:hik12345+@10.168.5.111:554/H264/ch1/main/av_stream" aspect-ratio latency="3000000" autostart controls avsync></div>

                            </div>

                    

</body>

</html>

　　下载完压缩包后，记得将index.html替换为上面的代码，官网中提供的代码比较乱。直接将url替换为你的RTSP格式的视频流就能够了。

　　下面其实就没有什么要讲的了，你的web支持了IE和谷歌估计也差很少了，火狐在想一想办法估计也是能够的。可是估计也要安装插件。

　　最后在说一说遇到的RTSP格式视频流的问题，由于我使用的是海康威视的摄像头，RTSPurl的格式估计你们的也不太同样，在网上搜一搜也是能够找到的。再也不累述。只是想说一下，不一样的摄像机的RTSP的格式是不同的。最后放上一些连接，关于这几天找到的一些有用的网站。个人GitHub工具地址为https://github.com/qq1162210866/developmenttool.git

　　海康威视的下载：https://www.hikvision.com/cn/download_60.html

　　Vxgplayer的官网：https://www.videoexpertsgroup.com/vxg-chrome-plugin/

　　streamedian 官网（也是不错的一个RTSP播放器，可是最后没有采用）：https://streamedian.com/

　　结束。