fix: 完善

src/hooks/use-push.ts

@@ -59,6 +59,7 @@ export function usePush({
   const {
     getSocketId,
     initWs,
+    lastCoverImg,
     heartbeatTimer,
     localStream,
     liveUserList,
@@ -131,6 +132,20 @@ export function usePush({
     closeRtc();
   });
 
+  function handleCoverImg(dom: HTMLVideoElement) {
+    const canvas = document.createElement('canvas');
+    const { width, height } = dom.getBoundingClientRect();
+    const rate = width / height;
+    const coverWidth = width * 0.5;
+    const coverHeight = coverWidth / rate;
+    canvas.width = coverWidth;
+    canvas.height = coverHeight;
+    canvas.getContext('2d')!.drawImage(dom, 0, 0, coverWidth, coverHeight);
+    // webp比png的体积小非常多！因此coverWidth就可以不用压缩太夸张
+    const dataURL = canvas.toDataURL('image/webp');
+    return dataURL;
+  }
+
   function closeWs() {
     const instance = networkStore.wsMap.get(roomId.value);
     instance?.close();
@@ -181,6 +196,17 @@ export function usePush({
       return;
     }
     isLiving.value = true;
+    const el = appStore.allTrack.find((item) => {
+      if (item.video === 1) {
+        return true;
+      }
+    });
+    if (el) {
+      const res1 = videoElArr.value.find((item) => item.id === el.track.id);
+      if (res1) {
+        lastCoverImg.value = handleCoverImg(res1);
+      }
+    }
     initWs({
       isAnchor: true,
       roomId: roomId.value,

src/hooks/use-ws.ts

@@ -47,6 +47,7 @@ export const useWs = () => {
   const trackInfo = reactive({ track_audio: 1, track_video: 1 });
   const localVideo = ref<HTMLVideoElement>(document.createElement('video'));
   const localStream = ref<MediaStream>();
+  const lastCoverImg = ref('');
   const maxBitrate = ref([
     {
       label: '1000',
@@ -402,22 +403,6 @@ export const useWs = () => {
     }
   }
 
-  function handleCoverImg() {
-    const canvas = document.createElement('canvas');
-    const { width, height } = localVideo.value.getBoundingClientRect();
-    const rate = width / height;
-    const coverWidth = width * 0.5;
-    const coverHeight = coverWidth / rate;
-    canvas.width = coverWidth;
-    canvas.height = coverHeight;
-    canvas
-      .getContext('2d')!
-      .drawImage(localVideo.value, 0, 0, coverWidth, coverHeight);
-    // webp比png的体积小非常多！因此coverWidth就可以不用压缩太夸张
-    const dataURL = canvas.toDataURL('image/webp');
-    return dataURL;
-  }
-
   function sendJoin() {
     const instance = networkStore.wsMap.get(roomId.value);
     if (!instance) return;
@@ -444,7 +429,7 @@ export const useWs = () => {
       live_room: {
         id: Number(roomId.value),
         name: roomName.value,
-        cover_img: handleCoverImg(),
+        cover_img: lastCoverImg.value,
         type: isSRS.value
           ? LiveRoomTypeEnum.user_srs
           : LiveRoomTypeEnum.user_wertc,
@@ -806,6 +791,7 @@ export const useWs = () => {
     initWs,
     addTrack,
     delTrack,
+    lastCoverImg,
     roomLiveing,
     liveRoomInfo,
     roomNoLive,