关闭弹窗后关闭流

klp-admin/src/main/resources/application.yml

@@ -109,7 +109,7 @@ sa-token:
   # token有效期 设为一天 (必定过期) 单位: 秒
   timeout: 86400
   # token临时有效期 (指定时间无操作就过期) 单位: 秒
-  activity-timeout: 1800
+  activity-timeout: 86400
   # 是否允许同一账号并发登录 (为true时允许一起登录, 为false时新登录挤掉旧登录)
   is-concurrent: true
   # 在多人登录同一账号时，是否共用一个token (为true时所有登录共用一个token, 为false时每次登录新建一个token)

klp-ui/src/api/wms/cameraManagement.js

@@ -43,10 +43,19 @@ export function delCameraManagement(cameraId) {
   })
 }
 
-// 获取flv视频流地址
+// 创建视频流 并 获取flv直播流地址
 export function getFlvVideoStream(cameraId) {
   return request({
     url: '/wms/cameraManagement/stream/' + cameraId,
     method: 'get'
   })
 }
+
+// 关闭直播流
+export function closeVideoStream(cameraId) {
+  return request({
+    url: '/wms/cameraManagement/streamClose/' + cameraId,
+    method: 'get'
+  })
+}
+

klp-ui/src/views/index.vue

@@ -129,13 +129,13 @@ export default {
           bgColor: 'bg-indigo-500',
           link: '/system/menu'
         },
-        {
-          title: 'WebSocket测试',
-          description: '实时通信功能测试',
-          icon: 'fas fa-comments',
-          bgColor: 'bg-teal-500',
-          link: '/websocket-test.html'
-        }
+        // {
+        //   title: 'WebSocket测试',
+        //   description: '实时通信功能测试',
+        //   icon: 'fas fa-comments',
+        //   bgColor: 'bg-teal-500',
+        //   link: '/websocket-test.html'
+        // }
       ],
       resourceCharts: [
         { name: 'CPU使用率', value: 65 },

klp-ui/src/views/wms/video/index.vue

@@ -139,14 +139,21 @@
       </div>
     </el-dialog>
 
-    <el-dialog :title="title" :visible.sync="openVideo" width="800px" append-to-body>
+    <el-dialog 
+      :title="title" 
+      :visible.sync="openVideo" 
+      width="800px" 
+      v-loading="loading" 
+      element-loading-text="正在加载视频流..." 
+      @close="handleCloseVideo"
+      append-to-body>
       <vue-flv-player :autoplay="true" :controls="true" :muted="true" ref="myPlayer" :source="videoUrl" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCameraManagement, getCameraManagement, delCameraManagement, addCameraManagement, updateCameraManagement, getFlvVideoStream } from "@/api/wms/cameraManagement";
+import { listCameraManagement, getCameraManagement, delCameraManagement, addCameraManagement, updateCameraManagement, getFlvVideoStream, closeVideoStream } from "@/api/wms/cameraManagement";
 
 export default {
   name: "CameraManagement", 
@@ -314,9 +321,22 @@ export default {
       }, `cameraManagement_${new Date().getTime()}.xlsx`)
     },
     handlePlay(row) {
+      this.loading = true;
+      this.openVideo = true;
+      this.form = row;
       getFlvVideoStream(row.cameraId).then(response => {
-        console.log(response);
-        this.videoUrl = response.data;
+        this.videoUrl = response.data.httpFmp4;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+        this.$modal.msgError("获取视频流失败");
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleCloseVideo() {
+      closeVideoStream(this.form.cameraId).then(response => {
+        this.$modal.msgSuccess("关闭成功");
       });
     }
   }