解决tplink回放黑屏问题

src/views/iot/tplink/camera/components/CameraPlaybackForm.vue

@@ -6,13 +6,8 @@
       </a-col>
       <a-col :span="24" style="padding: 5px;">
         <span style="margin-left: 15px;">回放倍速
-          <a-select
+          <a-select ref="select" v-model:value="formData.scale" style="width: 120px" @focus="focus"
-            ref="select"
+            @change="changeScale">
-            v-model:value="formData.scale"
-            style="width: 120px"
-            @focus="focus"
-            @change="changeScale"
-          >
             <a-select-option value="0.0625">0.0625</a-select-option>
             <a-select-option value="0.125">0.125</a-select-option>
             <a-select-option value="0.25">0.25</a-select-option>
@@ -30,29 +25,29 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted  } from 'vue';
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
+import { defHttp } from '/@/utils/http/axios';
-  import { useMessage } from '/@/hooks/web/useMessage';
+import { useMessage } from '/@/hooks/web/useMessage';
-  import { getValueType } from '/@/utils';
+import { getValueType } from '/@/utils';
-  import { Form } from 'ant-design-vue';
+import { Form } from 'ant-design-vue';
-  import {
+import {
   getPlaybackUrlList,
   deletePlaybackChn
-  } from "../camera.api";
+} from "../camera.api";
 
-  const TumsPlayer = window['tums-player'].default;
+const TumsPlayer = window['tums-player'].default;
-  const props = defineProps({
+const props = defineProps({
   formDisabled: { type: Boolean, default: false },
-    formData: { type: Object, default: () => ({})},
+  formData: { type: Object, default: () => ({}) },
   formBpm: { type: Boolean, default: true }
-  });
+});
 
-  const formRef = ref();
+const formRef = ref();
-  const player = ref();
+const player = ref();
-  const initContainerPlayback = ref(true);
+const initContainerPlayback = ref(true);
-  const useForm = Form.useForm;
+const useForm = Form.useForm;
-  const emit = defineEmits(['register', 'ok']);
+const emit = defineEmits(['register', 'ok']);
-  const formData = reactive<Record<string, any>>({
+const formData = reactive<Record<string, any>>({
   //预览通道参数
   videoDevId: '',//设备索引
   storageDevId: '',//存储设备ID
@@ -61,39 +56,39 @@
   videoType: '',//回放录像类型
   scale: 1,//回放速率
   sessionId: ''//回放通道对应的sessionId
-  });
+});
-  const { createMessage } = useMessage();
+const { createMessage } = useMessage();
-  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
-  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
-  const confirmLoading = ref<boolean>(false);
+const confirmLoading = ref<boolean>(false);
 
-  //表单验证
+//表单验证
-  const validatorRules = reactive({
+const validatorRules = reactive({
-  });
+});
-  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
 
