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。
如果是按需需要30秒調取一次保活接口，不然服務端30秒後會停止向設備端拉取視頻流。
- 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 全局安裝
如果沒有可以使用其他服務的方式打開此文件。
案例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網絡，實現互聯網級別的直播分發；
點擊鏈接加入羣【EasyNVR解決方案】：383501345
Copyright © EasyDarwin Team 2012-2019
