EasyNVR二次開發直播通道介面保活例項
阿新 • • 發佈：2020-11-20
<!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>