EasyNVR調取接口在web頁實現多通道同時直播

時間 2019-11-13

標籤 easynvr 接口 web 實現通道同時直播欄目 HTML 简体版

原文原文鏈接

1.背景需求

軟件自己也支持多通道直播，但有時知足不了用戶的需求，用戶可能須要的是更靈活多變的的播放需求，以及本身喜歡的樣式風格。

2.解決方案

經過接口能夠實現用戶多變複雜的業務需求，徹底能夠按照本身的喜愛定製漂亮的外觀，接口文檔[http://demo.easynvr.com:10800/apidoc/]能夠在線參考
新建文件demo目錄結構以下easy-player.swf和easy-player-element.min.js文件能夠經過[https://www.npmjs.com/package/easy-player]獲取，插件有詳細使用文檔。
使用到的接口

調取接口必須帶上對應的通道，播放協議可選默認FLV。
javascript

若是是按需須要30秒調取一次保活接口，否則服務端30秒後會中止向設備端拉取視頻流。
css

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">
    <!-- 引入樣式插件 -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .col-4 {
        border: 1px #ccc solid;
    }
    </style>
</head>

<body>
    <!-- 容器標籤 -->
    <div class="container">
        <div class="row" id="row">
        </div>
    </div>
    <!-- 按鈕列表 -->
    <button id="btn1">開始播放</button>
    <button id="btn3">增長播放窗口</button>
    <button id="btn2">中止保活</button>
</body>
<!-- 引入播放器插件 -->
<script type="text/javascript" src="easy-player-element.min.js"></script>
<!-- 引入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請求直播連接接口
            //這裏我使用的是軟件通道3，本地測試使用本機可用的通道。
            $.get(httpStr + "/api/v1/getchannelstream?channel=3&protocol=HLS", function (data, status) {
                //data中有接口返回的詳細信息可在控制檯查看
                console.log(data)
                //將成功獲取的播放地址注入到easy-player標籤中
                $(".testPlayer").attr("video-url", httpStr + data.EasyDarwin.Body.URL);
                //開啓一個定時器每隔30秒請求一次保活接口方法
                time = setInterval(() => {
                    //調取保活接口
                    touchchannelstream()
                }, 30 * 1000);
            });
        });

        //當點擊中止保活按鈕執行保活狀態中止
        $("#btn2").click(function () {
            //中止定時器
            clearInterval(time);
        });
        //當點擊增長按鈕會向頁面插入一個窗口
        $("#btn3").click(function () {
            $("#row").append('<div class="col-4"><easy-player class="testPlayer" live="true" aspect="300:100" show-custom-button="true"></easy-player></div>')
        });
    });
    //定義一個保活接口方法
    function touchchannelstream() {
        $.get(httpStr + "/api/v1/touchchannelstream?channel=3&protocol=HLS", function (data, status) {
            $("#test2").attr("video-url", httpStr + data.EasyDarwin.Body.URL);
            console.log("保活")
        });
    }
</script>

</html>

啓動成功點擊增長播放窗口
窗口增長完成點擊開始播放
以服務的方式啓動，在當前文件下打開cmd 輸入 hs -o

hs -o
若是軟件有npm
npm install http-server -g 全局安裝
若是沒有可使用其餘服務的方式打開此文件。html

案例gitee地址:[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網絡，實現互聯網級別的直播分發；java

詳細說明：http://www.easynvr.comjquery

點擊連接加入羣【EasyNVR解決方案】：857627429git

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。