背景需求
在互聯網飛速發展的時代，開發者常會說的一個詞就是“跨平臺”。自從移動端的用戶需求越來越大，H5逐漸發展，跨平臺似乎已經成爲了軟件開發不可或缺的技術。EasyNVR互聯網直播系統無論是PC瀏覽器還是手機APP、手機瀏覽器、微信客戶端，都可以無縫接入，摒棄瀏覽器插件這種受限的用戶接入方式，輕量、友好地進行全部直播、錄像、檢索、回放等功能的對接，一套系統，全終端兼容！
在展示界面上，EasyNVR已簡潔、輕便、清新的風格深受廣大用戶的喜歡，同時針對用戶在使用過程中的需求，支持多通道直播，但是當用戶有更靈活多變的播放需求以及豐富的樣式風格要求時，EasyNVR二次開發接口就發揮其作用了。
解決方案
1.通過接口可以實現用戶多變複雜的業務需求，完全可以按照自己的喜好定製漂亮的外觀，接口文檔http://demo.easynvr.com:10800/apidoc/）可以在線參考。
2.新建文件demo目錄結構如下easy-player.swf和easy-player-element.min.js文件可以通過https://www.npmjs.com/package/easy-player）獲取，插件有詳細使用文檔。
3.使用到的接口
4.調取接口必須帶上對應的通道，播放協議可選默認FLV。
5.如果是按需需要30秒調取一次保活接口，不然服務端30秒後會停止向設備端拉取視頻流。
6.index.html內容文件如下
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.啓動成功點擊增加播放窗口
8.窗口增加完成點擊開始播放
9.以服務的方式啓動 ，在當前文件下打開cmd 輸入 hs -o
hs -o
如果軟件有npm
npm install http-server -g 全局安裝
如果沒有可以使用其他服務的方式打開此文件。
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
