视频回放

packages/IntelligentSecurity/components/AiSlwVideo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="slw" :id="videoId">
+  <div class="slw" :id="videoId" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
     <div class="slw-title">
       <h2>{{ name }}</h2>
       <div class="slw-title__close" @click="removeMonitor">
@@ -9,13 +9,13 @@
     </div>
     <iframe
       v-if="isShow"
-      :id="id"
+      :id="iframeId"
       allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
       style="width: 100%; height: 100%;"
-      :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
+      :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${isLiveing ? src : replayUrl}`">
     </iframe>
     <div class="slw-bottom" v-if="isShowBar">
-      <Timeline class="Timeline" @pause="isLiveing = false" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
+      <Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
       <div class="action-bar">
         <div class="left">
           <div class="left-btns">
@@ -47,7 +47,7 @@
               <i>直播中</i>
               <em>{{ form.date }}</em>
             </div>
-            <div v-else class="back-btn" @click="isLiveing = true">回到直播</div>
+            <div v-else class="back-btn" @click="backLiving">回到直播</div>
           </div>
         </div>
         <div class="right">
@@ -86,7 +86,7 @@
   import Timeline from './Timeline'
 
   export default {
-    props: ['src', 'name', 'isShowBar'],
+    props: ['name', 'isShowBar', 'instance', 'id', 'deviceId'],
 
     name: 'slwVideo',
 
@@ -105,13 +105,17 @@
         form: {
           date: ''
         },
+        src: '',
+        isLoading: false,
+        times: [],
         date: '',
         isPause: false,
         width: '',
         volume: 100,
         videoId: `slwvideo-${new Date().getTime()}`,
-        id: `video-${new Date().getTime()}`,
-        isFullscreen: false
+        iframeId: `video-${new Date().getTime()}`,
+        isFullscreen: false,
+        replayUrl: ''
       }
     },
 
@@ -138,12 +142,92 @@
 
         document.addEventListener('fullscreenchange', this.fullScreenChange)
       })
+
+      this.getSlwPlaybackTime()
+
+      if (this.id) {
+        this.getLiveingUrl()
+      }
     },
 
     methods: {
       destroyed () {
         document.removeEventListener('fullscreenchange', this.fullScreenChange)
       },
+
+      backLiving () {
+        this.getLiveingUrl()
+      },
+
+      getLiveingUrl () {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${this.id}`).then(res => {
+          if (res.data) {
+            this.src = res.data
+            this.isLiveing = true
+          }
+
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      onReplay (e) {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+          params: {
+            ids: this.id,
+            startTime: `${this.form.date} ${e}`,
+            endTime: this.form.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:59:59`,
+            nvrCodes: ''
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              this.replayUrl = res.data[0].playbackUrl
+              this.isLiveing = false
+            }
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      getSlwPlaybackTime () {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
+          params: {
+            ids: this.id,
+            startTime: this.form.date + ' 00:00:00',
+            endTime: this.form.date + ' 23:59:59',
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              const times = res.data[0].times
+
+              this.times = times.map(item => {
+                const startTime = (item.startTime - new Date(this.form.date + ' 00:00:00').getTime()) / 1000
+                const endTime = (item.endTime - new Date(this.form.date + ' 00:00:00').getTime()) / 1000
+
+                return {
+                  startTime: Number(startTime.toFixed(0)),
+                  endTime: Number(endTime.toFixed(0))
+                }
+              }).sort((a, b) => {
+                return a.startTime - b.startTime
+              })
+            }
+
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
       fullScreenChange () {
         if (document.fullscreenElement) {
         } else {
@@ -175,13 +259,15 @@
       onConfirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
+            this.isShowDate = false
+            this.getSlwPlaybackTime()
           }
         })
       },
 
       onVolume (e) {
         const v = (e / 100).toFixed(1)
-        const subPage = document.querySelector(`#${this.id}`).contentWindow
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
         subPage.postMessage({
           type: 'volume',
           value: Number(v)
@@ -209,7 +295,7 @@
       },
 
       screenshots () {
-        const subPage = document.querySelector(`#${this.id}`).contentWindow
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
         subPage.postMessage({
           type: 'screenshot'
         }, '*')