加入视频预览

front/src/api/file.js

@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-20 17:16:35
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-05-26 22:40:46
+ * @LastEditTime: 2022-06-17 17:42:37
  * @Description: 告诉大家这是什么
  */
 import request from '@/utils/request'
@@ -46,3 +46,9 @@ export function correct(params) {
 export function paddleocr(params) {
   return axios.post('http://15.72.183.90:7008/paddleocr', params, config2)
 }
+export function getHls(id) {
+  return axios.get(
+    'http://10.110.205.1:18088/server/device/hisdeviceapplylist/url/' + id,
+    config2
+  )
+}

front/src/views/home/components/searchResultList.vue

@@ -147,7 +147,7 @@
                   免费试用
                 </a-button>
               </div>
-              <a-button v-if="cardType == '基础设施'" type="primary" @click="toView('details', item)">
+              <a-button v-if="cardType == '基础设施'" type="primary" @click="openVideo(item)">
                 在线预览
               </a-button>
               <a-button v-else type="primary" @click="toView('details', item)">
@@ -163,13 +163,27 @@
         </div>
       </div>
     </div>
+    <a-modal
+      v-model:visible="visible"
+      title="视频预览"
+      :width="750"
+      destroyOnClose
+    >
+      <template #footer></template>
+      <div style="width: 100%; display: flex; justify-content: center">
+        <div style="width: 100%; height: 100%">
+          <vue3VideoPlay v-bind="options" />
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script>
-  import { ref } from 'vue'
+  import { ref, reactive } from 'vue'
   import { message } from 'ant-design-vue'
   import { useRouter } from 'vue-router'
+  import { getHls } from '@/api/file.js'
   import { getUser, sgcInsert } from '@/api/home'
   import { scInsert, scDel } from '@/api/personalCenter'
   import mybus from '@/myplugins/mybus'
@@ -277,6 +291,34 @@
     components: {},
     setup(props) {
       let shoppingKey = ref(1)
+      let visible = ref(false)
+      const options = reactive({
+        width: '700px', //播放器宽度
+        height: '400px', //播放器高度
+        color: '#409eff', //主题色
+        title: '', //视频名称
+        src: '', //视频源
+        type: 'm3u8', // 视频源类型
+        muted: false, //静音
+        webFullScreen: false,
+        speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+        autoPlay: true, //自动播放
+        loop: false, //循环播放
+        mirror: false, //镜像画面
+        ligthOff: false, //关灯模式
+        volume: 0.3, //默认音量大小
+        control: true, //是否显示控制
+        controlBtns: [
+          'audioTrack',
+          'quality',
+          'speedRate',
+          'volume',
+          'setting',
+          'pip',
+          'pageFullScreen',
+          'fullScreen',
+        ], //显示所有按钮,
+      })
       // 购物车id列表
       const selList = ref([
         { name: '发布时间', value: 'tdr.create_date' },
@@ -335,6 +377,15 @@
           })
         }
       }
+      // 打开视频预览
+      const openVideo = (item) => {
+        getHls(item.cameraIndexCode).then((res) => {
+          console.log('获取视频地址===============>', res)
+          // videoUrl.value = res.data.data
+          options.src = res.data.data
+          visible.value = true
+        })
+      }
       // 加入申购车
       const addShoppingCart = (item, index) => {
         console.log('item===============>', item)