推流列表新增推流地址生成

web/src/views/streamPush/buildPushStreamUrl.vue

@@ -0,0 +1,163 @@
+<template>
+  <div id="addUser" v-loading="isLoging">
+    <el-dialog
+      v-el-drag-dialog
+      title="构建推流地址"
+      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="buildFrom" status-icon label-width="80px">
+          <el-form-item label="应用名" prop="app">
+            <el-input v-model="app" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="流ID" prop="stream">
+            <el-input v-model="stream" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="媒体节点" prop="mediaServerId">
+            <el-select v-model="mediaServer" placeholder="请选择" style="width: 100%">
+              <el-option
+                v-for="item in mediaServerList"
+                :key="item.id"
+                :label="item.id"
+                :value="item"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="地址" prop="url">
+            <div style="width: 100%" v-if="rtc" title="点击拷贝">
+              <el-tag size="medium" @click="copyUrl(rtc)">
+                <i class="el-icon-document-copy"/>
+                {{ rtc }}
+              </el-tag>
+            </div>
+            <div style="width: 100%" v-if="rtsp" title="点击拷贝">
+              <el-tag size="medium" @click="copyUrl(rtsp)">
+                <i class="el-icon-document-copy"/>
+                {{ rtsp }}
+              </el-tag>
+            </div>
+            <div style="width: 100%" v-if="rtmp" title="点击拷贝">
+              <el-tag size="medium" @click="copyUrl(rtmp)">
+                <i class="el-icon-document-copy"/>
+                {{ rtmp }}
+              </el-tag>
+            </div>
+            <div style="width: 100%" v-if="rtcs" title="点击拷贝">
+              <el-tag size="medium" @click="copyUrl(rtcs)">
+                <i class="el-icon-document-copy" />
+                {{ rtcs }}
+              </el-tag>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div style="float: right;">
+              <el-button type="primary" @click="onSubmit">确认</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import elDragDialog from '@/directive/el-drag-dialog'
+import crypto from "crypto";
+
+
+export default {
+  name: 'BuildPushStreamUrl',
+  directives: { elDragDialog },
+  props: {},
+  data() {
+    return {
+      showDialog: false,
+      app: null,
+      stream: null,
+      mediaServer: null,
+      mediaServerList: [],
+      pushKey: null,
+      endCallback: null
+    }
+  },
+  computed: {
+    sign(){
+      if (!this.pushKey) {
+        return ''
+      }
+      return crypto.createHash('md5').update(this.pushKey, 'utf8').digest('hex')
+    },
+    rtsp(){
+      if (!this.mediaServer || !this.stream || !this.app) {
+        return ''
+      }
+      crypto.createHash('md5').update(this.pushKey, 'utf8').digest('hex')
+      return `rtsp://${this.mediaServer.streamIp}:${this.mediaServer.rtspPort}/${this.app}/${this.stream}?sign=${this.sign}`
+    },
+    rtmp(){
+      if (!this.mediaServer || !this.stream || !this.app) {
+        return ''
+      }
+      return `rtmp://${this.mediaServer.streamIp}:${this.mediaServer.rtmpPort}/${this.app}/${this.stream}?sign=${this.sign}`
+    },
+    rtc(){
+      if (!this.mediaServer || !this.stream || !this.app) {
+        return ''
+      }
+      return `http://${this.mediaServer.streamIp}:${this.mediaServer.httpPort}/index/api/webrtc?app=${this.app}&stream=${this.stream}&sign=${this.sign}`
+    },
+    rtcs(){
+      if (!this.mediaServer || !this.stream || !this.app) {
+        return ''
+      }
+      return `https://${this.mediaServer.streamIp}:${this.mediaServer.httpSSlPort}/index/api/webrtc?app=${this.app}&stream=${this.stream}&sign=${this.sign}`
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    openDialog: function(callback) {
+      this.endCallback = callback
+      this.showDialog = true
+    },
+    onSubmit: function() {
+
+    },
+    close: function() {
+      this.showDialog = false
+      this.app = null
+      this.stream = null
+      this.mediaServer = null
+      this.endCallback = null
+      this.mediaServerList = []
+    },
+    initData: function() {
+      this.loading = true
+      this.$store.dispatch('server/getMediaServerList').then(data => {
+        this.mediaServerList = data
+      })
+      this.$store.dispatch('user/getUserInfo').then(data => {
+        this.pushKey = data.pushKey
+      })
+    },
+    copyUrl: function(dropdownItem) {
+      console.log(dropdownItem)
+      this.$copyText(dropdownItem).then((e) => {
+        this.$message.success({
+          showClose: true,
+          message: '成功拷贝到粘贴板'
+        })
+      }, (e) => {
+
+      })
+    },
+  }
+}
+</script>

web/src/views/streamPush/index.vue

@@ -45,24 +45,27 @@
         <el-form-item>
           <el-button icon="el-icon-plus" style="margin-right: 1rem;" type="primary" @click="addStream">添加
           </el-button>
-          <el-button icon="el-icon-upload2" style="margin-right: 1rem;" @click="importChannel">
-            通道导入
-          </el-button>
-          <el-button icon="el-icon-download" style="margin-right: 1rem;">
-            <a
-              style="text-align: center; text-decoration: none"
-              href="/static/file/推流通道导入.zip"
-              download="推流通道导入.zip"
-            >下载模板</a>
-          </el-button>
+          <el-button-group>
+            <el-button icon="el-icon-upload2" @click="importChannel">
+              通道导入
+            </el-button>
+            <el-button icon="el-icon-download">
+              <a
+                style="text-align: center; text-decoration: none"
+                href="/static/file/推流通道导入.zip"
+                download="推流通道导入.zip"
+              >下载模板</a>
+            </el-button>
+          </el-button-group>
           <el-button
             icon="el-icon-delete"
-            style="margin-right: 1rem;"
+            style="margin-left: 1rem;"
             :disabled="multipleSelection.length === 0"
             type="danger"
             @click="batchDel"
           >移除
           </el-button>
+          <el-button icon="el-icon-chicken" @click="buildPushStream">生成推流地址</el-button>
         </el-form-item>
         <el-form-item style="float: right;">
           <el-button icon="el-icon-refresh-right" circle @click="refresh()" />
@@ -135,6 +138,7 @@
     <addStreamTOGB ref="addStreamTOGB" />
     <importChannel ref="importChannel" />
     <stream-push-edit v-if="streamPush" :stream-push="streamPush" :close-edit="closeEdit" style="height: calc(100vh - 90px);" />
+    <buildPushStreamUrl ref="buildPushStreamUrl" />
   </div>
 </template>
 
@@ -143,6 +147,7 @@ import devicePlayer from '../dialog/devicePlayer.vue'
 import addStreamTOGB from '../dialog/pushStreamEdit.vue'
 import importChannel from '../dialog/importChannel.vue'
 import StreamPushEdit from './edit.vue'
+import buildPushStreamUrl from './buildPushStreamUrl.vue'
 
 export default {
   name: 'PushList',
@@ -150,7 +155,8 @@ export default {
     StreamPushEdit,
     devicePlayer,
     addStreamTOGB,
-    importChannel
+    importChannel,
+    buildPushStreamUrl
   },
   data() {
     return {
@@ -287,6 +293,9 @@ export default {
     },
     refresh: function() {
       this.initData()
+    },
+    buildPushStream: function() {
+      this.$refs.buildPushStreamUrl.openDialog()
     }
   }
 }