更新 DiskCam.vue 中的 video player, 添加 flvjs 提供直播功能

src/views/disk/DiskCam.vue

@@ -2,43 +2,27 @@
   <div>
     <el-row style="padding: 5px">
       <el-col :md="16" style="padding: 5px">
-        <el-card v-if="camDetail !== null" class="box-card">
-          <div slot="header" class="clearfix">
+        <el-card class="box-card">
+          <div v-if="camDetail" slot="header" class="clearfix">
             <span>{{ camDetail.camName }}</span>
             <el-button style="float: right; padding: 3px 0" type="text" @click="onShareCam">分享</el-button>
           </div>
           <div class="text item">
-            <span v-if="camDetail.onLive">
-              <video
-                :src="camDetail.pullUrl"
-                controls
-                autoplay
-                class="video"
-                width="100%"
-                height="480px"
-              />
-            </span>
-            <span v-else>
-              <video
-                v-if="camRecordDetail !== null"
-                :src="camRecordDetail.url"
-                controls
-                autoplay
-                class="video"
-                width="100%"
-                height="480px"
-              />
-              <span v-else>
-                无实时监控(选择日期查看历史监控录像)
-              </span>
-            </span>
+            <video
+              id="videoElement"
+              controls
+              autoplay
+              class="video"
+              width="100%"
+              height="480px"
+            />
           </div>
         </el-card>
-        <el-card v-else class="box-card">
+        <!--        <el-card v-else class="box-card">
           <div slot="header" class="clearfix">
             <span>选择摄像头查看监控</span>
           </div>
-        </el-card>
+        </el-card>-->
       </el-col>
       <el-col :md="8" style="padding: 5px">
         <el-card class="box-card">
@@ -143,6 +127,8 @@
 </template>
 
 <script>
+import flvjs from 'flv.js'
+
 import { createShare, getCamDetail, getCamKeyValue, getRecordByMonth, getRecordUrl, submitActivity } from '@/api/disk'
 import { getUserContact } from '@/api/user'
 
@@ -170,7 +156,8 @@ export default {
         albumType: 1,
         albumId: null,
         shareToList: []
-      }
+      },
+      flvPlayer: null
     }
   },
   watch: {
@@ -214,6 +201,11 @@ export default {
       getCamDetail(this.query).then(resp => {
         if (resp.code === 0) {
           this.camDetail = resp.data
+          if (this.camDetail.onLive) {
+            this.initVideoPlayer(this.camDetail.liveUrl, true)
+          } else {
+            this.initVideoPlayer(this.camDetail.url, false)
+          }
         }
       })
     },
@@ -268,11 +260,37 @@ export default {
       getRecordUrl(recordId).then(resp => {
         if (resp.code === 0) {
           this.camRecordDetail = resp.data
+          this.initVideoPlayer(this.camRecordDetail.url, false)
         } else {
           this.$message.error(resp.msg)
         }
       })
     },
+    initVideoPlayer(videoUrl, live) {
+      var videoElement = document.getElementById('videoElement')
+      if (live) {
+        if (!flvjs.isSupported()) {
+          this.$message.error('not support flv')
+          return
+        }
+
+        this.flvPlayer = flvjs.createPlayer({
+          type: 'flv',
+          isLive: true,
+          url: videoUrl,
+          duration: 0,
+          filesize: 0,
+          enableStashBuffer: false,
+          hasAudio: true,
+          hasVideo: true
+        })
+        this.flvPlayer.attachMediaElement(videoElement)
+        this.flvPlayer.load()
+        this.flvPlayer.play()
+      } else {
+        videoElement.src = videoUrl
+      }
+    },
     onSelectDate() {
       if (this.selectedOption === '') {
         this.$message.info('请先选择摄像头')