Merge branch 'master' into 1078

web_src/src/components/MediaServerManger.vue

@@ -10,7 +10,8 @@
     <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 v-if="item.type === 'zlm'" class="card-img-zlm"></div>
+          <div v-if="item.type === 'abl'" class="card-img-abl"></div>
           <div style="padding: 14px;text-align: left">
             <span style="font-size: 16px">{{item.id}}</span>
             <el-button v-if="!item.defaultServer" icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">编辑</el-button>
@@ -154,6 +155,13 @@
     background-size: contain;
     margin: 0 auto;
   }
+  .card-img-abl{
+    width: 200px; height: 200px;
+    background: url('~@static/images/abl-logo.jpg') no-repeat center;
+    background-position: center;
+    background-size: contain;
+    margin: 0 auto;
+  }
   .server-card-status-online{
     position: absolute;
     right: 20px;

web_src/src/components/UserApiKeyManager.vue

@@ -0,0 +1,303 @@
+<template>
+  <div id="app" style="width: 100%">
+    <div class="page-header" style="margin-bottom: 0">
+      <div class="page-title">
+        <el-page-header @back="goBack" content="ApiKey列表"></el-page-header>
+      </div>
+      <div class="page-header-btn">
+        <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addUserApiKey">
+          添加ApiKey
+        </el-button>
+      </div>
+    </div>
+    <!--ApiKey列表-->
+    <el-table :data="userList" style="width: 100%;font-size: 12px;" :height="winHeight"
+              header-row-class-name="table-header">
+      <el-table-column prop="user.username" label="用户名" min-width="120"/>
+      <el-table-column prop="app" label="应用名" min-width="160"/>
+      <el-table-column label="ApiKey" :show-overflow-tooltip="true" min-width="300">
+        <template #default="scope">
+<!--          <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy"  title="点击拷贝" v-clipboard="scope.row.apiKey" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->
+          <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="scope.row.apiKey" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
+          <span>{{scope.row.apiKey}}</span>
+
+        </template>
+      </el-table-column>
+      <el-table-column prop="enable" label="启用" width="120">
+        <template #default="scope">
+          <el-tag v-if="scope.row.enable">
+            启用
+          </el-tag>
+          <el-tag v-else type="info">
+            停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="expiredAt" label="过期时间" width="160"/>
+      <el-table-column prop="remark" label="备注信息" min-width="160"/>
+      <el-table-column label="操作" min-width="260" fixed="right">
+        <template #default="scope">
+          <el-button v-if="scope.row.enable"
+                     size="medium" icon="el-icon-circle-close" type="text" @click="disableUserApiKey(scope.row)">
+            停用
+          </el-button>
+          <el-button v-else
+                     size="medium" icon="el-icon-circle-check" type="text" @click="enableUserApiKey(scope.row)">
+            启用
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-refresh" type="text" @click="resetUserApiKey(scope.row)">
+            重置
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-edit" type="text" @click="remarkUserApiKey(scope.row)">
+            备注
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-delete" type="text" @click="deleteUserApiKey(scope.row)"
+                     style="color: #f56c6c">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <addUserApiKey ref="addUserApiKey"></addUserApiKey>
+    <remarkUserApiKey ref="remarkUserApiKey"></remarkUserApiKey>
+    <el-pagination
+      style="float: right"
+      @size-change="handleSizeChange"
+      @current-change="currentChange"
+      :current-page="currentPage"
+      :page-size="count"
+      :page-sizes="[15, 25, 35, 50]"
+      layout="total, sizes, prev, pager, next"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import uiHeader from '../layout/UiHeader.vue'
+import addUserApiKey from "./dialog/addUserApiKey.vue";
+import remarkUserApiKey from './dialog/remarkUserApiKey.vue'
+
+export default {
+  name: 'userApiKeyManager',
+  components: {
+    uiHeader,
+    addUserApiKey,
+    remarkUserApiKey
+  },
+  data() {
+    return {
+      userList: [], //设备列表
+      currentUser: {}, //当前操作设备对象
+      winHeight: window.innerHeight - 200,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      getUserApiKeyListLoading: false
+    };
+  },
+  mounted() {
+    this.initParam();
+    this.initData();
+  },
+  methods: {
+    goBack() {
+      this.$router.back()
+    },
+    initParam() {
+      this.userId = this.$route.params.userId;
+    },
+    initData() {
+      this.getUserApiKeyList();
+    },
+    currentChange(val) {
+      this.currentPage = val;
+      this.getUserApiKeyList();
+    },
+    handleSizeChange(val) {
+      this.count = val;
+      this.getUserApiKeyList();
+    },
+    getUserApiKeyList() {
+      let that = this;
+      this.getUserApiKeyListLoading = true;
+      this.$axios({
+        method: 'get',
+        url: `/api/userApiKey/userApiKeys`,
+        params: {
+          page: that.currentPage,
+          count: that.count
+        }
+      }).then((res) => {
+        if (res.data.code === 0) {
+          that.total = res.data.data.total;
+          that.userList = res.data.data.list;
+        }
+        that.getUserApiKeyListLoading = false;
+      }).catch((error) => {
+        that.getUserApiKeyListLoading = false;
+      });
+    },
+    addUserApiKey() {
+      this.$refs.addUserApiKey.openDialog(this.userId, () => {
+        this.$refs.addUserApiKey.close();
+        this.$message({
+          showClose: true,
+          message: "ApiKey添加成功",
+          type: "success",
+        });
+        setTimeout(this.getUserApiKeyList, 200)
+      })
+    },
+    remarkUserApiKey(row) {
+      this.$refs.remarkUserApiKey.openDialog(row.id, () => {
+        this.$refs.remarkUserApiKey.close();
+        this.$message({
+          showClose: true,
+          message: "备注修改成功",
+          type: "success",
+        });
+        setTimeout(this.getUserApiKeyList, 200)
+      })
+    },
+    enableUserApiKey(row) {
+      let msg = "确定启用此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定启用此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'post',
+          url: `/api/userApiKey/enable?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '启用成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '启用失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+    disableUserApiKey(row) {
+      let msg = "确定停用此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定停用此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'post',
+          url: `/api/userApiKey/disable?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '停用成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '停用失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+    resetUserApiKey(row) {
+      let msg = "确定重置此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定重置此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'post',
+          url: `/api/userApiKey/reset?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '重置成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '重置失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+    deleteUserApiKey(row) {
+      let msg = "确定删除此ApiKey？"
+      if (row.online !== 0) {
+        msg = "<strong>确定删除此ApiKey？</strong>"
+      }
+      this.$confirm(msg, '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        center: true,
+        type: 'warning'
+      }).then(() => {
+        this.$axios({
+          method: 'delete',
+          url: `/api/userApiKey/delete?id=${row.id}`
+        }).then((res) => {
+          this.$message({
+            showClose: true,
+            message: '删除成功',
+            type: 'success'
+          });
+          this.getUserApiKeyList();
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: '删除失败',
+            type: 'error'
+          });
+          console.error(error);
+        });
+      }).catch(() => {
+      });
+    },
+  }
+}
+</script>
+<style>
+
+</style>

web_src/src/components/UserManager.vue

@@ -23,6 +23,8 @@
           <el-divider direction="vertical"></el-divider>
           <el-button size="medium" icon="el-icon-edit" type="text" @click="changePushKey(scope.row)">修改pushkey</el-button>
           <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-edit" type="text" @click="showUserApiKeyManager(scope.row)">管理ApiKey</el-button>
+          <el-divider direction="vertical"></el-divider>
           <el-button size="medium" icon="el-icon-delete" type="text" @click="deleteUser(scope.row)"
                      style="color: #f56c6c">删除
           </el-button>
@@ -178,7 +180,10 @@ export default {
         setTimeout(this.getUserList, 200)
 
       })
-    }
+    },
+    showUserApiKeyManager: function (row) {
+      this.$router.push(`/userApiKeyManager/${row.id}`)
+    },
   }
 }
 </script>

web_src/src/components/dialog/MediaServerEdit.vue

@@ -20,6 +20,12 @@
           <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 label="类型" prop="type">
+            <el-select v-model="mediaServerForm.type" style="float: left; width: 100%" >
+              <el-option key="zlm" label="ZLMediaKit" value="zlm"></el-option>
+              <el-option key="abl" label="ABLMediaServer" value="abl"></el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <div style="float: right;">
               <el-button type="primary" v-if="currentStep === 1 && serverCheck === 1" @click="next" >下一步</el-button>
@@ -170,7 +176,7 @@ export default {
         hookIp: "",
         sdpIp: "",
         streamIp: "",
-        secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc",
+        secret: "",
         httpPort: "",
         httpSSlPort: "",
         recordAssistPort: "",
@@ -182,6 +188,7 @@ export default {
         rtpProxyPort: "",
         rtspPort: "",
         rtspSSLPort: "",
+        type: "zlm",
       },
       rtpPortRange1:30000,
       rtpPortRange2:30500,
@@ -330,7 +337,7 @@ export default {
         hookIp: "",
         sdpIp: "",
         streamIp: "",
-        secret: "035c73f7-bb6b-4889-a715-d9eb2d1925cc",
+        secret: "",
         httpPort: "",
         httpSSlPort: "",
         recordAssistPort: "",

web_src/src/components/dialog/addUserApiKey.vue

@@ -0,0 +1,139 @@
+<template>
+  <div id="addUserApiKey" v-loading="isLoading">
+    <el-dialog
+      title="添加ApiKey"
+      width="40%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="margin-right: 20px;">
+        <el-form ref="formRef" :model="form" :rules="rules" status-icon label-width="80px">
+          <el-form-item label="应用名" prop="app">
+            <el-input
+              v-model="form.app"
+              property="app"
+              autocomplete="off"/>
+          </el-form-item>
+          <el-form-item label="启用状态" prop="enable" style="text-align: left">
+            <el-switch
+              v-model="form.enable"
+              property="enable"
+              active-text="启用"
+              inactive-text="停用"/>
+          </el-form-item>
+          <el-form-item label="过期时间" prop="expiresAt" style="text-align: left">
+            <el-date-picker v-model="form.expiresAt"
+                            style="width: 100%"
+                            property="expiresAt"
+                            type="datetime"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="选择过期时间"/>
+          </el-form-item>
+          <el-form-item label="备注信息" prop="remark">
+            <el-input v-model="form.remark"
+                      type="textarea"
+                      property="remark"
+                      autocomplete="off"
+                      :autosize="{ minRows: 5}"
+                      maxlength="255"
+                      show-word-limit/>
+          </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>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'addUserApiKey',
+  props: {},
+  computed: {},
+  created() {
+  },
+  data() {
+    return {
+      userId: null,
+      form: {
+        app: null,
+        enable: true,
+        expiresAt: null,
+        remark: null
+      },
+      rules: {
+        app: [{required: true, trigger: 'blur', message: '应用名不能为空'}]
+      },
+      listChangeCallback: null,
+      showDialog: false,
+      isLoading: false
+    };
+  },
+  methods: {
+    resetForm() {
+      this.form = {
+        app: null,
+        enable: true,
+        expiresAt: null,
+        remark: null
+      }
+    },
+    openDialog(userId, callback) {
+      this.resetForm()
+      this.userId = userId
+      this.listChangeCallback = callback
+      this.showDialog = true
+    },
+    onSubmit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$axios({
+            method: 'post',
+            url: '/api/userApiKey/add',
+            params: {
+              userId: this.userId,
+              app: this.form.app,
+              enable: this.form.enable,
+              expiresAt: this.form.expiresAt,
+              remark: this.form.remark,
+            }
+          }).then((res) => {
+            if (res.data.code === 0) {
+              this.$message({
+                showClose: true,
+                message: '添加成功',
+                type: 'success'
+              });
+              this.showDialog = false
+              if (this.listChangeCallback) {
+                this.listChangeCallback()
+              }
+            } else {
+              this.$message({
+                showClose: true,
+                message: res.data.msg,
+                type: 'error'
+              });
+            }
+          }).catch((error) => {
+            console.error(error)
+          });
+        }
+      });
+    },
+    close() {
+      this.showDialog = false
+    }
+  },
+};
+</script>

web_src/src/components/dialog/remarkUserApiKey.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="remarkUserApiKey" v-loading="isLoading">
+    <el-dialog
+      title="ApiKey备注"
+      width="40%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="margin-right: 20px;">
+        <el-form ref="form" :rules="rules" status-icon label-width="80px">
+          <el-form-item label="备注" prop="oldPassword">
+            <el-input type="textarea" v-model="form.remark" autocomplete="off" :autosize="{ minRows: 5}" maxlength="255" show-word-limit></el-input>
+          </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>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "remarkUserApiKey",
+  props: {},
+  computed: {},
+  created() {
+  },
+  data() {
+    return {
+      userApiKeyId: null,
+      form: {
+        remark: null
+      },
+      rules: {},
+      listChangeCallback: null,
+      showDialog: false,
+      isLoading: false
+    };
+  },
+  methods: {
+    resetForm() {
+      this.form = {
+        remark: null
+      }
+    },
+    openDialog(userApiKeyId, callback) {
+      this.resetForm()
+      this.userApiKeyId = userApiKeyId
+      this.listChangeCallback = callback
+      this.showDialog = true
+    },
+    onSubmit() {
+      this.$axios({
+        method: 'post',
+        url: "/api/userApiKey/remark",
+        params: {
+          id: this.userApiKeyId,
+          remark: this.form.remark
+        }
+      }).then((res) => {
+        if (res.data.code === 0) {
+          this.$message({
+            showClose: true,
+            message: '备注修改成功!',
+            type: 'success'
+          });
+          this.showDialog = false;
+          this.listChangeCallback()
+        } else {
+          this.$message({
+            showClose: true,
+            message: '备注修改失败',
+            type: 'error'
+          });
+        }
+      }).catch((error) => {
+        console.error(error)
+      });
+    },
+    close() {
+      this.showDialog = false
+    },
+  },
+};
+</script>

web_src/src/components/dialog/rtcPlayer.vue

@@ -44,6 +44,7 @@ export default {
                 audioEnable: true,
                 videoEnable: true,
                 recvOnly: true,
+                usedatachannel: false,
             })
             webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
                 console.error('ICE 协商出错')

web_src/src/components/service/MediaServer.js

@@ -45,7 +45,8 @@ class MediaServer{
       params: {
         ip: param.ip,
         port: param.httpPort,
-        secret: param.secret
+        secret: param.secret,
+        type: param.type
       }
     }).then(function (res) {
       if (typeof (callback) == "function") callback(res.data)

web_src/src/router/index.js

@@ -21,7 +21,7 @@ import media from '../components/setting/Media.vue'
 import live from '../components/live.vue'
 import deviceTree from '../components/common/DeviceTree.vue'
 import userManager from '../components/UserManager.vue'
-
+import userApiKeyManager from '../components/UserApiKeyManager.vue'
 import wasmPlayer from '../components/common/jessibuca.vue'
 import rtcPlayer from '../components/dialog/rtcPlayer.vue'
 
@@ -130,7 +130,13 @@ export default new VueRouter({
           path: '/userManager',
           name: 'userManager',
           component: userManager,
+        },
+        {
+          path: '/userApiKeyManager/:userId',
+          name: 'userApiKeyManager',
+          component: userApiKeyManager,
         }
+        ,
         ]
     },
     {