EasyNVR網頁無插件播放攝像機RTSP流是如何調取接口在Web頁實現多窗口同時直播的

時間 2019-11-10

標籤 easynvr 網頁插件播放攝像機 rtsp 如何接口 web 實現窗口同時直播欄目 HTML 简体版

原文原文鏈接

背景需求

在互聯網飛速發展的時代，開發者常會說的一個詞就是「跨平臺」。自從移動端的用戶需求愈來愈大，H5逐漸發展，跨平臺彷佛已經成爲了軟件開發不可或缺的技術。EasyNVR互聯網直播系統不管是PC瀏覽器仍是手機APP、手機瀏覽器、微信客戶端，均可以無縫接入，摒棄瀏覽器插件這種受限的用戶接入方式，輕量、友好地進行所有直播、錄像、檢索、回放等功能的對接，一套系統，全終端兼容！javascript

在展現界面上，EasyNVR已簡潔、輕便、清新的風格深受廣大用戶的喜歡，同時針對用戶在使用過程當中的需求，支持多通道直播，可是當用戶有更靈活多變的播放需求以及豐富的樣式風格要求時，EasyNVR二次開發接口就發揮其做用了。
css

解決方案

1.經過接口能夠實現用戶多變複雜的業務需求，徹底能夠按照本身的喜愛定製漂亮的外觀，接口文檔http://demo.easynvr.com:10800/apidoc/）能夠在線參考。html

2.新建文件demo目錄結構以下easy-player.swf和easy-player-element.min.js文件能夠經過https://www.npmjs.com/package/easy-player）獲取，插件有詳細使用文檔。

3.使用到的接口java

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

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

6.index.html內容文件以下chrome

javascript
<!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>

7.啓動成功點擊增長播放窗口npm

8.窗口增長完成點擊開始播放

9.以服務的方式啓動，在當前文件下打開cmd 輸入 hs -obootstrap

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

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

相關標籤/搜索

每日一句

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