✨ feat: 获取flv地址

klp-ui/package.json

@@ -63,6 +63,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-flv-player": "^1.0.3",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

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

@@ -42,3 +42,11 @@ export function delCameraManagement(cameraId) {
     method: 'delete'
   })
 }
+
+// 获取flv视频流地址
+export function getFlvVideoStream(cameraId) {
+  return request({
+    url: '/wms/cameraManagement/stream/' + cameraId,
+    method: 'get'
+  })
+}

klp-ui/src/components/FLVPlayer/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <video ref="videoElement" controls autoplay style="width: 100%; height: 400px;"></video>
+    <!-- 允许跨域视频播放 -->
+    <video ref="videoElement"  controls autoplay style="width: 100%; height: 400px;" crossorigin="anonymous"></video>
   </div>
 </template>
 

klp-ui/src/main.js

@@ -5,6 +5,8 @@ import Cookies from 'js-cookie'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
+import vueFlvPlayer from 'vue-flv-player'
+
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/klp.scss' // klp css
 import App from './App'
@@ -59,6 +61,8 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 
+
+Vue.use(vueFlvPlayer)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

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

@@ -67,7 +67,6 @@
 
     <el-table v-loading="loading" :data="cameraManagementList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="自增主键" align="center" prop="cameraId" v-if="false"/>
       <el-table-column label="摄像头编号" align="center" prop="cameraCode" />
       <el-table-column label="摄像头名称" align="center" prop="cameraName" />
       <el-table-column label="RTSP 推流地址" align="center" prop="rtspUrl" />
@@ -141,20 +140,16 @@
     </el-dialog>
 
     <el-dialog :title="title" :visible.sync="openVideo" width="800px" append-to-body>
-      <flv-player :url="videoUrl" />
+      <vue-flv-player :autoplay="true" :controls="true" :muted="true" ref="myPlayer" :source="videoUrl" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCameraManagement, getCameraManagement, delCameraManagement, addCameraManagement, updateCameraManagement } from "@/api/wms/cameraManagement";
+import { listCameraManagement, getCameraManagement, delCameraManagement, addCameraManagement, updateCameraManagement, getFlvVideoStream } from "@/api/wms/cameraManagement";
-import flvPlayer from '@/components/FLVPlayer/index.vue';
 
 export default {
   name: "CameraManagement", 
-  components: {
-    flvPlayer
-  },
   data() {
     return {
       videoUrl: '',
@@ -258,7 +253,7 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "添加摄像头管理";
+      this.title = "添加摄像头";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -269,7 +264,7 @@ export default {
         this.loading = false;
         this.form = response.data;
         this.open = true;
-        this.title = "修改摄像头管理";
+        this.title = "修改摄像头";
       });
     },
     /** 提交按钮 */
@@ -300,7 +295,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const cameraIds = row.cameraId || this.ids;
-      this.$modal.confirm('是否确认删除摄像头管理编号为"' + cameraIds + '"的数据项？').then(() => {
+      this.$modal.confirm('是否确认删除编号为"' + cameraIds + '"的摄像头？').then(() => {
         this.loading = true;
         return delCameraManagement(cameraIds);
       }).then(() => {
@@ -319,9 +314,10 @@ export default {
       }, `cameraManagement_${new Date().getTime()}.xlsx`)
     },
     handlePlay(row) {
-      this.videoUrl = row.rtspUrl;
+      getFlvVideoStream(row.cameraId).then(response => {
-      this.title = row.cameraName;
+        console.log(response);
-      this.openVideo = true;
+        this.videoUrl = response.data;
+      });
     }
   }
 };