fix: 修复预览图

src/hooks/use-push.ts

@@ -1,5 +1,5 @@
 import { windowReload } from 'billd-utils';
-import { Ref, onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import {
@@ -8,6 +8,7 @@ import {
 } from '@/api/userLiveRoom';
 import {
   DanmuMsgTypeEnum,
+  ILiveRoom,
   IMessage,
   MediaTypeEnum,
   liveTypeEnum,
@@ -22,15 +23,7 @@ import { loginTip } from './use-login';
 import { useTip } from './use-tip';
 import { useWs } from './use-ws';
 
-export function usePush({
-  localVideoRef,
-  remoteVideoRef,
-  isSRS,
-}: {
-  localVideoRef: Ref<HTMLVideoElement | undefined>;
-  remoteVideoRef: Ref<HTMLVideoElement[]>;
-  isSRS: boolean;
-}) {
+export function usePush({ isSRS }: { isSRS: boolean }) {
   const route = useRoute();
   const router = useRouter();
   const appStore = useAppStore();
@@ -41,6 +34,7 @@ export function usePush({
   const roomName = ref('');
   const danmuStr = ref('');
   const isLiving = ref(false);
+  const liveRoomInfo = ref<ILiveRoom>();
   const videoElArr = ref<HTMLVideoElement[]>([]);
 
   const allMediaTypeList: {
@@ -138,6 +132,9 @@ export function usePush({
         if (!res) {
           await useTip('你还没有直播间，是否立即开通？');
           await handleCreateUserLiveRoom();
+        } else {
+          roomName.value = liveRoomInfo.value?.name || '';
+          roomId.value = `${liveRoomInfo.value?.id || ''}`;
         }
       }
     },
@@ -169,8 +166,7 @@ export function usePush({
   async function userHasLiveRoom() {
     const res = await fetchUserHasLiveRoom(userStore.userInfo?.id!);
     if (res.code === 200 && res.data) {
-      roomName.value = res.data.live_room?.name || '';
-      roomId.value = `${res.data.live_room?.id || ''}`;
+      liveRoomInfo.value = res.data.live_room;
       router.push({ query: { ...route.query, roomId: roomId.value } });
       return true;
     }
@@ -231,7 +227,7 @@ export function usePush({
         }
       }
     }
-    sendStartLive();
+    sendStartLive({ coverImg: lastCoverImg.value, name: roomName.value });
     startNewWebRtc({
       videoEl: document.createElement('video'),
       receiver: 'srs',
@@ -330,6 +326,7 @@ export function usePush({
     roomName,
     damuList,
     liveUserList,
+    liveRoomInfo,
     connectWs,
     addTrack,
     delTrack,

src/hooks/use-ws.ts

@@ -24,6 +24,7 @@ import {
   WsOfferType,
   WsOtherJoinType,
   WsRoomLivingType,
+  WsStartLiveType,
   WsUpdateJoinInfoType,
 } from '@/interface-ws';
 import { WebRTCClass } from '@/network/webRTC';
@@ -481,9 +482,13 @@ export const useWs = () => {
     }
   }
 
-  function sendStartLive() {
-    networkStore.wsMap.get(roomId.value)?.send({
+  function sendStartLive({ coverImg, name }) {
+    networkStore.wsMap.get(roomId.value)?.send<WsStartLiveType['data']>({
       msgType: WsMsgTypeEnum.startLive,
+      data: {
+        cover_img: coverImg,
+        name,
+      },
     });
   }
 

src/interface-ws.ts

@@ -45,6 +45,11 @@ export type WsRoomNoLiveType = IWsFormat<{
   live_room: ILiveRoom;
 }>;
 
+export type WsStartLiveType = IWsFormat<{
+  cover_img: string;
+  name: string;
+}>;
+
 export type WsJoinType = IWsFormat<{
   socket_id: string;
   live_room: ILiveRoom;
@@ -57,12 +62,6 @@ export type WsLeavedType = IWsFormat<{
   user_info?: IUser;
 }>;
 
-export type WsStartLiveType = IWsFormat<{
-  socket_id: string;
-  user_info: IUser;
-  data: any;
-}>;
-
 export interface IRoomLiving {
   live_room: ILiveRoom;
 }

src/views/pushByCanvas/index.vue

@@ -309,9 +309,7 @@ const danmuListRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();
 const pushCanvasRef = ref<HTMLCanvasElement>();
 const fabricCanvas = ref<fabric.Canvas>();
-const localVideoRef = ref<HTMLVideoElement>();
 const audioCtx = ref<AudioContext>();
-const remoteVideoRef = ref<HTMLVideoElement[]>([]);
 const timeCanvasDom = ref<Raw<fabric.Text>[]>([]);
 const stopwatchCanvasDom = ref<Raw<fabric.Text>[]>([]);
 const isSRS = route.query.liveType === liveTypeEnum.srsPush;
@@ -347,8 +345,6 @@ const {
   delTrack,
   connectWs,
 } = usePush({
-  localVideoRef,
-  remoteVideoRef,
   isSRS,
 });