這些天在嘗試使用RTSP協(xié)議(Real Time Streaming Protocol，實(shí)時(shí)流傳輸協(xié)議)來(lái)完成實(shí)時(shí)傳輸和顯示攝像頭畫(huà)面的功能，畢竟海康威視的web控件對(duì)高版本Chrome不予支持，如果使用這一套技術(shù)的話(huà)，后續(xù)的系統(tǒng)就難以?xún)?yōu)化升級(jí)。而RTSP協(xié)議在市面上已經(jīng)有一些H5的解決方案了，是一種發(fā)展可期的方案。

H5Stream

在網(wǎng)上搜索web直播/攝像頭直播等關(guān)鍵詞找到了H5Stream，這是一個(gè)可以基于Native H5 Video標(biāo)簽實(shí)現(xiàn)直播的解決方案。當(dāng)然它也支持其他的RTMP/HLS等。

發(fā)流服務(wù)通過(guò)RTSP地址從攝像頭采集視頻，在代碼中可以通過(guò)配置文件進(jìn)行配置。

配置好攝像頭信息后，我們啟動(dòng)發(fā)流服務(wù)h5ss.bat，開(kāi)始進(jìn)行client端的調(diào)試。

在www目錄下有一個(gè)demo.html，這是demo網(wǎng)頁(yè)，打開(kāi)該文件可以知道如何連接發(fā)流服務(wù)。

在Vue項(xiàng)目中應(yīng)用H5Stream的方法如下：

（1）在static目錄下新增這幾個(gè)js（adapter.js，h5splayer.js，h5splayerhelper.js，platform.js），這些在demo中有提供。

（2）在index.html中引用這些js

（3）在vue頁(yè)面調(diào)用API

運(yùn)行代碼，可以實(shí)時(shí)地看到攝像頭畫(huà)面?。ù蛄舜a，哈哈）

學(xué)習(xí)web前端編程知識(shí),想要成為一個(gè)更加優(yōu)秀的程序員,或者你學(xué)習(xí)web前端的時(shí)候有難度, 可以來(lái)UP主頁(yè)的web前端學(xué)習(xí)交流圈，里面不僅有學(xué)習(xí)視頻和文件資料，還有更多志同道合的朋友，歡迎初學(xué)者和想轉(zhuǎn)行的朋友，和大家-起交流成長(zhǎng)會(huì)比自己琢磨更快哦! UP也上傳了一些web前端學(xué)習(xí)的視頻教程和web前端基礎(chǔ)教程，有興趣的小伙伴可以看看~謝謝閱讀!

江西星火網(wǎng)防科技有限公司工程案例
【萍鄉(xiāng)安防監(jiān)控安裝咨詢(xún)熱線(xiàn)：15607994110 強(qiáng)弱電施工、信息光纖光纜熔接等服務(wù)，歡迎來(lái)電咨詢(xún)。】