fix: rtc

src/components/DND/index.vue

@@ -90,7 +90,6 @@ function move(event: TouchEvent & MouseEvent) {
   dndRef.value.style.top = `${topRes}px`;
   dndRef.value.style.left = `${leftRes}px`;
   emits('move', { top: topRes, left: leftRes, el: dndRef.value.children[0] });
-  // console.log(leftRes, topRes, offset, 999);
 }
 
 function handleStart(event: TouchEvent & MouseEvent) {

src/components/QrPay/index.vue

@@ -24,7 +24,9 @@
       <div class="bottom">
         <div class="sao">打开支付宝扫一扫</div>
         <div class="expr">
-          有效期5分钟（{{ formatDownTime(downTimeEnd, downTimeStart) }}）
+          有效期5分钟（{{
+            formatDownTime({ endTime: downTimeEnd, startTime: downTimeStart })
+          }}）
         </div>
       </div>
     </div>

src/components/Slider/index.vue

@@ -21,6 +21,7 @@
           :key="'slide-' + indey"
           class="slide"
           :data-txt="slide.txt"
+          @click="openToTarget(slide.link)"
         >
           <div class="avatar">
             <div
@@ -40,6 +41,7 @@
 </template>
 
 <script lang="ts" setup>
+import { openToTarget } from 'billd-utils';
 import { nextTick, onMounted, ref } from 'vue';
 
 const props = defineProps({
@@ -154,6 +156,7 @@ onMounted(() => {
         box-sizing: border-box;
         padding-right: 30px;
         height: 40px;
+        cursor: pointer;
         .avatar {
           display: flex;
           overflow: hidden;

src/hooks/use-play.ts

@@ -14,7 +14,7 @@ export function useFlvPlay() {
   const flvPlayer = ref<mpegts.Player>();
   const flvVideoEl = ref<HTMLVideoElement>();
   const appStore = useAppStore();
-  const retryMax = ref(30);
+  const retryMax = ref(120);
   const retry = ref(0);
   const retrying = ref(false);
 
@@ -50,7 +50,7 @@ export function useFlvPlay() {
 
   function startFlvPlay(data: { flvurl: string }) {
     console.log('startFlvPlay', data.flvurl);
-    return new Promise<{ width: number; height: number }>((resolve) => {
+    return new Promise((resolve) => {
       function main() {
         destroyFlv();
         if (mpegts.getFeatureList().mseLivePlayback && mpegts.isSupported()) {
@@ -59,13 +59,25 @@ export function useFlvPlay() {
             isLive: true,
             url: data.flvurl,
           });
+          const videoEl = createVideo({});
+          videoEl.addEventListener('play', () => {
+            console.log('flv-play');
+          });
+          videoEl.addEventListener('playing', () => {
+            console.log('flv-playing');
+          });
+          videoEl.addEventListener('loadedmetadata', () => {
+            console.log('flv-loadedmetadata');
+          });
+          flvPlayer.value.attachMediaElement(videoEl);
+          flvPlayer.value.load();
           flvPlayer.value.on(mpegts.Events.ERROR, () => {
-            console.log('ERRORERROR');
+            console.error('mpegts消息：mpegts.Events.ERROR');
             if (retry.value < retryMax.value && !retrying.value) {
               retrying.value = true;
               destroyFlv();
               setTimeout(() => {
-                console.log(
+                console.error(
                   '播放flv错误，重新加载，剩余次数：',
                   retryMax.value - retry.value
                 );
@@ -75,23 +87,13 @@ export function useFlvPlay() {
               }, 1000);
             }
           });
-          const videoEl = createVideo({});
-          flvVideoEl.value = videoEl;
-          flvVideoEl.value.addEventListener('play', () => {
-            console.log('flv-play');
-          });
-          flvVideoEl.value.addEventListener('playing', () => {
-            console.log('flv-playing');
+          flvPlayer.value.on(mpegts.Events.MEDIA_INFO, () => {
+            console.log('mpegts消息：mpegts.Events.MEDIA_INFO');
             retry.value = 0;
             setMuted(appStore.muted);
-            document.body.appendChild(videoEl);
-            resolve({
-              width: flvVideoEl.value?.videoWidth || 0,
-              height: flvVideoEl.value?.videoHeight || 0,
-            });
+            flvVideoEl.value = videoEl;
+            resolve('');
           });
-          flvPlayer.value.attachMediaElement(flvVideoEl.value);
-          flvPlayer.value.load();
           try {
             console.log(`开始播放flv，muted:${appStore.muted}`);
             flvPlayer.value.play();
@@ -114,6 +116,9 @@ export function useHlsPlay() {
   const hlsPlayer = ref<Player>();
   const hlsVideoEl = ref<HTMLVideoElement>();
   const appStore = useAppStore();
+  const retryMax = ref(120);
+  const retry = ref(0);
+  const retrying = ref(false);
 
   onMounted(() => {});
 
@@ -147,12 +152,11 @@ export function useHlsPlay() {
   );
 
   function startHlsPlay(data: { hlsurl: string }) {
-    return new Promise<{ width: number; height: number }>((resolve) => {
+    return new Promise((resolve) => {
       function main() {
         console.log('startHlsPlay', data.hlsurl);
         destroyHls();
         const videoEl = createVideo({ muted: appStore.muted, autoplay: true });
-        hlsVideoEl.value = videoEl;
         hlsPlayer.value = videoJs(
           videoEl,
           {
@@ -173,10 +177,42 @@ export function useHlsPlay() {
             }
           }
         );
+        hlsPlayer.value?.on('error', () => {
+          console.log('hls-error');
+          if (retry.value < retryMax.value && !retrying.value) {
+            retrying.value = true;
+            setTimeout(() => {
+              console.error(
+                '播放hls错误，重新加载，剩余次数：',
+                retryMax.value - retry.value
+              );
+              retry.value += 1;
+              retrying.value = false;
+              main();
+            }, 1000);
+          }
+        });
         hlsPlayer.value?.on('play', () => {
           console.log('hls-play');
           // console.log(hlsPlayer.value?.videoHeight()); // 获取到的是0！
         });
+        hlsPlayer.value?.on('playing', () => {
+          console.log('hls-playing');
+          setMuted(appStore.muted);
+          retry.value = 0;
+          // console.log(hlsPlayer.value?.videoHeight()); // 获取到的是正确的！
+          const childNodes = hlsPlayer.value?.el().childNodes;
+          if (childNodes) {
+            childNodes.forEach((item) => {
+              if (item.nodeName.toLowerCase() === 'video') {
+                // @ts-ignore
+                hlsVideoEl.value = item;
+              }
+            });
+          }
+          hlsVideoEl.value = videoEl;
+          resolve('');
+        });
         hlsPlayer.value?.on('loadedmetadata', () => {
           console.log('hls-loadedmetadata');
         });

src/hooks/use-pull.ts

@@ -1,4 +1,3 @@
-import mpegts from 'mpegts.js';
 import { onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -42,8 +41,8 @@ export function usePull({ liveType }: { liveType: LiveTypeEnum }) {
     damuList,
   } = useSrsWs();
   isPull.value = true;
-  const { flvPlayer, flvVideoEl, startFlvPlay, destroyFlv } = useFlvPlay();
-  const { hlsPlayer, hlsVideoEl, startHlsPlay, destroyHls } = useHlsPlay();
+  const { flvVideoEl, startFlvPlay, destroyFlv } = useFlvPlay();
+  const { hlsVideoEl, startHlsPlay, destroyHls } = useHlsPlay();
   const stopDrawingArr = ref<any[]>([]);
 
   onUnmounted(() => {
@@ -55,54 +54,48 @@ export function usePull({ liveType }: { liveType: LiveTypeEnum }) {
     destroyHls();
     stopDrawingArr.value.forEach((cb) => cb());
     stopDrawingArr.value = [];
+    remoteVideo.value.forEach((el) => el.remove());
+    remoteVideo.value = [];
   }
 
   watch(hlsVideoEl, () => {
-    handleHlsPlay();
+    stopDrawingArr.value = [];
+    stopDrawingArr.value.forEach((cb) => cb());
+    const { canvas, stopDrawing } = videoToCanvas({
+      videoEl: hlsVideoEl.value!,
+    });
+    stopDrawingArr.value.push(stopDrawing);
+    remoteVideo.value.push(canvas);
+    videoLoading.value = false;
   });
 
-  async function handleHlsPlay(url?: string) {
-    console.log('handleHlsPlay');
-
+  function handleHlsPlay(url?: string) {
+    console.log('handleHlsPlay', url);
     handleStopDrawing();
     videoLoading.value = true;
-    try {
-      const { width, height } = await startHlsPlay({
-        hlsurl: url || hlsurl.value,
-      });
-      const { canvas, stopDrawing } = videoToCanvas({
-        videoEl: hlsVideoEl.value!,
-        size: { width, height },
-      });
-      stopDrawingArr.value.push(stopDrawing);
-      remoteVideo.value.push(canvas);
-      videoLoading.value = false;
-    } catch (error) {
-      console.log('2532616', error);
-    }
+    startHlsPlay({
+      hlsurl: url || hlsurl.value,
+    });
   }
 
-  async function handleFlvPlay() {
-    console.log('handleFlvPlay');
-    handleStopDrawing();
-    const { width, height } = await startFlvPlay({
-      flvurl: flvurl.value,
-    });
-    const size = { width, height };
-    const initCanvas = videoToCanvas({
+  watch(flvVideoEl, () => {
+    stopDrawingArr.value = [];
+    stopDrawingArr.value.forEach((cb) => cb());
+    const { canvas, stopDrawing } = videoToCanvas({
       videoEl: flvVideoEl.value!,
-      size,
     });
-    stopDrawingArr.value.push(initCanvas.stopDrawing);
-    remoteVideo.value.push(initCanvas.canvas);
+    stopDrawingArr.value.push(stopDrawing);
+    remoteVideo.value.push(canvas);
+    videoLoading.value = false;
+  });
 
-    flvPlayer.value!.on(mpegts.Events.MEDIA_INFO, () => {
-      console.log('数据变了', flvVideoEl.value?.videoHeight);
-      document.body.appendChild(flvVideoEl.value);
-      size.width = flvVideoEl.value!.videoWidth!;
-      size.height = flvVideoEl.value!.videoHeight!;
+  function handleFlvPlay() {
+    console.log('handleFlvPlay');
+    handleStopDrawing();
+    videoLoading.value = true;
+    startFlvPlay({
+      flvurl: flvurl.value,
     });
-    videoLoading.value = false;
   }
 
   async function handlePlay() {
@@ -137,6 +130,7 @@ export function usePull({ liveType }: { liveType: LiveTypeEnum }) {
         }
       } else {
         closeRtc();
+        handleStopDrawing();
       }
     }
   );
@@ -154,7 +148,7 @@ export function usePull({ liveType }: { liveType: LiveTypeEnum }) {
   watch(
     () => networkStore.rtcMap,
     (newVal) => {
-      if (liveType === LiveTypeEnum.webrtcPull) {
+      if (roomLiveType.value === LiveTypeEnum.webrtcPull) {
         newVal.forEach((item) => {
           videoLoading.value = false;
           const { canvas } = videoToCanvas({

src/hooks/use-srs-ws.ts

@@ -83,18 +83,18 @@ export const useSrsWs = () => {
     }, 1000 * 5);
   }
 
-  async function handleSendOffer({
-    receiver,
-    type,
-  }: {
-    receiver: string;
-    type: LiveRoomTypeEnum;
-  }) {
+  async function handleSendOffer({ receiver }: { receiver: string }) {
     console.log('开始handleSendOffer');
     const ws = networkStore.wsMap.get(roomId.value);
     if (!ws) return;
     const rtc = networkStore.getRtcMap(`${roomId.value}___${receiver}`);
     if (!rtc) return;
+    canvasVideoStream.value?.getTracks().forEach((track) => {
+      if (rtc && canvasVideoStream.value) {
+        console.log('插入track', track);
+        rtc.peerConnection?.addTrack(track, canvasVideoStream.value);
+      }
+    });
     const sdp = await rtc.createOffer();
     await rtc.setLocalDescription(sdp!);
     const myLiveRoom = userStore.userInfo!.live_rooms![0];
@@ -147,15 +147,13 @@ export const useSrsWs = () => {
         type,
       },
     });
-    if (type === LiveRoomTypeEnum.user_wertc) {
-      console.log(liveUserList.value.length, 'kkk1123');
-      return;
+    if (type !== LiveRoomTypeEnum.user_wertc) {
+      startNewWebRtc({
+        videoEl: createVideo({}),
+        receiver,
+        type,
+      });
     }
-    startNewWebRtc({
-      videoEl: createVideo({}),
-      receiver,
-      type,
-    });
   }
 
   function sendJoin() {
@@ -183,7 +181,7 @@ export const useSrsWs = () => {
     videoEl: HTMLVideoElement;
     type: LiveRoomTypeEnum;
   }) {
-    console.warn('33开始new WebRTCClass', `${roomId.value}___${receiver!}`);
+    console.warn('开始new WebRTCClass', `${roomId.value}___${receiver!}`);
     new WebRTCClass({
       maxBitrate: currentMaxBitrate.value,
       maxFramerate: currentMaxFramerate.value,
@@ -196,7 +194,6 @@ export const useSrsWs = () => {
 
     handleSendOffer({
       receiver,
-      type,
     });
   }
 
@@ -224,10 +221,7 @@ export const useSrsWs = () => {
       console.log('收到offer', data);
       if (data.receiver === mySocketId.value) {
         console.warn('是发给我的offer');
-        console.warn(
-          '11开始new WebRTCClass',
-          `${roomId.value}___${data.sender}`
-        );
+        console.warn('开始new WebRTCClass', `${roomId.value}___${data.sender}`);
         const videoEl = createVideo({ appendChild: true });
         const rtc = new WebRTCClass({
           maxBitrate: currentMaxBitrate.value,
@@ -263,7 +257,6 @@ export const useSrsWs = () => {
       if (data.receiver === mySocketId.value) {
         console.warn('是发给我的answer', `${roomId.value}___${data.receiver}`);
         const rtc = networkStore.getRtcMap(`${roomId.value}___${data.sender}`)!;
-        console.log(rtc, 'll');
         rtc.setRemoteDescription(data.sdp);
       } else {
         console.error('不是发给我的answer');
@@ -357,20 +350,14 @@ export const useSrsWs = () => {
       });
       if (!isPull.value) {
         if (!roomLiving.value) return;
-        console.log('>>>>>');
         liveUserList.value.forEach(async (item) => {
-          console.log(item);
           const receiver = item.id;
           if (
             receiver === mySocketId.value ||
             networkStore.getRtcMap(`${roomId.value}___${receiver!}`)
           )
             return;
-          console.log(receiver, 'ppdpsd');
-          console.warn(
-            '22开始new WebRTCClass',
-            `${roomId.value}___${receiver!}`
-          );
+          console.warn('开始new WebRTCClass', `${roomId.value}___${receiver!}`);
           const rtc = new WebRTCClass({
             maxBitrate: currentMaxBitrate.value,
             maxFramerate: currentMaxFramerate.value,

src/store/app/index.ts

@@ -5,6 +5,7 @@ import { mobileRouterName } from '@/router';
 
 export type AppRootState = {
   muted: boolean;
+  videoRatio: number;
   navList: { routeName: string; name: string }[];
   allTrack: {
     /** 1开启；2关闭 */
@@ -34,6 +35,7 @@ export const useAppStore = defineStore('app', {
   state: (): AppRootState => {
     return {
       muted: true,
+      videoRatio: 16 / 9,
       navList: [
         { routeName: mobileRouterName.h5, name: '频道' },
         { routeName: mobileRouterName.h5Rank, name: '排行' },

src/utils/index.ts

@@ -7,8 +7,12 @@ import { getRangeRandom } from 'billd-utils';
  * @param endTime
  * @param startTime
  */
-export function formatDownTime(endTime: number, startTime: number) {
-  const times = (endTime - startTime) / 1000;
+export function formatDownTime(data: {
+  endTime: number;
+  startTime: number;
+  showMs?: boolean;
+}) {
+  const times = (data.endTime - data.startTime) / 1000;
   // js获取剩余天数
   const d = parseInt(String(times / 60 / 60 / 24));
   // js获取剩余小时
@@ -17,7 +21,7 @@ export function formatDownTime(endTime: number, startTime: number) {
   let m = parseInt(String((times / 60) % 60));
   // js获取剩余秒
   let s = parseInt(String(times % 60));
-  let ms = new Date(endTime).getMilliseconds();
+  let ms = new Date(data.endTime).getMilliseconds();
 
   if (h < 10) {
     // @ts-ignore
@@ -40,12 +44,13 @@ export function formatDownTime(endTime: number, startTime: number) {
       ms = `0${ms}`;
     }
   }
+  const msRes = data.showMs ? `${ms}毫秒` : '';
   if (d > 0) {
-    return `${d}天${h}时${m}分${s}秒${ms}毫秒`;
+    return `${d}天${h}时${m}分${s}秒${msRes}`;
   } else if (h > 0) {
-    return `${h}时${m}分${s}秒${ms}毫秒`;
+    return `${h}时${m}分${s}秒${msRes}`;
   } else {
-    return `${m}分${s}秒${ms}毫秒`;
+    return `${m}分${s}秒${msRes}`;
   }
 }
 
@@ -211,55 +216,32 @@ export const createVideo = ({
   return videoEl;
 };
 
-export function videoToCanvas(data: {
-  videoEl: HTMLVideoElement;
-  size?: { width: number; height: number };
-}) {
+export function videoToCanvas(data: { videoEl: HTMLVideoElement }) {
   const { videoEl } = data;
   if (!videoEl) {
     throw new Error('videoEl不能为空！');
   }
   const canvas = document.createElement('canvas');
-
   const ctx = canvas.getContext('2d')!;
-  let timer = -1;
-  function drawCanvas() {
-    if (data.size) {
-      const { width, height } = data.size;
-      canvas.width = width;
-      canvas.height = height;
-      ctx.drawImage(videoEl, 0, 0, width, height);
-      // console.log('有size', width, height, performance.now());
-    } else {
-      // WARN safari没有captureStream方法
-      const videoTrack = videoEl
-        // @ts-ignore
-        .captureStream()
-        .getVideoTracks()[0];
-      if (videoTrack) {
-        const { width, height } = videoTrack.getSettings();
-        canvas.width = width!;
-        canvas.height = height!;
-        ctx.drawImage(videoEl, 0, 0, width!, height!);
-        // console.log('没有size', width, height, performance.now());
-      }
-    }
 
+  let timer;
+  let w = videoEl.videoWidth;
+  let h = videoEl.videoHeight;
+  videoEl.addEventListener('resize', () => {
+    w = videoEl.videoWidth;
+    h = videoEl.videoHeight;
+  });
+  function drawCanvas() {
+    canvas.width = w;
+    canvas.height = h;
+    ctx.drawImage(videoEl, 0, 0, w, h);
     timer = requestAnimationFrame(drawCanvas);
   }
 
   function stopDrawing() {
-    // if (timer !== -1) {
-    //   workerTimers.clearInterval(timer);
-    // }
     cancelAnimationFrame(timer);
   }
 
-  // const delay = 1000 / 60; // 16.666666666666668
-  // timer = workerTimers.setInterval(() => {
-  //   drawCanvas();
-  // }, delay);
-
   drawCanvas();
 
   return { drawCanvas, stopDrawing, canvas, videoEl };

src/views/group/index.vue

@@ -2,8 +2,8 @@
   <div class="group-wrap">
     <h1 class="title">📢 加群注意</h1>
     <h3 class="title">
-      因为<b class="red"> 混子 </b
-      >太多，为保证群质量，因此设置了一个小小的加群门槛
+      因为<b class="red">进群看戏的人</b>
+      太多，为保证群质量，因此设置了一个小小的加群门槛
     </h3>
     <div class="content">
       <p class="red">进群硬性门槛</p>
@@ -101,6 +101,7 @@
       </p>
       <p>2. 闲聊勿扰。</p>
     </div>
+    <h1 class="title">🚀 我的微信</h1>
 
     <img
       src="@/assets/img/my-wechat.webp"

src/views/h5/room/index.vue

@@ -32,6 +32,12 @@
           backgroundImage: `url(${liveRoomInfo?.cover_img})`,
         }"
       ></div>
+      <div
+        v-if="!roomLiving"
+        class="no-live"
+      >
+        主播还没开播~
+      </div>
       <div
         class="media-list"
         ref="remoteVideoRef"
@@ -101,7 +107,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, ref, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { fetchFindLiveRoom } from '@/api/liveRoom';
@@ -115,10 +121,8 @@ const appStore = useAppStore();
 
 const bottomRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();
-const localVideoRef = ref<HTMLVideoElement[]>([]);
 const showPlayBtn = ref(false);
 const containerHeight = ref(0);
-const videoRatio = ref(16 / 9);
 const videoWrapHeight = ref(0);
 const remoteVideoRef = ref<HTMLDivElement>();
 
@@ -132,9 +136,12 @@ const {
   videoLoading,
   damuList,
   danmuStr,
+  roomLiving,
   liveRoomInfo,
   anchorInfo,
   remoteVideo,
+  closeRtc,
+  closeWs,
 } = usePull({
   liveType: LiveTypeEnum.srsHlsPull,
 });
@@ -188,13 +195,17 @@ function startPull() {
   showPlayBtn.value = false;
   handleHlsPlay(liveRoomInfo.value?.hls_url);
 }
+onUnmounted(() => {
+  closeWs();
+  closeRtc();
+});
 
 onMounted(() => {
   setTimeout(() => {
     scrollTo(0, 0);
   }, 100);
   videoWrapHeight.value =
-    document.documentElement.clientWidth / videoRatio.value;
+    document.documentElement.clientWidth / appStore.videoRatio;
   nextTick(() => {
     if (containerRef.value && bottomRef.value) {
       const res =
@@ -251,6 +262,15 @@ onMounted(() => {
 
       inset: 0;
     }
+    .no-live {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 20;
+      color: white;
+      font-size: 28px;
+      transform: translate(-50%, -50%);
+    }
     .media-list {
       position: relative;
       overflow-y: scroll;
@@ -264,16 +284,16 @@ onMounted(() => {
         width: 100%;
         height: 100%;
       }
-      &.item {
-        :deep(video) {
-          width: 50%;
-          height: initial !important;
-        }
-        :deep(canvas) {
-          width: 50%;
-          height: initial !important;
-        }
-      }
+      // &.item {
+      //   :deep(video) {
+      //     width: 50%;
+      //     height: initial !important;
+      //   }
+      //   :deep(canvas) {
+      //     width: 50%;
+      //     height: initial !important;
+      //   }
+      // }
     }
     // :deep(video) {
     //   position: absolute;

src/views/home/index.vue

@@ -204,6 +204,7 @@ const { handleHlsPlay, videoLoading, remoteVideo, handleStopDrawing } = usePull(
 watch(
   () => remoteVideo.value,
   (newVal) => {
+    console.log('kkksd', newVal);
     newVal.forEach((item) => {
       remoteVideoRef.value?.appendChild(item);
     });
@@ -215,7 +216,6 @@ watch(
 );
 
 function changeLiveRoom(item: ILive) {
-  console.log(item, 'llkk');
   handleStopDrawing();
   if (item.id === currentLiveRoom.value?.id) return;
   currentLiveRoom.value = item;
@@ -303,6 +303,7 @@ function joinRoom(data: { roomId: number; isFlv: boolean }) {
 .home-wrap {
   .play-container {
     position: relative;
+    padding-bottom: 20px;
     z-index: 1;
     .bg {
       position: absolute;

src/views/pull/index.vue

@@ -32,7 +32,7 @@
           class="no-live"
           v-if="!roomLiving"
         >
-          当前房间没在直播~
+          主播还没开播~
         </div>
         <div
           v-else
@@ -194,7 +194,6 @@ import {
   LiveTypeEnum,
 } from '@/interface';
 import { useAppStore } from '@/store/app';
-import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
 import { NODE_ENV } from 'script/constant';
 
@@ -203,7 +202,6 @@ import RechargeCpt from './recharge/index.vue';
 const route = useRoute();
 const userStore = useUserStore();
 const appStore = useAppStore();
-const networkStore = useNetworkStore();
 const giftGoodsList = ref<IGoods[]>([]);
 const height = ref(0);
 const giftLoading = ref(false);

src/views/push/rtc/index.vue

@@ -343,7 +343,6 @@ const wrapSize = reactive({
   height: 0,
 });
 const workerTimerId = ref(-1);
-const videoRatio = ref(16 / 9);
 const bodyAppendChildElArr = ref<HTMLElement[]>([]);
 
 watch(
@@ -406,7 +405,11 @@ function renderAll() {
     item.text = new Date().toLocaleString();
   });
   stopwatchCanvasDom.value.forEach((item) => {
-    item.text = formatDownTime(+new Date(), startTime.value);
+    item.text = formatDownTime({
+      endTime: +new Date(),
+      startTime: startTime.value,
+      showMs: true,
+    });
   });
   fabricCanvas.value?.renderAll();
 }
@@ -522,7 +525,9 @@ function handleScale({ width, height }: { width: number; height: number }) {
   const resolutionHeight =
     currentResolutionRatio.value * window.devicePixelRatio;
   const resolutionWidth =
-    currentResolutionRatio.value * window.devicePixelRatio * videoRatio.value;
+    currentResolutionRatio.value *
+    window.devicePixelRatio *
+    appStore.videoRatio;
   let ratio = 1;
   if (width > resolutionWidth) {
     const r1 = resolutionWidth / width;
@@ -628,7 +633,7 @@ function changeCanvasAttr({
       currentResolutionRatio.value / window.devicePixelRatio;
     const resolutionWidth =
       (currentResolutionRatio.value / window.devicePixelRatio) *
-      videoRatio.value;
+      appStore.videoRatio;
     fabricCanvas.value.setWidth(resolutionWidth);
     fabricCanvas.value.setHeight(resolutionHeight);
     appStore.allTrack.forEach((iten) => {
@@ -691,7 +696,8 @@ function initCanvas() {
   const resolutionHeight =
     currentResolutionRatio.value / window.devicePixelRatio;
   const resolutionWidth =
-    (currentResolutionRatio.value / window.devicePixelRatio) * videoRatio.value;
+    (currentResolutionRatio.value / window.devicePixelRatio) *
+    appStore.videoRatio;
   const wrapWidth = containerRef.value!.getBoundingClientRect().width;
   // const wrapWidth = 1920;
   const ratio = wrapWidth / resolutionWidth;

src/views/push/srs/index.vue

@@ -272,7 +272,6 @@ import {
   ref,
   watch,
 } from 'vue';
-import { useRoute } from 'vue-router';
 import * as workerTimers from 'worker-timers';
 
 import { mediaTypeEnumMap } from '@/constant';
@@ -296,7 +295,6 @@ import MediaModalCpt from '../mediaModal/index.vue';
 import OpenMicophoneTipCpt from '../openMicophoneTip/index.vue';
 import SelectMediaModalCpt from '../selectMediaModal/index.vue';
 
-const route = useRoute();
 const userStore = useUserStore();
 const appStore = useAppStore();
 const resourceCacheStore = useResourceCacheStore();
@@ -344,7 +342,6 @@ const wrapSize = reactive({
   height: 0,
 });
 const workerTimerId = ref(-1);
-const videoRatio = ref(16 / 9);
 const bodyAppendChildElArr = ref<HTMLElement[]>([]);
 
 watch(
@@ -406,7 +403,11 @@ function renderAll() {
     item.text = new Date().toLocaleString();
   });
   stopwatchCanvasDom.value.forEach((item) => {
-    item.text = formatDownTime(+new Date(), startTime.value);
+    item.text = formatDownTime({
+      endTime: +new Date(),
+      startTime: startTime.value,
+      showMs: true,
+    });
   });
   fabricCanvas.value?.renderAll();
 }
@@ -522,7 +523,9 @@ function handleScale({ width, height }: { width: number; height: number }) {
   const resolutionHeight =
     currentResolutionRatio.value * window.devicePixelRatio;
   const resolutionWidth =
-    currentResolutionRatio.value * window.devicePixelRatio * videoRatio.value;
+    currentResolutionRatio.value *
+    window.devicePixelRatio *
+    appStore.videoRatio;
   let ratio = 1;
   if (width > resolutionWidth) {
     const r1 = resolutionWidth / width;
@@ -628,7 +631,7 @@ function changeCanvasAttr({
       currentResolutionRatio.value / window.devicePixelRatio;
     const resolutionWidth =
       (currentResolutionRatio.value / window.devicePixelRatio) *
-      videoRatio.value;
+      appStore.videoRatio;
     fabricCanvas.value.setWidth(resolutionWidth);
     fabricCanvas.value.setHeight(resolutionHeight);
     appStore.allTrack.forEach((iten) => {
@@ -691,7 +694,8 @@ function initCanvas() {
   const resolutionHeight =
     currentResolutionRatio.value / window.devicePixelRatio;
   const resolutionWidth =
-    (currentResolutionRatio.value / window.devicePixelRatio) * videoRatio.value;
+    (currentResolutionRatio.value / window.devicePixelRatio) *
+    appStore.videoRatio;
   const wrapWidth = containerRef.value!.getBoundingClientRect().width;
   // const wrapWidth = 1920;
   const ratio = wrapWidth / resolutionWidth;