EasyNVR 專案中, 我們需要在網頁/微信中嵌入 HLS 播放器, 實現直播效果. 開發過程中, 我們調研了很多HLS播放器, 包括 百度cyberplayer, ckplayer, flowplayer, videojs, 我們重點試用了 cyberplayer 和 videojs 這兩款播放器, 最終選擇 videojs 作為我們的HLS 直播播放器.

從 cyberplayer 說起

百度的這款播放器很優秀,它作為HLS播放器,不需要依賴外掛,做到了簡單易用, 而且還在不斷更新中. 我們一開始選擇使用cyberplayer, 正是因為這一點. 在瀏覽器相容方面, 其官網給出了下面這張圖:

上面圖中,並沒有列出微軟新出的瀏覽器Edge的相容情況. 實際使用中, 我們遇到在 Win10上用Edge瀏覽器時, 出現不能播放的問題. 由於沒有cyberplayer原始碼, 想要修復這個問題卻無從著手.

更重要的, cyberplayer 是為百度雲開發者使用的, 需要一個開發者帳號申請的token來啟用. 也就是說這個播放器在載入過程中會去連線百度雲網站進行認證.這讓我們難以忍受.

使用 videojs

videojs 是在github上面開源的一款播放器, 目前 star 數 16000+ , 足見它有多受歡迎. 不同於 cyberplayer, videojs 作為HLS播放器, 需要通過外掛 videojs-contrib-hls 來支援, 因此配置方面相對 cyberplayer 稍顯複雜. videojs-contrib-hls 藉助 Media Source Extensions 在現代PC瀏覽器中, 可以完全不依賴 Flash 播放hls視訊.

EasyNVR中有一個這樣的應用場景: 裝置可以配置為按需直播. 當用戶請求獲取裝置直播地址,服務端返回直播地址, 並開始觸發切片. 切片生成m3u8檔案是需要一定時間的, 一般來說, 要等第一個ts檔案生成好, 才會生成m3u8, 這個過程需要10秒左右時間. 也就是說, 在客戶端拿到直播地到m3u8檔案真正生成, 這個中間有10秒左右的時間差.客戶端常見的做法是一旦拿到直播地址, 立即初始化播放器, 起播. 實測發現在這種情況下, 初始化 videojs ,給了一個不存在的 HLS 播放地址, 導致 videojs 點開始播放後, 處於載入轉圈狀態, 過一段時間, 提示無法播放的錯誤. 我們對比發現, 同樣的場景, cyberplayer 沒有這個問題.

既然 videojs-contrib-hls 沒有起播 404 自動重連的機制, 那麼我們就給它加上. 獲取到直播地址後, 不是立即用它來初始化 videojs 播放器起播; 而是向這個直播地址發起 HTTP 請求 , 如果返回 404 , 間隔一定時間後, 再次發起請求, 直到返回 200. 這樣就保證 videojs 起播的時候, 直播地址是有效存在的.

示例程式碼:

var timeout = 10000;
var step = 500;
var cnt = 0;
function test(){
    if($this.is(":hidden")) return;
    cnt += step;
    $.ajax(src,{
        type : 'HEAD',
        global : false,
        complete : function(xhr,ts){
            if(cnt > timeout){
                $this.find(".player-wrapper").unmask();
                $.gritter.add("請求資料失敗");
                return;
            }
            //xhr.status == 0 , when cross domain request not found
            if(xhr.status == 404 || xhr.status == 0 || (xhr.status != 200 && !isPC())){
                console.log("video is no ready, waiting...");
                setTimeout(test,step);
            }else{
                $this.find(".player-wrapper").unmask();
                $this.find("source").attr("src", src).attr("type","application/x-mpegURL");
                player = videojs("videojs",{
                    autoplay : true
                }); 
            }
        }
    })
}
$this.find(".player-wrapper").mask("載入中...", 100);
test();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

EasyNVR 介紹

EasyNVR能夠通過簡單的網路攝像機通道配置，將傳統監控行業裡面的高清網路攝像機IP Camera、NVR等具有RTSP協議輸出的裝置接入到EasyNVR，EasyNVR能夠將這些視訊源的音視訊資料進行採集，進行全平臺終端直播（PC、Android、iOS），並且EasyNVR能夠將視訊源的直播資料對接到第三方CDN網路，實現網際網路級別的直播分發。

RTSP監控攝像頭Web無外掛化監控

IPCamera/NVR實時畫面監控/基於瀏覽器的PC/Android/iOS/微信全平臺直播

• 支援PC端/Android安卓端/iOS蘋果端/微信端無外掛化觀看
• 支援微信掃描二維碼觀看
• 支援微信/微博直播分享
• 基於純Web網頁/無外掛H5觀看（不用安裝任何APP）
• 支援海康/大華等市面上幾乎全部的網路攝像機接入
• 實時IPCamera/NVR直播畫面監控

EasyNVR使用者需要準備什麼？

1. 伺服器方面：Windows2008/Windows2012/CentOS 64位作業系統 、4G記憶體、2核CPU及以上；
2. 伺服器頻寬：根據自身情況而定 : 5M-100M不等（與使用者要求的線上人數有關係）；
3. 一個或多個監控攝像頭（支援RTSP或Onvif） 。

我們提供什麼樣的服務？

1. 為使用者搭建伺服器端環境；
2. 為使用者實現海康/大華監控攝像頭實現基於web端無外掛跨平臺直播；
3. 實現PC、安卓、IOS蘋果三種主流終端都可以觀看監控畫面；
4. 提供完整例項給使用者，提供完整技術教程，提供技術售後。

為什麼選擇我們？

1. 經驗。我們擁有數年流媒體技術服務的實際應用經驗，也擁有web流媒體播放器操作經驗，熟悉多終端跨平臺技術；
2. 實測。我們親自購買海康/大華/雄邁/天地偉業網路攝像頭IPC，進行實測驗證；龐大的開源社群使用者群體；
3. 多種方案。我們目前能提供1x / 2x / 3x 三種方案，這四種方案基本包含了IPC所處的各種網路環境；
4. 穩定。我們做出的直播效果，無論是PC端直播畫面，還是移動端直播畫面，都比較穩定；
5. 操作方便。我們給使用者提供完整的範例及教程，普通人員均可按範例新增或刪減攝像頭；
6. 省心省力。一個頁面適配PC、安卓、IOS蘋果、微信，簡化繁雜的主流終端的適配，省心省力。

獲取更多資訊

Copyright © EasyDarwin.org 2012-2017