1. 程式人生 > 實用技巧 >Web下無外掛播放rtsp視訊流的方案總結

Web下無外掛播放rtsp視訊流的方案總結

折騰了一下午,稍微搞明白了幾種可行的方案,羅列如下:

方案一:伺服器端用 websocket 接受 rtsp ,然後,推送至客戶端

此方案,客戶端因為直接轉成了mp4,所以H5的video標籤直接可以顯示。

參考地址:https://github.com/Streamedian/html5_rtsp_player

方案二:主流瀏覽器不再支援 ActiveX外掛,改用NPAPI 或者 PPAPI 來開發瀏覽器播放外掛,這種方案,NPAPI 由於安全問題,已經不被Chrome支援了,PPAPI 是可行,但涉及到C++程式設計,難度稍大。

方案三:此方案應該是最主流的。

用 ffmpeg 把 rtsp 轉成 rtmp 通過nginx代理出去,其中核心處用到了 nginx 的 nginx-rtmp-module 模組,在客戶端則使用著名的網頁播放器 jwplayer 來播放 rtmp 流即可,但是jwplayer 播放器好像是付費的,此方案也是搭建流媒體伺服器的通用方案之一。

方案四:與方案三類似,只是這裡使用ffmpeg + nginx 把 rtsp 轉成了 hls 協議,客戶端使用videojs 播放

參考地址:https://videojs.com/getting-started/

方案五:使用 WebRTC,WebRTC 是支援網頁瀏覽器進行實時音視訊的一套API,例如:HTML5 通過 webRTC 直接呼叫攝像頭,但是如果要實現遠端視訊流的顯示,則需要將 RTSP 轉換為 WebRTC 流,供 web 端顯示

參考地址:https://github.com/lulop-k/kurento-rtsp2webrtc

方案六:此方案比較高大上,但是效能與 Native 比還有明顯差距。視訊資料用 websocket 傳到前端,在前端進行軟解碼,解碼器是通過 Emscripten 把C語言的解碼庫編譯成 .js 或者 .wasm 給前端呼叫,解碼後的 YUV 資料轉換為 RGB 推到 HTML5 的 Canvas 播放。

參考地址:http://taobaofed.org/blog/2019/03/18/web-player-h265/