公司最近在做一個和攝像頭有關的項目，我也參與了一些邊邊角角的事情，下面就來說一說我做的一些事情。
公司採用的是海康威視的攝像頭，海康威視還是可以的，他會給客戶提供一個攝像頭網絡的管理系統，用戶其實使用這個管理系統就可以完成基本的需求了，海康威視的提供還是比較充分的。可能有些開發者對於這個管理系統還是不夠滿足，想要自己開發一個可以在網站頁面顯示攝像頭視頻畫面。這個也是可以的，海康威視也是提供了一個網絡開發包，方便開發者的使用。我這幾天在網上找了好久，都是一些下載要積分的，我這裏把下載的地址放在GitHub的上面，方便大家的下載。同時放上去的還有海康威視開發的SDK。
海康威視攝像頭的視頻流採用的RTSP協議的視頻流，但是HTML5支持的是RTMP，所以RTSP協議的食視頻流無法直接在網頁頁面上面顯示。我要做的工作就是在網絡頁面上面顯示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:[email protected]: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:[email protected]: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的上面運行啓動，我會把整個壓縮包放上去，這些都是在官網上面下載的，在文章的最後我也會放上去這幾天我查到的一些有用的官網資料。
下面就是簡單的代碼。
<!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:[email protected]:554/H264/ch1/main/av_stream" aspect-ratio latency="3000000" autostart controls avsync></div>
</div>
</body>
</html>
下載完壓縮包後，記得將index.html的替換爲上面的代碼，官網中提供的代碼比較亂。直接將URL替換爲你的RTSP格式的視頻流就可以了。
下面其實就沒有什麼要講的了，你的網絡支持了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/
流媒體官網（也是不錯的一個RTSP播放器，但是最後沒有采用）：https：//streamedian.com/
結束。