1.背景需求
- 想通過接口二次集成在自己的原有的web業務系統實現實時直播， 但是用戶一直困惑獲取直播鏈接通道和獲取直播保活鏈接通道的區別和使用。
2.解決方案
- 第一種方法：通道配置成非按需，使用直播鏈接通道接口獲取視頻流地址，通過接口獲取的視頻流地址客戶端這邊就可以一直播放，
不需要直播保活接口，來維持服務端向設備的拉取視頻流。但是如果使用非按需的通道比較多那對服務端的壓力比較大。（注：按需和非按需參考[https://mp.csdn.net/mdeditor/84893294]） - 第二種方法：通道配置成按需，這裏我是基於WEB調取軟件提供的接口，使用的是HTML，CSS，Javascript等一些插件來實現視頻保活並一直播放，也可通過其他編程方式，只要支持http協議都可以使用接口。
3.實現
- 新建文件demo目錄結構如下easy-player.swf和easy-player-element.min.js文件可以通過[https://www.npmjs.com/package/easy-player]獲取，插件有詳細使用文檔。
![在這裏插入圖片描述]()
- 使用到軟件的接口
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
- 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">
</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>
- 用瀏覽器打開index.html點擊開始播放
- 停止保活後服務端會停止向設備端拉視頻，相應的客戶端這邊取不到視頻流也會停止。
![在這裏插入圖片描述]()
案例github地址:[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
