EasyNVR二次開發直播通道接口保活實例

1.背景需求

  • 想經過接口二次集成在本身的原有的web業務系統實現實時直播, 可是用戶一直困惑獲取直播連接通道和獲取直播保活連接通道的區別和使用。

2.解決方案

  • 第一種方法:通道配置成非按需,使用直播連接通道接口獲取視頻流地址,經過接口獲取的視頻流地址客戶端這邊就能夠一直播放,
    不須要直播保活接口,來維持服務端向設備的拉取視頻流。可是若是使用非按需的通道比較多那對服務端的壓力比較大。(注:按需和非按需參考[https://mp.csdn.net/mdeditor/84893294])
  • 第二種方法:通道配置成按需,這裏我是基於WEB調取軟件提供的接口,使用的是HTML,CSS,Javascript等一些插件來實現視頻保活並一直播放,也可經過其餘編程方式,只要支持http協議均可以使用接口。

3.實現

  • 新建文件demo目錄結構以下easy-player.swf和easy-player-element.min.js文件能夠經過[https://www.npmjs.com/package/easy-player]獲取,插件有詳細使用文檔。
    在這裏插入圖片描述
  • 使用到軟件的接口
    在這裏插入圖片描述在這裏插入圖片描述
  • 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點擊開始播放
  • 中止保活後服務端會中止向設備端拉視頻,相應的客戶端這邊取不到視頻流也會中止。
    在這裏插入圖片描述

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


關於EasyNVR

EasyNVR可以經過簡單的網絡攝像機通道配置,將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP協議輸出的設備接入到EasyNVR,EasyNVR可以將這些視頻源的音視頻數據進行拉取,轉換爲RTMP/HLS,進行全平臺終端H5直播(Web、Android、iOS),而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡,實現互聯網級別的直播分發;javascript

詳細說明:http://www.easynvr.comhtml

點擊連接加入羣【EasyNVR解決方案】:857627429java

Copyright © EasyDarwin Team 2012-2019jquery

EasyNVR公衆號

相關文章
相關標籤/搜索