From f1d079f9c0b3d384090477ca54e0548373d62b57 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Thu, 16 Jan 2025 11:56:39 +0800
Subject: [PATCH] 配置修改
---
web_src/src/components/dialog/MediaServerEdit.vue | 377 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 377 insertions(+), 0 deletions(-)
diff --git a/web_src/src/components/dialog/MediaServerEdit.vue b/web_src/src/components/dialog/MediaServerEdit.vue
new file mode 100644
index 0000000..24f8c85
--- /dev/null
+++ b/web_src/src/components/dialog/MediaServerEdit.vue
@@ -0,0 +1,377 @@
+<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 :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="HTTP端口" prop="httpPort">
+ <el-input v-model="mediaServerForm.httpPort" placeholder="媒体服务HTTP端口" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="SECRET" prop="secret">
+ <el-input v-model="mediaServerForm.secret" placeholder="媒体服务SECRET" clearable :disabled="mediaServerForm.defaultServer"></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 :disabled="mediaServerForm.defaultServer"></el-input>
+ <el-input v-if="currentStep === 3" v-model="mediaServerForm.ip" :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="HTTP端口" prop="httpPort">
+ <el-input v-if="currentStep === 2" v-model="mediaServerForm.httpPort" disabled :disabled="mediaServerForm.defaultServer"></el-input>
+ <el-input v-if="currentStep === 3" v-model="mediaServerForm.httpPort" :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="HOOK IP" prop="ip">
+ <el-input v-model="mediaServerForm.hookIp" placeholder="媒体服务HOOK_IP" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="SDP IP" prop="ip">
+ <el-input v-model="mediaServerForm.sdpIp" placeholder="媒体服务SDP_IP" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="流IP" prop="ip">
+ <el-input v-model="mediaServerForm.streamIp" placeholder="媒体服务流IP" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="HTTPS PORT" prop="httpSSlPort">
+ <el-input v-model="mediaServerForm.httpSSlPort" placeholder="媒体服务HTTPS_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="RTSP PORT" prop="rtspPort">
+ <el-input v-model="mediaServerForm.rtspPort" placeholder="媒体服务RTSP_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="RTSPS PORT" prop="rtspSSLPort">
+ <el-input v-model="mediaServerForm.rtspSSLPort" placeholder="媒体服务RTSPS_PORT" clearable :disabled="mediaServerForm.defaultServer"></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="rtmpPort">
+ <el-input v-model="mediaServerForm.rtmpPort" placeholder="媒体服务RTMP_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="RTMPS PORT" prop="rtmpSSlPort">
+ <el-input v-model="mediaServerForm.rtmpSSlPort" placeholder="媒体服务RTMPS_PORT" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="SECRET" prop="secret">
+ <el-input v-if="currentStep === 2" v-model="mediaServerForm.secret" disabled :disabled="mediaServerForm.defaultServer"></el-input>
+ <el-input v-if="currentStep === 3" v-model="mediaServerForm.secret" :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="自动配置媒体服务" >
+ <el-switch v-model="mediaServerForm.autoConfig" :disabled="mediaServerForm.defaultServer"></el-switch>
+ </el-form-item>
+ <el-form-item label="收流端口模式" >
+ <el-switch active-text="多端口" inactive-text="单端口" v-model="mediaServerForm.rtpEnable" :disabled="mediaServerForm.defaultServer"></el-switch>
+ </el-form-item>
+
+ <el-form-item v-if="!mediaServerForm.rtpEnable" label="收流端口" prop="rtpProxyPort">
+ <el-input v-model.number="mediaServerForm.rtpProxyPort" clearable :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item v-if="mediaServerForm.rtpEnable" label="收流端口" >
+ <el-input v-model="rtpPortRange1" placeholder="起始" @change="portRangeChange" clearable style="width: 100px" prop="rtpPortRange1" :disabled="mediaServerForm.defaultServer"></el-input>
+ -
+ <el-input v-model="rtpPortRange2" placeholder="终止" @change="portRangeChange" clearable style="width: 100px" prop="rtpPortRange2" :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="推流端口" prop="sendRtpPortRange1">
+ <el-input v-model="sendRtpPortRange1" placeholder="起始" @change="portRangeChange" clearable style="width: 100px" prop="sendRtpPortRange1" :disabled="mediaServerForm.defaultServer"></el-input>
+ -
+ <el-input v-model="sendRtpPortRange2" placeholder="终止" @change="portRangeChange" clearable style="width: 100px" prop="sendRtpPortRange2" :disabled="mediaServerForm.defaultServer"></el-input>
+ </el-form-item>
+ <el-form-item label="录像管理服务端口" prop="recordAssistPort">
+ <el-input v-model.number="mediaServerForm.recordAssistPort" :disabled="mediaServerForm.defaultServer">
+<!-- <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 v-if="!mediaServerForm.defaultServer" type="primary" @click="onSubmit" >提交</el-button>
+ <el-button v-if="!mediaServerForm.defaultServer" @click="close">取消</el-button>
+ <el-button v-if="mediaServerForm.defaultServer" @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: "",
+ secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc",
+ httpPort: "",
+ httpSSlPort: "",
+ recordAssistPort: "",
+ rtmpPort: "",
+ rtmpSSlPort: "",
+ rtpEnable: false,
+ rtpPortRange: "",
+ sendRtpPortRange: "",
+ rtpProxyPort: "",
+ rtspPort: "",
+ rtspSSLPort: "",
+ },
+ rtpPortRange1:30000,
+ rtpPortRange2:30500,
+ sendRtpPortRange1:30000,
+ sendRtpPortRange2:30500,
+
+ rules: {
+ ip: [{ required: true, validator: isValidIp, message: '请输入有效的IP地址', trigger: 'blur' }],
+ httpPort: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ httpSSlPort: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ recordAssistPort: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ rtmpPort: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ rtmpSSlPort: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ rtpPortRange1: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ rtpPortRange2: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ sendRtpPortRange1: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ sendRtpPortRange2: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ rtpProxyPort: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ rtspPort: [{ required: true, validator: isValidPort, message: '请输入有效的端口号', trigger: 'blur' }],
+ rtspSSLPort: [{ 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.rtpPortRange1 = rtpPortRange[0]
+ this.rtpPortRange2 = rtpPortRange[1]
+ }
+ }
+ let sendRtpPortRange = this.mediaServerForm.sendRtpPortRange.split(",");
+ this.sendRtpPortRange1 = sendRtpPortRange[0]
+ this.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.sendRtpPortRange1 = 30000
+ that.sendRtpPortRange2 = 30500
+ that.rtpPortRange1 = 30000
+ that.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;
+ 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: "",
+ secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc",
+ httpPort: "",
+ httpSSlPort: "",
+ recordAssistPort: "",
+ rtmpPort: "",
+ rtmpSSlPort: "",
+ rtpEnable: false,
+ rtpPortRange: "",
+ sendRtpPortRange: "",
+ rtpProxyPort: "",
+ rtspPort: "",
+ rtspSSLPort: "",
+ };
+ this.sendRtpPortRange1 = 30000;
+ this.sendRtpPortRange2 = 30500;
+ this.rtpPortRange1 = 30500;
+ this.rtpPortRange2 = 30500;
+ this.listChangeCallback = null
+ this.currentStep = 1;
+ },
+ deviceGBIdExit: async function (deviceGbId) {
+ var result = false;
+ var that = this;
+ await that.$axios({
+ method: 'get',
+ 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";
+ }
+ },
+ portRangeChange: function() {
+ this.mediaServerForm.sendRtpPortRange = this.sendRtpPortRange1 + "," + this.sendRtpPortRange2
+ this.mediaServerForm.rtpPortRange = this.rtpPortRange1 + "," + this.rtpPortRange2
+ console.log(this.mediaServerForm.sendRtpPortRange)
+ console.log(this.mediaServerForm.rtpPortRange)
+ }
+ },
+};
+</script>
--
Gitblit v1.9.3