1.背景需求
- 通過接口把EasyNVR軟件上通道配置上傳下載功能集成到自己的業務系統或者平臺當中，這樣可以方便自己的操作以及更好的管理設備通道信息。
2.解決方案
- 這裏基於web瀏覽器中vuejs，element-ui當前比較流行的框架來完成通道配置上傳下載功能，互聯網發展迅速建議使用比較流行的技術，提高開發效率。效果如下：
![在這裏插入圖片描述]()
3.實現案例
-
使用到EasyNVR接口如下
![在這裏插入圖片描述]()
-
html文件內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyNVR-demo</title>
<!-- 引入element-ui樣式CDN鏈接 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
#app{
text-align: center;
margin: auto;
}
</style>
<body>
<div id="app">
<h2>EasyNVR-通道上傳下載demo</h2>
<!-- 導入element-ui上傳組件 -->
<el-upload class="upload-demo" drag :action=action multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
<div class="el-upload__tip" slot="tip"></div>
</el-upload>
<!-- 下載按鈕綁定一個下載方法 -->
<el-button type="success" size="mini" @click="download">下載通道配文件</el-button>
</div>
<!-- 引入Vue樣式CDN鏈接 -->
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<!-- 引入element-ui JS CDN鏈接 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
//定義一個變量來存放服務端接口ip和端口地址
var httpStr = "http://127.0.0.1:10800"
// 定義一個Vue實例
new Vue({
el: '#app',
data: {
//綁定上傳接口地址到element-ui上傳組件中
action: httpStr + "/api/v1/uploadxlsx"
},
methods: {
//定義一個下載方法
download() {
//填入下載接口地址
window.open(httpStr + "/api/v1/downloadxlsx");
}
},
})
</script>
</body>
</html>
案例github地址:[https://github.com/EasyNVR/EasyNVR/blob/master/EasyNVR_apidemo/apidemo/easynvr下載上傳.html]
關於EasyNVR
EasyNVR能夠通過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具有RTSP協議輸出的設備接入到EasyNVR，EasyNVR能夠將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），並且EasyNVR能夠將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發；
點擊鏈接加入羣【EasyNVR解決方案】：383501345
Copyright © EasyDarwin Team 2012-2019
