在web頁面中播放rtsp直播資料流方法
阿新 • • 發佈:2019-01-03
WEB播放RTSP直播資料流方法
在html技術中目前是無法直接使用現有的web技術進行播放rtsp直播資料流的,下面總結了可以是web播放rtsp直播流的方法。只是自己備用。
1,視訊播放功能使用的庫(WebChimera.js)
1.1,WebChimera.js
WebChimera.js使libVLC直接繪製到JS端的原始陣列(Uint8Array)中。然後它將這個陣列放入一個紋理並在一個畫布元素上繪製它在node.js/io.js/Node-Webkit/NW.js/Electron中使用。可以像普通js一樣的使用。
1.2,wcjs-player(目前專案使用的就是此) wcjs-player是一個封裝了WebChimera.js的播放器。一些播放器的基本的樣式已經做好,不需要重新編寫播放器樣式。
1.3,注意點:
1.目前wcjs-player只在nw-0.12.3的版本上跑成功。而且在使用時由於nw-0.12.3不支援現在比較新的js語法。需要把wcjs-player依賴的部分模組中的js程式碼中以()=>{}格式定義函式的改為function (){}即可。可以使用以下指令碼進行替換
2.在播放頁面的head中必須含有<style></style>標籤。stytle中可以沒有樣式內容,但是使用wcjs-player時wcjs-player會查詢head中的style進行插入css樣式。 3.必須設定vlc plugins的路徑。(可以把vlc的安裝路徑加入到path中或在WebChimera.js中加入plugins。如下圖)(如果報出找不到WebChimera.js.node有可能是沒有找到plugins。plugins要和WebChimera.js.node在同一個目錄下面) 4.plugins要和WebChimera.js.node放在同一目錄下。
1.4簡單使用案例
1.使用方法
雙擊run.bat或者把整個test檔案拖到nw.exe上進行執行。
2,使用h5stream(不支援h265)
2.1 H5stream
H5S is a HTML5 streaming server, HTML5 RTSP Gateway
2.2 H5stream使用 1.下載原始碼下來進行編譯,編譯出可執行檔案以後執行 ./h5ss rtsp://192.168.0.1/stream1 admin admin 起服務。 ./h5ss RTSPURL username password (username和password可以填空) 2.http(https)://localhost:8801(8843) 連線此服務即可播放
案例下載地址
也可檢視官方給出的使用案例
3,使用npapi-vlc
網頁使用npapi-vlc進行呼叫vlc的外掛進行播放rtsp的資料流。注意在安裝vlc是注意選擇支援npai的選項。在使用時要使用低版本的nw.目前使用nw-0.12.3可以使用。注意在nw.exe同目錄下建立plugins,把npapi外掛放進去。
也可以自己編譯npapi 可以參考一下的資料
這有一個簡單的使用案例可以參考使用
以上使用在頁面中播放rtsp視訊流的方法。還有其的方式可以播放,本人認為這三種比較好使用。