EasyNVR網頁H5無插件播放攝像機視頻功能二次開發之直播通道接口保活示例代碼

背景需求

隨着雪亮工程、明廚亮竈、手機看店、智慧幼兒園監控等行業開始將傳統的安防攝像頭進行互聯網、微信直播,我們知道攝像頭直播的春天了。將安防攝像頭或NVR上的視頻流轉成互聯網直播常用的RTMP、HTTP-FLV、HLS等流格式再分發給用戶端進行直播,不管身處何地都可以通過移動通訊設備查看監控設備,這些功能是EasyNVR互聯網直播系統研發和設計的初衷和基礎功能。另外EasyNVR增值功能是可通過接口二次集成在自己的原有的web業務系統實現網頁、H5無插件實時直播,但是用戶一直困惑於如何獲取直播鏈接通道和直播保活鏈接通道,及兩者的區別和使用方式。

本文主要介紹EasyNVR網頁H5無插件播放攝像機視頻功能二次開發之直播通道接口保活示例代碼。
EasyNVR功能特點

解決方案

  • 第一種方法:將通道配置成非按需,使用直播鏈接通道接口獲取視頻流地址,通過接口獲取到的視頻流地址在客戶端就可以一直播放,不需要直播保活接口來維持服務端向設備的拉取視頻流。但是如果使用非按需的通道較多會對服務端產生較大壓力。(注:按需和非按需參考(https://mp.csdn.net/mdeditor/84893294

  • 第二種方法:通道配置成按需,這裏是基於WEB調取軟件提供的接口,使用的是HTML,CSS,Javascript等一些插件來實現視頻保活,並一直播放,也可通過其他編程方式,只要支持http協議都可以使用接口。
    ##實現方式

  • 新建文件demo目錄結構如下easy-player.swf和easy-player-element.min.js文件可以通過https://www.npmjs.com/package/easy-player獲取,插件有詳細使用文檔。
    EasyPlayer

  • 使用到軟件的接口
    EasyNVREasyNVR

  • index.html內容文件如下:

<!DOCTYPE HTML>
<html>
    <head>
        <title>EasyNVR</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    </head>
    <body>     
        <easy-player id="test2" live="true" aspect="300:100" show-custom-button="true"></easy-player>
        <button id="btn1">開始播放</button>
        <button id="btn2">停止保活</button>
        <!-- 引入播放器插件 -->
    <script type="text/javascript" src="easy-player-element.min.js"></script>
</body>
        <!-- 引入jquery插件 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        //定義變量來存放軟件服務的IP和端口
        var httpStr = "http://127.0.0.1:10800"
        $(document).ready(function(){
            //定義一個定時器用來保活接口
            var time = 0
            //當點擊開始播放按鈕執行保活狀態
            $("#btn1").click(function(){
                //通過get請求直播鏈接接口
                $.get(httpStr + "/api/v1/getchannelstream?channel=1&protocol=HLS",function(data,status){
                    //data中有接口返回的詳細信息可在控制檯查看
                    console.log(data)
                    //將成功獲取的播放地址注入到easy-player標籤中
                    $("#test2").attr("video-url", httpStr + data.EasyDarwin.Body.URL);
                    //開啓一個定時器每隔30秒請求一次保活接口方法
                    time = setInterval(() => {
                        //調取保活接口
                        touchchannelstream()
                    }, 30 * 1000);
                });
            });
            //當點擊停止保活按鈕執行保活狀態停止
            $("#btn2").click(function(){
                //停止定時器
                clearInterval(time);
            });
        });
        //定義一個保活接口方法
        function touchchannelstream() {
            $.get(httpStr + "/api/v1/touchchannelstream?channel=1&protocol=HLS",function(data,status){
                $("#test2").attr("video-url", httpStr + data.EasyDarwin.Body.URL);
            });
        }
    </script>
</html>
  • 用瀏覽器打開index.html點擊開始播放
  • 停止保活後服務端會停止向設備端拉視頻,相應的客戶端這邊取不到視頻流也會停止。
    EasyNVR接口

案例地址:https://github.com/EasyNVR/EasyNVR/tree/master/EasyNVR_apidemo/apidemo/htmlPlayer

EasyNVR硬件設備

EasyNVR智能雲終端硬件設備,填補了互聯網直播行業設備空白,軟硬一體,雲端運維。體積小,方便放置部署;7*24小時不間斷運行,低功耗;省去自建視頻服務器高額費用;專屬視頻服務,免除了與其他硬件的相互影響,通電聯網即可成功運行,部署操作簡單。
EasyNVR硬件

EasyNVR應用場景

EasyNVR可以說已經成爲國內視頻互聯網化基礎建設的排頭兵,幾乎各個民生行業都已經有了EasyNVR視頻能力輸出的身影,EasyNVR多年服務於各行各業視頻基礎建設,EasyNVR的可靠性、完整性、穩定性已經受到了業界的廣泛認可!
EasyNVR穩定可靠
EasyNVR場景一

智慧校園

EasyNVR場景二

平安廠區

EasyNVR場景三

智慧家居

EasyNVR安防攝像機網頁流媒體服務

EasyNVR是一款擁有完整、自主、可控知識產權,同時又能夠具備軟硬一體功能的安防互聯網化流媒體服務器,能夠通過簡單的網絡攝像機通道配置,將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具有RTSP、Onvif協議輸出的設備接入到EasyNVR,EasyNVR能夠將這些視頻源的音視頻數據進行拉取,轉換爲RTMP/HLS,進行全平臺終端H5直播(Web、Android、iOS),並且EasyNVR能夠將視頻源的直播數據對接到第三方CDN網絡,實現互聯網級別的直播分發。詳情可訪問EasyNVR官網:http://www.easynvr.com
EasyNVR知識產權

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章