1. 程式人生 > >在web頁面中播放rtsp直播資料流方法

在web頁面中播放rtsp直播資料流方法

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視訊流的方法。還有其的方式可以播放,本人認為這三種比較好使用。