1.背景需求
- 很多客戶在使用EasyNVR無插件流媒體服務器時，不喜歡產品化的界面，有時可能滿足不了日常觀看使用的需求。因此軟件提供豐富的HTTP接口，供第三方平臺調用集成。但是有時客戶這邊可能沒有專業的團隊進行二次開發，這樣一來就無法使用軟件提供這麼優秀的環境，實屬可惜。
2.解決方案
- 這裏可以通過很多種方法調取軟件提供的接口，只要支持http協議都可以。這裏我通過jQuery插件調取接口實現在web播放功能小案例,目的就是爲了讓客戶對接口的初步瞭解並使用。
3.實現
- 新建文件demo目錄結構如下easy-player.swf和easy-player-element.min.js文件可以通過[https://www.npmjs.com/package/easy-player]獲取，插件有詳細使用文檔。
![EasyPlayer播放器]()
- 使用到軟件的接口
![EasyNVR接口]()
- index.html內容文件如下
<!DOCTYPE HTML>
<html>
<head>
<title>easy-player</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>獲取播放鏈接並播放</button>
</body>
<!-- 引入播放器插件文件 -->
<script type="text/javascript" src="easy-player-element.min.js"></script>
<!-- 引入jqueryCDN地址 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
// 文檔加載完成會執行ready()函數文件
$(document).ready(function(){
//點擊button按鈕獲取視頻地址
$("button").click(function(){
//調取接口的地址有三種這裏使用的是HLS
//http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=FLV
//http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=RTMP
$.get("http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=HLS",function(data,status){
//返回的數據 data JSON格式
console.log(data);
//拼接返回的地址字符串給 video-url
//注：RTMP不需要拼接 "http://127.0.0.1:10800"+
$("#test2").attr("video-url","http://127.0.0.1:10800"+ data.EasyDarwin.Body.URL);
});
});
});
</script>
</html>
- 準備好之後在當前文件hs -o以服務的方式啓動
hs -o
如果軟件有npm
npm install http-server -g 全局安裝
如果沒有可以使用其他服務的方式打開此文件。
注：一定要以服務的方式訪問index.html
- 啓動成功點擊獲取
![EasyPlayer播放器]()
- 成功播放
![EasyPlayer播放器]()
案例gitee地址:[https://gitee.com/daybreakxh/ajaxdemo.git]
關於EasyNVR
EasyNVR能夠通過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具有RTSP協議輸出的設備接入到EasyNVR，EasyNVR能夠將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），並且EasyNVR能夠將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發；
點擊鏈接加入羣【EasyNVR解決方案】：383501345
Copyright © EasyNVR.com 2016-2019