-  // 表单禁用
+// 表单禁用
-  const disabled = computed(()=>{
+const disabled = computed(() => {
-    if(props.formBpm === true){
+  if (props.formBpm === true) {
-      if(props.formData.disabled === false){
+    if (props.formData.disabled === false) {
       return false;
-      }else{
+    } else {
       return true;
     }
   }
   return props.formDisabled;
-  });
+});
 
-  /**
+/**
  * 详情
  */
-  async function edit(record) {
+async function edit(record) {
   await nextTick(() => {
-      confirmLoading.value=true;
+    confirmLoading.value = true;
     resetFields();
     const tmpData = {};
     Object.keys(formData).forEach((key) => {
-        if(record.hasOwnProperty(key)){
+      if (record.hasOwnProperty(key)) {
         tmpData[key] = record[key]
       }
     })
@@ -102,25 +97,26 @@
   });
   //获取录像回放地址
   await getPlaybackUrlList({
-      "videoDevId":formData.videoDevId,
+    "videoDevId": formData.videoDevId,
-      "storageDevId":formData.storageDevId,
+    "storageDevId": formData.storageDevId,
-      "videoType":formData.videoType,
+    "videoType": formData.videoType,
-      "scale":formData.scale,
+    "scale": formData.scale,
-      "startTime":formData.startTime,
+    "startTime": formData.startTime,
-      "endTime":formData.endTime,
+    "endTime": formData.endTime,
-    }).then(res=>{
+  }).then(res => {
-      confirmLoading.value=false;
+    confirmLoading.value = false;
     const error = res.error;
-      if(error==null||error==''){
+    if (error == null || error == '') {
       formData.sessionId = '';
       const list = res.data;
+      console.log("🌊 ~ edit ~ list:", list)
       list.forEach(item => {
-          formData.sessionId += item.sessionId+","
+        formData.sessionId += item.sessionId + ","
-          let startTime = item.startTime*1000;
+        let startTime = item.startTime * 1000;
-          let endTime = item.endTime*1000;
+        let endTime = item.endTime * 1000;
         player.value = new TumsPlayer('video-container-playback', {
           "autoplay": true,
-            "resolution": "HD",
+          "resolution": "VB",
           "streamType": "sdvod", // 回放类型
           "url": item.url, // 该url为一次性 需要通过接口实时获取
           "socket": item.wssUrl,
@@ -133,56 +129,57 @@
           "storageDevId": item.storageDevId,
           "startTime": startTime, // 回放开始时间 13位
           "endTime": endTime, // 回放结束时间 13位
-            "eventType": [1, 2], // 事件类型
+          "eventType": [1, 2], // 事件类
           "scale": item.scale // 回放倍速
         });
       });
     }
   });
-  }
+}
 
-  /**
+/**
  * 切换回放倍
  */
-  function changeScale(){
+function changeScale() {
   //需要释放通道，重启创建通道
-    createMessage.info('切换回放倍速至'+formData.scale+'倍');
+  createMessage.info('切换回放倍速至' + formData.scale + '倍');
-    let scale = parseInt(formData.scale) ;
+  let scale = parseInt(formData.scale);
-    player.value.setPlaybackConfig({"scale":scale});
+  player.value.setPlaybackConfig({ "scale": scale });
-  }
+}
 
-  /**
+/**
  * 销毁
  */
-  async function destroy(){
+async function destroy() {
-    if (player.value){
+  if (player.value) {
     deletePlaybackChn({
-        "deviceIndex":formData.videoDevId,
+      "deviceIndex": formData.videoDevId,
-        "sessionId":formData.sessionId
+      "sessionId": formData.sessionId
-      }).then(res=>{
+    }).then(res => {
     });
     // player.value.destroy().then(() => { }); // 回放销毁时自动调用接口，跨域导致失败
     initContainerPlayback.value = false
-      setTimeout(()=>{
+    setTimeout(() => {
       initContainerPlayback.value = true
-      },1000)
+    }, 1000)
-    }
   }
+}
 
-  defineExpose({
+defineExpose({
   edit,
   destroy
-  });
+});
 </script>
 
 <style lang="less" scoped>
-  .antd-modal-form {
+.antd-modal-form {
   padding: 14px;
-  }
+}
-  #video-container-playback {
+
+#video-container-playback {
   padding: 0px 25px;
   width: 600px;
   height: 550px;
   background: #1a1a1a;
-  }
+}
 </style>

src/views/iot/tplink/camera/components/CameraRecordList.vue

@@ -98,14 +98,14 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
   function handlePlayback(record: Recordable) {
     record.scale = props.data.scale;
     record.multitrans = props.data.multitrans;
-    console.log(record.multitrans);
+    console.log(123,record.multitrans);
-    if(record.multitrans=="1"){
+    // if(record.multitrans=="1"){
-      multitransModal.value.disableSubmit = true;
+    //   multitransModal.value.disableSubmit = true;
-      multitransModal.value.edit(record);
+    //   multitransModal.value.edit(record);
-    }else{
+    // }else{
       playbackModal.value.disableSubmit = true;
       playbackModal.value.edit(record);
-    }
+    // }
   }
 
   /**