瀏覽器播放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/

　　結束。