天天看點

vlc+flv.js 攝像頭 H5 直播

vlc+flv.js 快速搞定攝像頭接入Web頁面,直播低延遲方案

業務需求:用最短的時間搞定攝像頭直播到Web頁面。因為沒有過這方面經驗,是以走了很多彎路,其實也不算彎路吧,大部分時間花在學習基礎概念,尋找快速方案中。慣性思維想當然的以為找元件,配位址就能搞定的,實際困難點比想象中的多,比如說攝像頭RTSP格式是不能直接到web的、格式轉碼,推流用什麼服務、如何解決延遲問題等等。

大佬連結奉上:基礎知識 (建議不要放棄本文,繼續往下看,因為我沒有完全使用以上方案,哈哈哈哈。。。嗝)

言歸正傳,為了實作“快速”的要求,經過摸索我使用了這款軟體:vlc,用來接收攝像頭并以指定格式推流。經過對比m3u8、MP4、Flv格式延遲及前台videojs、flv.js等播放元件對格式支援之後。選中flv格式,及flv.js播放元件。

本文以海康威視攝像頭為例,位址格式這樣的:rtsp://admin:[email protected]:666,自行配置賬号、密碼、ip、端口。

(客戶廠裡的攝像頭,原諒我的厚碼。。。)

vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播

攝像頭源以flv視訊流格式進行推流

vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播
vlc+flv.js 攝像頭 H5 直播

因為推流占用8001端口,web就需要部署在别的端口,直接通路8001會出現跨域問題,用nginx解決,監聽6702是通路Web頁面的端口,轉發到本機路徑的index.html,比對路由video轉發到vlc推流的8001端口

vlc+flv.js 攝像頭 H5 直播

測試簽名

繼續閱讀