XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加发送媒体流, 添加媒体服务器节点管理ui,修复修改密码

Browse Source
This commit is contained in:
648540858
2021-09-25 22:12:15 +08:00
parent 4d92074505
commit 720231d33f
30 changed files with 890 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/src/components/CloudRecord.vue
View File

@@ -111,7 +111,7 @@
},
getMediaServerList: function (){
let that = this;
that.mediaServerObj.getMediaServerList((data)=>{
that.mediaServerObj.getOnlineMediaServerList((data)=>{
that.mediaServerList = data.data;
if (that.mediaServerList.length > 0) {
that.mediaServerId = that.mediaServerList[0].id

2
web_src/src/components/DeviceList.vue
View File

@@ -60,7 +60,7 @@
<el-button-group>
<el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0" type="primary" @click="showChannelList(scope.row)">通道</el-button>
<el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary" @click="showDevicePosition(scope.row)">定位</el-button>
<el-button size="mini" icon="el-icon-delete" type="primary" @click="edit(scope.row)">编辑</el-button>
<el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">编辑</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" v-if="scope.row.online==0" @click="deleteDevice(scope.row)">删除</el-button>
</el-button-group>
</template>

159
web_src/src/components/MediaServerManger.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<div id="mediaServerManger">
<el-container>
<el-header>
<uiHeader></uiHeader>
</el-header>
<el-main id="msMain">
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">节点列表</span>
</div>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加节点</el-button>
</div>
<el-row :gutter="12">
<el-col :span="num" v-for="item in mediaServerList" :key="item.id">
<el-card shadow="hover" :body-style="{ padding: '0px'}" class="server-card">
<div class="card-img-zlm"></div>
<div style="padding: 14px;text-align: left">
<span style="font-size: 16px">{{item.id}}</span>
<div style="margin-top: 13px; line-height: 12px; ">
<span style="font-size: 14px; color: #999; margin-top: 5px">创建时间： {{item.createTime}}</span>
<el-button icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">编辑</el-button>
</div>
</div>
<i v-if="item.status" class="iconfont icon-online server-card-status-online" title="在线"></i>
<i v-if="!item.status" class="iconfont icon-online server-card-status-offline" title="离线"></i>
</el-card>
</el-col>
</el-row>
<mediaServerEdit ref="mediaServerEdit" ></mediaServerEdit>
</el-main>
</el-container>
</div>
</template>
<script>
import uiHeader from './UiHeader.vue'
import MediaServer from './service/MediaServer'
import mediaServerEdit from './dialog/MediaServerEdit'
export default {
name: 'mediaServerManger',
components: {
uiHeader,mediaServerEdit
},
data() {
return {
mediaServerObj : new MediaServer(),
mediaServerList: [], //设备列表
winHeight: window.innerHeight - 200,
updateLooper: false,
currentPage:1,
count:15,
num: this.getNumberByWidth(),
total:0,
};
},
computed: {
},
mounted() {
this.initData();
this.updateLooper = setInterval(this.initData, 2000);
},
destroyed() {
clearTimeout(this.updateLooper);
},
methods: {
initData: function() {
this.getServerList()
},
currentChange: function(val){
this.currentPage = val;
this.getServerList();
},
handleSizeChange: function(val){
this.count = val;
this.getServerList();
},
getServerList: function(){
this.mediaServerObj.getMediaServerList((data)=>{
this.mediaServerList = data.data;
})
},
add: function (){
this.$refs.mediaServerEdit.openDialog(null, this.initData)
},
edit: function (row){
this.$refs.mediaServerEdit.openDialog(row, this.initData)
},
getNumberByWidth(){
let candidateNums = [1, 2, 3, 4, 6, 8, 12, 24]
let clientWidth = window.innerWidth - 30;
let interval = 20;
let itemWidth = 360;
let num = (clientWidth + interval)/(itemWidth + interval)
let result = Math.ceil(24/num);
let resultVal = 24;
for (let i = 0; i < candidateNums.length; i++) {
let value = candidateNums[i]
if (i + 1 >= candidateNums.length) {
return 24;
}
if (value <= result && candidateNums[i + 1] > result ) {
return value;
}
}
console.log("aadada: "+ resultVal)
return resultVal;
},
dateFormat: function(/** timestamp=0 **/) {
var ts = arguments[0] || 0;
var t,y,m,d,h,i,s;
t = ts ? new Date(ts*1000) : new Date();
y = t.getFullYear();
m = t.getMonth()+1;
d = t.getDate();
h = t.getHours();
i = t.getMinutes();
s = t.getSeconds();
// 可根据需要在这里定义时间格式
return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s);
}
}
};
</script>
<style>
.server-card{
position: relative;
margin-bottom: 20px;
}
.card-img-zlm{
width: 200px; height: 200px;
background: url('~@static/images/zlm-logo.png') no-repeat center;
background-position: center;
background-size: contain;
margin: 0 auto;
}
.server-card-status-online{
position: absolute;
right: 20px;
top: 20px;
color: #3caf36;
font-size: 18px;
}
.server-card-status-offline{
position: absolute;
right: 20px;
top: 20px;
color: #808080;
font-size: 18px;
}
.server-card:hover {
border: 1px solid #adadad;
}
</style>

1
web_src/src/components/UiHeader.vue
View File

@@ -6,6 +6,7 @@
<el-menu-item index="/pushVideoList">推流列表</el-menu-item>
<el-menu-item index="/streamProxyList">拉流代理</el-menu-item>
<el-menu-item index="/cloudRecord">云端录像</el-menu-item>
<el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
<el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item>
<el-menu-item @click="openDoc">在线文档</el-menu-item>
<!-- <el-submenu index="/setting">-->

2
web_src/src/components/control.vue
View File

@@ -139,7 +139,7 @@ export default {
this.initTable();
this.updateData();
this.chartInterval = setInterval(this.updateData, 3000);
this.mediaServer.getMediaServerList((data)=>{
this.mediaServer.getOnlineMediaServerList((data)=>{
this.mediaServerList = data.data;
if (this.mediaServerList && this.mediaServerList.length > 0) {
this.mediaServerChoose = this.mediaServerList[0].id

368
web_src/src/components/dialog/MediaServerEdit.vue Normal file
View File

@@ -0,0 +1,368 @@
<template>
<div id="mediaServerEdit" v-loading="isLoging">
<el-dialog
title="媒体节点"
:width="dialogWidth"
top="2rem"
:close-on-click-modal="false"
:visible.sync="showDialog"
:destroy-on-close="true"
@close="close()"
>
<div id="formStep" style="margin-top: 1rem; margin-right: 20px;">
<el-form v-if="currentStep == 1" ref="mediaServerForm" :rules="rules" :model="mediaServerForm" label-width="140px" >
<el-form-item label="IP" prop="ip">
<el-input v-model="mediaServerForm.ip" placeholder="媒体服务IP" clearable></el-input>
</el-form-item>
<el-form-item label="HTTP端口" prop="port">
<el-input v-model="mediaServerForm.httpPort" placeholder="媒体服务HTTP端口" clearable></el-input>
</el-form-item>
<el-form-item label="SECRET" prop="secret">
<el-input v-model="mediaServerForm.secret" placeholder="媒体服务SECRET" clearable></el-input>
</el-form-item>
<el-form-item>
<div style="float: right;">
<el-button type="primary" v-if="currentStep === 1 && serverCheck === 1" @click="next" >下一步</el-button>
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="checkServer" >测试</el-button>
<i v-if="serverCheck === 1" class="el-icon-success" style="color: #3caf36"></i>
<i v-if="serverCheck === -1" class="el-icon-error" style="color: #c80000"></i>
</div>
</el-form-item>
</el-form>
<el-row :gutter="24">
<el-col :span="12">
<el-form v-if="currentStep === 2 || currentStep === 3" ref="mediaServerForm1" :rules="rules" :model="mediaServerForm" label-width="140px" >
<el-form-item label="IP" prop="ip">
<el-input v-if="currentStep === 2" v-model="mediaServerForm.ip" disabled></el-input>
<el-input v-if="currentStep === 3" v-model="mediaServerForm.ip"></el-input>
</el-form-item>
<el-form-item label="HTTP端口" prop="port">
<el-input v-if="currentStep === 2" v-model="mediaServerForm.httpPort" disabled></el-input>
<el-input v-if="currentStep === 3" v-model="mediaServerForm.httpPort"></el-input>
</el-form-item>
<el-form-item label="SECRET" prop="secret">
<el-input v-if="currentStep === 2" v-model="mediaServerForm.secret" disabled></el-input>
<el-input v-if="currentStep === 3" v-model="mediaServerForm.secret"></el-input>
</el-form-item>
<el-form-item label="HOOK IP" prop="ip">
<el-input v-model="mediaServerForm.hookIp" placeholder="媒体服务HOOK_IP" clearable></el-input>
</el-form-item>
<el-form-item label="SDP IP" prop="ip">
<el-input v-model="mediaServerForm.sdpIp" placeholder="媒体服务SDP_IP" clearable></el-input>
</el-form-item>
<el-form-item label="流IP" prop="ip">
<el-input v-model="mediaServerForm.streamIp" placeholder="媒体服务流IP" clearable></el-input>
</el-form-item>
<el-form-item label="HTTPS PORT" prop="port">
<el-input v-model="mediaServerForm.httpSSlPort" placeholder="媒体服务HTTPS_PORT" clearable></el-input>
</el-form-item>
<el-form-item label="RTSP PORT" prop="port">
<el-input v-model="mediaServerForm.rtspPort" placeholder="媒体服务RTSP_PORT" clearable></el-input>
</el-form-item>
<el-form-item label="RTSPS PORT" prop="port">
<el-input v-model="mediaServerForm.rtspSSLPort" placeholder="媒体服务RTSPS_PORT" clearable></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form v-if="currentStep === 2 || currentStep === 3" ref="mediaServerForm2" :rules="rules" :model="mediaServerForm" label-width="180px" >
<el-form-item label="RTMP PORT" prop="port">
<el-input v-model="mediaServerForm.rtmpPort" placeholder="媒体服务RTMP_PORT" clearable></el-input>
</el-form-item>
<el-form-item label="RTMPS PORT" prop="port">
<el-input v-model="mediaServerForm.rtmpSSlPort" placeholder="媒体服务RTMPS_PORT" clearable></el-input>
</el-form-item>
<el-form-item label="自动配置媒体服务" >
<el-switch v-model="mediaServerForm.autoConfig"></el-switch>
</el-form-item>
<el-form-item label="收流端口模式" >
<el-switch active-text="多端口" inactive-text="单端口" v-model="mediaServerForm.rtpEnable"></el-switch>
</el-form-item>
<el-form-item v-if="!mediaServerForm.rtpEnable" label="收流端口" prop="port">
<el-input v-model.number="mediaServerForm.rtpProxyPort" clearable></el-input>
</el-form-item>
<el-form-item v-if="mediaServerForm.rtpEnable" label="收流端口" prop="port">
<el-input v-model="mediaServerForm.rtpPortRange1" placeholder="起始" clearable style="width: 100px" prop="port"></el-input>
-
<el-input v-model="mediaServerForm.rtpPortRange2" placeholder="终止" clearable style="width: 100px" prop="port"></el-input>
</el-form-item>
<el-form-item label="推流端口" prop="port">
<el-input v-model="mediaServerForm.sendRtpPortRange1" placeholder="起始" clearable style="width: 100px" prop="port"></el-input>
-
<el-input v-model="mediaServerForm.sendRtpPortRange2" placeholder="终止" clearable style="width: 100px" prop="port"></el-input>
</el-form-item>
<el-form-item label="无人观看多久后停止拉流" >
<el-input v-model.number="mediaServerForm.streamNoneReaderDelayMS" clearable></el-input>
</el-form-item>
<el-form-item label="录像管理服务端口" prop="port">
<el-input v-model.number="mediaServerForm.recordAssistPort">
<!-- <el-button v-if="mediaServerForm.recordAssistPort > 0" slot="append" type="primary" @click="checkRecordServer">测试</el-button>-->
<el-button v-if="mediaServerForm.recordAssistPort > 0" class="el-icon-check" slot="append" type="primary" @click="checkRecordServer"></el-button>
</el-input>
<i v-if="recordServerCheck == 1" class="el-icon-success" style="color: #3caf36; position: absolute;top: 14px;"></i>
<i v-if="recordServerCheck == 2" class="el-icon-loading" style="color: #3caf36; position: absolute;top: 14px;"></i>
<i v-if="recordServerCheck === -1" class="el-icon-error" style="color: #c80000; position: absolute;top: 14px;"></i>
</el-form-item>
<el-form-item>
<div style="float: right;">
<el-button type="primary" @click="onSubmit" >提交</el-button>
<el-button @click="close">取消</el-button>
</div>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</el-dialog>
</div>
</template>
<script>
import MediaServer from './../service/MediaServer'
export default {
name: "streamProxyEdit",
props: {},
computed: {},
created() {
this.setDialogWidth()
},
data() {
const isValidIp = (rule, value, callback) => { // 校验IP是否符合规则
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
console.log(this.mediaServerForm.ip)
if (!reg.test(this.mediaServerForm.ip)) {
return callback(new Error('请输入有效的IP地址'))
} else {
callback()
}
return true
}
const isValidPort = (rule, value, callback) => { // 校验IP是否符合规则
var reg = /^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/
if (!reg.test(this.mediaServerForm.httpPort)) {
return callback(new Error('请输入有效的端口号'))
} else {
callback()
}
return true
}
return {
dialogWidth: 0,
defaultWidth: 1000,
listChangeCallback: null,
showDialog: false,
isLoging: false,
dialogLoading: false,
currentStep: 1,
platformList: [],
mediaServer: new MediaServer(),
serverCheck: 0,
recordServerCheck: 0,
mediaServerForm: {
id: "",
ip: "",
autoConfig: true,
hookIp: "",
sdpIp: "",
streamIp: "",
streamNoneReaderDelayMS: "",
secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc",
httpPort: "",
httpSSlPort: "",
recordAssistPort: "",
rtmpPort: "",
rtmpSSlPort: "",
rtpEnable: false,
rtpPortRange: "",
sendRtpPortRange: "",
rtpPortRange1: "",
rtpPortRange2: "",
sendRtpPortRange1: "",
sendRtpPortRange2: "",
rtpProxyPort: "",
rtspPort: "",
rtspSSLPort: "",
},
rules: {
ip: [{ required: true, validator: isValidIp, message: '请输入有效的IP地址', trigger: 'blur' }],
port: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
secret: [{ required: true, message: "请输入secret", trigger: "blur" }],
timeout_ms: [{ required: true, message: "请输入FFmpeg推流成功超时时间", trigger: "blur" }],
ffmpeg_cmd_key: [{ required: false, message: "请输入FFmpeg命令参数模板（可选）", trigger: "blur" }],
},
};
},
methods: {
setDialogWidth() {
let val = document.body.clientWidth
if (val < this.defaultWidth) {
this.dialogWidth = '100%'
} else {
this.dialogWidth = this.defaultWidth + 'px'
}
},
openDialog: function (param, callback) {
this.showDialog = true;
this.listChangeCallback = callback;
if (param != null) {
this.mediaServerForm = param;
this.currentStep = 3;
if (param.rtpPortRange) {
let rtpPortRange = this.mediaServerForm.rtpPortRange.split(",");
if (rtpPortRange.length > 0) {
this.mediaServerForm["rtpPortRange1"] = rtpPortRange[0]
this.mediaServerForm["rtpPortRange2"] = rtpPortRange[1]
}
}
let sendRtpPortRange = this.mediaServerForm.sendRtpPortRange.split(",");
this.mediaServerForm["sendRtpPortRange1"] = sendRtpPortRange[0]
this.mediaServerForm["sendRtpPortRange2"] = sendRtpPortRange[1]
}
},
checkServer: function() {
let that = this;
that.serverCheck = 0;
that.mediaServer.checkServer(that.mediaServerForm, data =>{
if (data.code === 0) {
if (parseInt(that.mediaServerForm.httpPort) !== parseInt(data.data.httpPort)) {
that.$message({
showClose: true,
message: '如果你正在使用docker部署你的媒体服务，请注意的端口映射。',
type: 'warning',
duration: 0
});
}
let httpPort = that.mediaServerForm.httpPort;
that.mediaServerForm = data.data;
that.mediaServerForm.httpPort = httpPort;
that.mediaServerForm.autoConfig = true;
that.mediaServerForm.sendRtpPortRange1 = 30000
that.mediaServerForm.sendRtpPortRange2 = 30500
that.mediaServerForm.rtpPortRange1 = 30000
that.mediaServerForm.rtpPortRange2 = 30500
that.serverCheck = 1;
}else {
that.serverCheck = -1;
that.$message({
showClose: true,
message: data.msg,
type: "error",
});
}
})
},
next: function (){
this.currentStep = 2;
this.defaultWidth = 900;
this.setDialogWidth();
},
checkRecordServer: function (){
let that = this;
that.recordServerCheck = 2;
if (that.mediaServerForm.recordAssistPort <= 0 || that.mediaServerForm.recordAssistPort > 65535 ) {
that.recordServerCheck = -1;
that.$message({
showClose: true,
message: "端口号应该在-65535之间",
type: "error",
});
return;
}
that.mediaServer.checkRecordServer(that.mediaServerForm, data =>{
if (data.code === 0) {
that.recordServerCheck = 1;
}else {
that.recordServerCheck = -1;
that.$message({
showClose: true,
message: data.msg,
type: "error",
});
}
})
},
onSubmit: function () {
this.dialogLoading = true;
let that = this;
if (this.mediaServerForm.rtpEnable) {
this.mediaServerForm.rtpPortRange = this.mediaServerForm.rtpPortRange1 + "," + this.mediaServerForm.rtpPortRange2;
}
this.mediaServerForm.sendRtpPortRange = this.mediaServerForm.sendRtpPortRange1 + "," + this.mediaServerForm.sendRtpPortRange2;
that.mediaServer.addServer(this.mediaServerForm, data => {
if (data.code === 0) {
that.$message({
showClose: true,
message: "保存成功",
type: "success",
});
if (this.listChangeCallback) this.listChangeCallback();
that.close()
}else {
that.$message({
showClose: true,
message: data.msg,
type: "error",
});
}
})
},
close: function () {
this.showDialog = false;
this.dialogLoading = false;
this.mediaServerForm = {
id: "",
ip: "",
autoConfig: true,
hookIp: "",
sdpIp: "",
streamIp: "",
streamNoneReaderDelayMS: "",
secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc",
httpPort: "",
httpSSlPort: "",
recordAssistPort: "",
rtmpPort: "",
rtmpSSlPort: "",
rtpEnable: false,
rtpPortRange: "",
sendRtpPortRange: "",
rtpPortRange1: "",
rtpPortRange2: "",
sendRtpPortRange1: "",
sendRtpPortRange2: "",
rtpProxyPort: "",
rtspPort: "",
rtspSSLPort: "",
};
this.listChangeCallback = null
this.currentStep = 1;
},
deviceGBIdExit: async function (deviceGbId) {
var result = false;
var that = this;
await that.$axios({
method: 'post',
url:`/api/platform/exit/${deviceGbId}`
}).then(function (res) {
result = res.data;
}).catch(function (error) {
console.log(error);
});
return result;
},
checkExpires: function() {
if (this.platform.enable && this.platform.expires == "0") {
this.platform.expires = "300";
}
}
},
};
</script>

2
web_src/src/components/dialog/StreamProxyEdit.vue
View File

@@ -203,7 +203,7 @@ export default {
}).catch(function (error) {
console.log(error);
});
this.mediaServer.getMediaServerList((data)=>{
this.mediaServer.getOnlineMediaServerList((data)=>{
this.mediaServerList = data;
})
},

2
web_src/src/components/dialog/changePassword.vue
View File

@@ -89,7 +89,7 @@ export default {
method: 'post',
url:"/api/user/changePassword",
params: {
oldpassword: crypto.createHash('md5').update(this.oldPassword, "utf8").digest('hex'),
oldPassword: crypto.createHash('md5').update(this.oldPassword, "utf8").digest('hex'),
password: this.newPassword
}
}).then((res)=> {

2
web_src/src/components/dialog/deviceEdit.vue
View File

@@ -82,7 +82,7 @@ export default {
},
getMediaServerList: function (){
let that = this;
that.mediaServerObj.getMediaServerList((data)=>{
that.mediaServerObj.getOnlineMediaServerList((data)=>{
that.mediaServerList = data.data;
})
},

55
web_src/src/components/service/MediaServer.js
View File

@@ -6,7 +6,7 @@ class MediaServer{
this.$axios = axios;
}
getMediaServerList(callback){
getOnlineMediaServerList(callback){
this.$axios({
method: 'get',
url:`/api/server/media_server/online/list`,
@@ -16,6 +16,16 @@ class MediaServer{
console.log(error);
});
}
getMediaServerList(callback){
this.$axios({
method: 'get',
url:`/api/server/media_server/list`,
}).then(function (res) {
if (typeof (callback) == "function") callback(res.data)
}).catch(function (error) {
console.log(error);
});
}
getMediaServer(id, callback){
this.$axios({
@@ -27,6 +37,49 @@ class MediaServer{
console.log(error);
});
}
checkServer(param, callback){
this.$axios({
method: 'get',
url:`/api/server/media_server/check`,
params: {
ip: param.ip,
port: param.httpPort,
secret: param.secret
}
}).then(function (res) {
if (typeof (callback) == "function") callback(res.data)
}).catch(function (error) {
console.log(error);
});
}
checkRecordServer(param, callback){
this.$axios({
method: 'get',
url:`/api/server/media_server/record/check`,
params: {
ip: param.ip,
port: param.recordAssistPort
}
}).then(function (res) {
if (typeof (callback) == "function") callback(res.data)
}).catch(function (error) {
console.log(error);
});
}
addServer(param, callback){
this.$axios({
method: 'post',
url:`/api/server/media_server/save`,
data: param
}).then(function (res) {
if (typeof (callback) == "function") callback(res.data)
}).catch(function (error) {
console.log(error);
});
}
}
export default MediaServer;