前言

目前做的(de)項目，需要(yào / yāo)Web端顯示實時(shí)視頻數據。本次項目使用的(de)是(shì)海康威視的(de)攝像頭進行實時(shí)監控。

硬件：螢石的(de)攝像頭(海康威視旗下的(de))，海康威視的(de)硬盤錄像機。

軟件：vlc 2.2.6版本。

Web端和(hé / huò)移動端接入螢石雲平台的(de)視頻數據? https://blog.csdn.net/qq_38289815/article/details/92615824

海康威視Web端視頻開發 https://blog.csdn.net/qq_38289815/article/details/92428396

螢石雲攝像頭Http接口雲台控制開發 https://blog.csdn.net/qq_38289815/article/details/94288310

前期工作：

将視頻攝像頭和(hé / huò)海康威視的(de)硬盤錄像機連接在(zài)同一網段，并設置好硬盤錄像機的(de)IP地(dì / de)址和(hé / huò)端口号。攝像頭要(yào / yāo)通過通道(dào)管理設置通道(dào)号，IP通道(dào)地(dì / de)址等。

下載 vlc ：

地(dì / de)址：http://download.videolan.org/vlc/2.2.6/win64/

安裝好vlc後進行如下操作

(1)打開媒體中的(de)流

(2)在(zài)網絡中設置RTSP并選擇串流

參數如下：

(3)點擊下一個(gè)後在(zài)新目标選擇HTTP并點擊添加

(4)設置端口和(hé / huò)路徑

(5)選擇Video - Theor + Vorbis (OGG)

(6)選擇流所有通量流，最後點擊流結束設置

沒有報錯時(shí)，可以(yǐ)打開網絡串流後點擊播放。如果報錯了(le／liǎo)，需要(yào / yāo)檢查相應的(de)參數有沒有填寫對，也(yě)有可能是(shì)端口被占用的(de)情況。

正常顯示圖像

完成上(shàng)述工作後，在(zài)Web端複制如下代碼：

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://[賬号]:[密碼]@[設備IP地(dì / de)址]/MPEG-4/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>
<video src="http://[本機IP地(dì / de)址]:[端口]/testVideo" width="600" height="450" autoplay="autoplay"  loop="loop"></video>

統一回複一下各位遇到(dào)問題的(de)小夥伴，這(zhè)個(gè)方法是(shì)我之(zhī)前嘗試過的(de)，現在(zài)身邊已經沒有相應的(de)設備和(hé / huò)環境了(le／liǎo)，想複現比較難。如果遇到(dào) vlc 播放器有視頻數據而(ér)網頁沒有顯示，則應該檢查 IP、端口号、vlc版本問題和(hé / huò)硬盤錄像機的(de)設置。若本機 IP 沒有錯，可以(yǐ)多嘗試幾個(gè)端口(盡量往大(dà)了(le／liǎo)試)，看能不(bù)能解決問題。如果這(zhè)個(gè)方法不(bù)行，可以(yǐ)嘗試一下開頭的(de)其他(tā)方式。

注意：攝像頭和(hé / huò)硬盤錄像機不(bù)在(zài)同一網段可能導緻無法顯示圖像。