fix: 优化

src/constant.ts

@@ -29,15 +29,19 @@ export const COOKIE_DOMAIN =
 
 export const THEME_COLOR = '#ffd700';
 
-export const SRS_CB_URL_PARAMS = {
+export const SRS_CB_URL_QUERY = {
   publishKey: 'pushkey',
   publishType: 'pushtype',
   userToken: 'usertoken',
   userId: 'userid',
   randomId: 'randomid',
 };
-export const URL_PARAMS = {
+export const URL_QUERY = {
   goodsType: 'goodsType',
+  pkKey: 'pkKey',
+  roomId: 'roomId',
+  liveType: 'liveType',
+  isBilibili: 'isBilibili',
 };
 
 export const COMMON_URL = {

src/hooks/use-play.ts

@@ -6,7 +6,7 @@ import videoJs from 'video.js';
 import Player from 'video.js/dist/types/player';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { SRS_CB_URL_PARAMS } from '@/constant';
+import { SRS_CB_URL_QUERY } from '@/constant';
 import { useAppStore } from '@/store/app';
 import { useCacheStore } from '@/store/cache';
 import { useUserStore } from '@/store/user';
@@ -19,10 +19,10 @@ function handlePlayUrl(url: string) {
   const userInfo = userStore.userInfo;
   const userToken = md5(userStore.token) as string;
   return !userInfo
-    ? `${url}?${SRS_CB_URL_PARAMS.randomId}=${getRandomString(8)}`
-    : `${url}?${SRS_CB_URL_PARAMS.userToken}=${userToken}&${
-        SRS_CB_URL_PARAMS.userId
-      }=${userInfo.id!}&${SRS_CB_URL_PARAMS.randomId}=${getRandomString(8)}`;
+    ? `${url}?${SRS_CB_URL_QUERY.randomId}=${getRandomString(8)}`
+    : `${url}?${SRS_CB_URL_QUERY.userToken}=${userToken}&${
+        SRS_CB_URL_QUERY.userId
+      }=${userInfo.id!}&${SRS_CB_URL_QUERY.randomId}=${getRandomString(8)}`;
 }
 
 let pipVideo;

src/hooks/use-pull.ts

@@ -2,6 +2,7 @@ import { getRandomString } from 'billd-utils';
 import { nextTick, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { URL_QUERY } from '@/constant';
 import { commentAuthTip, loginTip } from '@/hooks/use-login';
 import { useFlvPlay, useHlsPlay } from '@/hooks/use-play';
 import { useWebsocket } from '@/hooks/use-websocket';
@@ -16,13 +17,23 @@ import {
 import { useAppStore } from '@/store/app';
 import { useCacheStore } from '@/store/cache';
 import { useNetworkStore } from '@/store/network';
+import { ILiveRoom, LiveRoomTypeEnum } from '@/types/ILiveRoom';
 import {
-  ILiveRoom,
-  LiveRoomTypeEnum,
-  LiveRoomUseCDNEnum,
-} from '@/types/ILiveRoom';
-import { WsMessageType, WsMsgTypeEnum } from '@/types/websocket';
-import { createVideo, videoFullBox, videoToCanvas } from '@/utils';
+  WsBatchSendOffer,
+  WsMessageType,
+  WsMsgTypeEnum,
+  WsOfferType,
+} from '@/types/websocket';
+import {
+  createVideo,
+  handleUserMedia,
+  videoFullBox,
+  videoToCanvas,
+} from '@/utils';
+
+import { useTip } from './use-tip';
+import { useWebRtcLive } from './webrtc/live';
+import { useWebRtcMeetingOne } from './webrtc/meetingOne';
 
 export function usePull() {
   const route = useRoute();
@@ -47,11 +58,14 @@ export function usePull() {
   const { mySocketId, initWs, roomLiving, anchorInfo, liveUserList, damuList } =
     useWebsocket();
   const { updateWebRtcRtmpToRtcConfig, webRtcRtmpToRtc } = useWebRtcRtmpToRtc();
-
+  const { updateWebRtcLiveConfig, webRtcLive } = useWebRtcLive();
+  const { updateWebRtcMeetingOneConfig, webRtcMeetingOne } =
+    useWebRtcMeetingOne();
   const { flvVideoEl, flvIsPlaying, startFlvPlay, destroyFlv } = useFlvPlay();
   const { hlsVideoEl, hlsIsPlaying, startHlsPlay, destroyHls } = useHlsPlay();
   const stopDrawingArr = ref<any[]>([]);
   const rtcVideo = ref<HTMLVideoElement[]>([]);
+  const userStream = ref<MediaStream>();
 
   let changeWrapSizeFn;
 
@@ -234,6 +248,130 @@ export function usePull() {
     });
   }
 
+  async function handleWebRtcLivePlay(data) {
+    console.log('handleWebRtcLivePlay');
+    handleStopDrawing();
+    videoLoading.value = true;
+    appStore.liveLine = LiveLineEnum.rtc;
+    updateWebRtcLiveConfig({
+      roomId: roomId.value,
+      canvasVideoStream: null,
+    });
+    const videoEl = createVideo({
+      appendChild: true,
+      muted: appStore.pageIsClick ? cacheStore.muted : true,
+    });
+    rtcVideo.value.push(videoEl);
+    webRtcLive.newWebRtc({
+      sender: mySocketId.value,
+      receiver: data.sender,
+      videoEl,
+      sucessCb: (stream) => {
+        remoteStream.value.push(stream);
+      },
+    });
+
+    await webRtcLive.sendAnswer({
+      sender: mySocketId.value,
+      // data.data.receiver是接收者；我们现在new pc，发送者是自己，接收者肯定是房主，不能是data.data.receiver，因为data.data.receiver是自己
+      receiver: data.sender,
+      sdp: data.sdp,
+    });
+  }
+
+  async function handleWebRtcMeetingOnePlay(data) {
+    await handleMeeting();
+    console.log('handleWebRtcLivePlay');
+    handleStopDrawing();
+    videoLoading.value = true;
+    appStore.liveLine = LiveLineEnum.rtc;
+    const videoEl = createVideo({
+      appendChild: true,
+      muted: appStore.pageIsClick ? cacheStore.muted : true,
+    });
+    rtcVideo.value.push(videoEl);
+    webRtcMeetingOne.newWebRtc({
+      // 因为这里是收到offer，而offer是房主发的，所以此时的data.data.sender是房主；data.data.receiver是接收者；
+      // 但是这里的nativeWebRtc的sender，得是自己，不能是data.data.sender，不要混淆
+      sender: mySocketId.value,
+      receiver: data.sender,
+      videoEl,
+      sucessCb: (stream) => {
+        remoteStream.value.push(stream);
+      },
+    });
+    webRtcMeetingOne.addTrack({
+      stream: userStream.value,
+      receiver: data.sender,
+    });
+    await webRtcMeetingOne.sendAnswer({
+      sender: mySocketId.value,
+      // data.data.receiver是接收者；我们现在new pc，发送者是自己，接收者肯定是房主，不能是data.data.receiver，因为data.data.receiver是自己
+      receiver: data.sender,
+      sdp: data.sdp,
+    });
+  }
+
+  async function handleMeeting() {
+    await useTip({
+      content: '是否加入会议？',
+    });
+    const stream = await handleUserMedia({
+      video: true,
+      audio: true,
+    });
+    userStream.value = stream;
+    networkStore.wsMap.get(roomId.value)?.send<WsBatchSendOffer['data']>({
+      requestId: getRandomString(8),
+      msgType: WsMsgTypeEnum.batchSendOffer,
+      data: {
+        roomId: roomId.value,
+      },
+    });
+  }
+
+  function initRtcReceive() {
+    const ws = networkStore.wsMap.get(roomId.value);
+    if (!ws?.socketIo) return;
+    // 收到nativeWebRtcOffer
+    ws.socketIo.on(
+      WsMsgTypeEnum.nativeWebRtcOffer,
+      (data: WsOfferType['data']) => {
+        console.log(
+          '收2到nativeWebRtcOffer',
+          data.live_room.type,
+          LiveRoomTypeEnum.wertc_live,
+          data
+        );
+        if (data.live_room.type === LiveRoomTypeEnum.wertc_live) {
+          if (data.receiver === mySocketId.value) {
+            console.warn('是发给我的nativeWebRtcOffer-wertc_live');
+            if (networkStore.rtcMap.get(data.sender)) {
+              return;
+            }
+            handleWebRtcLivePlay(data);
+          } else {
+            console.error('不是发给我的nativeWebRtcOffer');
+          }
+        } else if (data.live_room.type === LiveRoomTypeEnum.wertc_meeting_one) {
+          if (data.receiver === mySocketId.value) {
+            console.warn('是发给我的nativeWebRtcOffer-wertc_meeting_one');
+            updateWebRtcMeetingOneConfig({
+              roomId: roomId.value,
+              anchorStream: null,
+            });
+            if (networkStore.rtcMap.get(data.sender)) {
+              return;
+            }
+            handleWebRtcMeetingOnePlay(data);
+          } else {
+            console.error('不是发给我的nativeWebRtcOffer');
+          }
+        }
+      }
+    );
+  }
+
   function handleHlsPlay() {
     console.log('handleHlsPlay', hlsurl.value);
     handleStopDrawing();
@@ -256,20 +394,18 @@ export function usePull() {
 
   function handlePlay(data: ILiveRoom) {
     roomLiving.value = true;
-    flvurl.value =
-      data.cdn === LiveRoomUseCDNEnum.yes &&
-      [LiveRoomTypeEnum.tencent_css, LiveRoomTypeEnum.tencent_css_pk].includes(
-        data.type!
-      )
-        ? data.cdn_flv_url!
-        : data.flv_url!;
-    hlsurl.value =
-      data.cdn === LiveRoomUseCDNEnum.yes &&
-      [LiveRoomTypeEnum.tencent_css, LiveRoomTypeEnum.tencent_css_pk].includes(
-        data.type!
-      )
-        ? data.cdn_hls_url!
-        : data.hls_url!;
+    flvurl.value = [
+      LiveRoomTypeEnum.tencent_css,
+      LiveRoomTypeEnum.tencent_css_pk,
+    ].includes(data.type!)
+      ? data.cdn_flv_url!
+      : data.flv_url!;
+    hlsurl.value = [
+      LiveRoomTypeEnum.tencent_css,
+      LiveRoomTypeEnum.tencent_css_pk,
+    ].includes(data.type!)
+      ? data.cdn_hls_url!
+      : data.hls_url!;
     function play() {
       if (appStore.liveLine === LiveLineEnum.flv) {
         handleFlvPlay();
@@ -277,7 +413,7 @@ export function usePull() {
         handleHlsPlay();
       }
     }
-    if (LiveRoomTypeEnum.pk === data.type && !route.query.pkKey) {
+    if (LiveRoomTypeEnum.pk === data.type && !route.query[URL_QUERY.pkKey]) {
       play();
     } else if (
       [
@@ -308,7 +444,7 @@ export function usePull() {
   watch(
     [() => roomLiving.value, () => appStore.liveRoomInfo],
     ([val, liveRoomInfo]) => {
-      if (val && liveRoomInfo) {
+      if (val && liveRoomInfo && liveRoomInfo.type !== undefined) {
         showPlayBtn.value = false;
         if (
           [
@@ -323,13 +459,14 @@ export function usePull() {
             LiveRoomTypeEnum.forward_all,
           ].includes(liveRoomInfo.type!)
         ) {
-          handlePlay(liveRoomInfo!);
-        } else if (LiveRoomTypeEnum.pk === liveRoomInfo.type!) {
-          if (!route.query.pkKey) {
-            handlePlay(liveRoomInfo!);
+          handlePlay(liveRoomInfo);
+        } else if (LiveRoomTypeEnum.pk === liveRoomInfo.type) {
+          if (!route.query[URL_QUERY.pkKey]) {
+            handlePlay(liveRoomInfo);
           }
         }
       }
+      console.log('kkkkk', val, liveRoomInfo?.type);
       if (!roomLiving.value) {
         closeRtc();
         handleStopDrawing();
@@ -503,6 +640,7 @@ export function usePull() {
 
   return {
     initWs,
+    initRtcReceive,
     videoWrapRef,
     handlePlay,
     handleStopDrawing,

src/hooks/use-websocket.ts

@@ -4,7 +4,7 @@ import { computed, h, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { fetchVerifyPkKey } from '@/api/liveRoom';
-import { THEME_COLOR } from '@/constant';
+import { THEME_COLOR, URL_QUERY } from '@/constant';
 import { useRTCParams } from '@/hooks/use-rtcParams';
 import { useTip } from '@/hooks/use-tip';
 import { useWebRtcLive } from '@/hooks/webrtc/live';
@@ -333,7 +333,7 @@ export const useWebsocket = () => {
         name: routerName.pull,
         params: { roomId: data.live_room_id },
         query: {
-          pkKey: data.key,
+          [URL_QUERY.pkKey]: data.key,
         },
       });
       const pkurl = `${window.location.origin}${url.href}`;
@@ -396,7 +396,7 @@ export const useWebsocket = () => {
           data.live_room.type === LiveRoomTypeEnum.pk ||
           data.live_room.type === LiveRoomTypeEnum.tencent_css_pk
         ) {
-          if (!route.query.pkKey) {
+          if (!route.query[URL_QUERY.pkKey]) {
             return;
           }
           if (data.receiver === mySocketId.value) {
@@ -427,62 +427,7 @@ export const useWebsocket = () => {
             console.error('不是发给我的nativeWebRtcOffer');
           }
         } else if (data.live_room.type === LiveRoomTypeEnum.wertc_live) {
-          if (data.receiver === mySocketId.value) {
-            console.warn('是发给我的nativeWebRtcOffer-wertc_live');
-            if (networkStore.rtcMap.get(data.sender)) {
-              return;
-            }
-            updateWebRtcLiveConfig({
-              roomId: roomId.value,
-              canvasVideoStream: canvasVideoStream.value,
-            });
-            webRtcLive.newWebRtc({
-              // 因为这里是收到offer，而offer是房主发的，所以此时的data.data.sender是房主；data.data.receiver是接收者；
-              // 但是这里的nativeWebRtc的sender，得是自己，不能是data.data.sender，不要混淆
-              sender: mySocketId.value,
-              receiver: data.sender,
-              videoEl: createNullVideo(),
-            });
-            await webRtcLive.sendAnswer({
-              sender: mySocketId.value,
-              // data.data.receiver是接收者；我们现在new pc，发送者是自己，接收者肯定是房主，不能是data.data.receiver，因为data.data.receiver是自己
-              receiver: data.sender,
-              sdp: data.sdp,
-            });
-          } else {
-            console.error('不是发给我的nativeWebRtcOffer');
-          }
         } else if (data.live_room.type === LiveRoomTypeEnum.wertc_meeting_one) {
-          if (data.receiver === mySocketId.value) {
-            console.warn('是发给我的nativeWebRtcOffer-wertc_meeting_one');
-            updateWebRtcMeetingOneConfig({
-              roomId: roomId.value,
-              // userStream: userStream.value,
-              anchorStream: canvasVideoStream.value,
-            });
-            if (networkStore.rtcMap.get(data.sender)) {
-              return;
-            }
-            webRtcMeetingOne.newWebRtc({
-              // 因为这里是收到offer，而offer是房主发的，所以此时的data.data.sender是房主；data.data.receiver是接收者；
-              // 但是这里的nativeWebRtc的sender，得是自己，不能是data.data.sender，不要混淆
-              sender: mySocketId.value,
-              receiver: data.sender,
-              videoEl: createNullVideo(),
-            });
-            webRtcMeetingOne.addTrack({
-              stream: userStream.value,
-              receiver: data.sender,
-            });
-            await webRtcMeetingOne.sendAnswer({
-              sender: mySocketId.value,
-              // data.data.receiver是接收者；我们现在new pc，发送者是自己，接收者肯定是房主，不能是data.data.receiver，因为data.data.receiver是自己
-              receiver: data.sender,
-              sdp: data.sdp,
-            });
-          } else {
-            console.error('不是发给我的nativeWebRtcOffer');
-          }
         }
       }
     );
@@ -647,13 +592,14 @@ export const useWebsocket = () => {
         },
       });
     }
+
     async function handlePk() {
-      if (!route.query.pkKey) {
+      if (!route.query[URL_QUERY.pkKey]) {
         return;
       }
       const res = await fetchVerifyPkKey({
         liveRoomId: Number(roomId.value),
-        key: route.query.pkKey,
+        key: route.query[URL_QUERY.pkKey],
       });
       if (res.code === 200 && res.data === true) {
         await useTip({
@@ -715,6 +661,7 @@ export const useWebsocket = () => {
                 sender: mySocketId.value,
                 receiver: item,
                 videoEl: createNullVideo(),
+                sucessCb: () => {},
               });
               webRtcMeetingOne.sendOffer({
                 sender: mySocketId.value,
@@ -770,16 +717,8 @@ export const useWebsocket = () => {
           console.error('自己进入直播间，退出');
           return;
         }
-        if (
-          [
-            LiveRoomTypeEnum.system,
-            LiveRoomTypeEnum.srs,
-            LiveRoomTypeEnum.obs,
-          ].includes(appStore.liveRoomInfo?.type!)
-        ) {
-          return;
-        }
-        if (appStore.liveRoomInfo?.type === LiveRoomTypeEnum.wertc_live) {
+        const liveRoomType = appStore.liveRoomInfo?.type;
+        if (liveRoomType === LiveRoomTypeEnum.wertc_live) {
           updateWebRtcLiveConfig({
             roomId: roomId.value,
             canvasVideoStream: canvasVideoStream.value,
@@ -793,6 +732,7 @@ export const useWebsocket = () => {
                 sender: mySocketId.value,
                 receiver: item,
                 videoEl: createNullVideo(),
+                sucessCb: () => {},
               });
               webRtcLive.sendOffer({
                 sender: mySocketId.value,
@@ -800,30 +740,29 @@ export const useWebsocket = () => {
               });
             }
           });
-        } else if (
-          appStore.liveRoomInfo?.type === LiveRoomTypeEnum.wertc_meeting_one
-        ) {
+        } else if (liveRoomType === LiveRoomTypeEnum.wertc_meeting_one) {
           updateWebRtcMeetingOneConfig({
             roomId: roomId.value,
             anchorStream: canvasVideoStream.value,
           });
-          // data.socket_list?.forEach((item) => {
-          //   if (item !== mySocketId.value) {
-          //     if (networkStore.rtcMap.get(item)) {
-          //       return;
-          //     }
-          //     webRtcMeetingOne.newWebRtc({
-          //       sender: mySocketId.value,
-          //       receiver: item,
-          //       videoEl: createNullVideo(),
-          //     });
-          //     webRtcMeetingOne.sendOffer({
-          //       sender: mySocketId.value,
-          //       receiver: item,
-          //     });
-          //   }
-          // });
-        } else if (appStore.liveRoomInfo?.type === LiveRoomTypeEnum.pk) {
+          data.socket_list?.forEach((item) => {
+            if (item !== mySocketId.value) {
+              if (networkStore.rtcMap.get(item)) {
+                return;
+              }
+              webRtcMeetingOne.newWebRtc({
+                sender: mySocketId.value,
+                receiver: item,
+                videoEl: createNullVideo(),
+                sucessCb: () => {},
+              });
+              webRtcMeetingOne.sendOffer({
+                sender: mySocketId.value,
+                receiver: item,
+              });
+            }
+          });
+        } else if (liveRoomType === LiveRoomTypeEnum.pk) {
           updateWebRtcMeetingPkConfig({
             roomId: roomId.value,
             anchorStream: canvasVideoStream.value,
@@ -844,9 +783,7 @@ export const useWebsocket = () => {
           //     });
           //   }
           // });
-        } else if (
-          appStore.liveRoomInfo?.type === LiveRoomTypeEnum.tencent_css_pk
-        ) {
+        } else if (liveRoomType === LiveRoomTypeEnum.tencent_css_pk) {
           updateWebRtcMeetingPkConfig({
             roomId: roomId.value,
             anchorStream: canvasVideoStream.value,

src/hooks/webrtc/forwardAll.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 
 import { fetchRtcV1Publish } from '@/api/srs';
-import { SRS_CB_URL_PARAMS } from '@/constant';
+import { SRS_CB_URL_QUERY } from '@/constant';
 import { useRTCParams } from '@/hooks/use-rtcParams';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
@@ -88,8 +88,8 @@ export const useForwardAll = () => {
           const answerRes = await fetchRtcV1Publish({
             sdp: offerSdp.sdp!,
             streamurl: `${myLiveRoom.rtmp_url!}?${
-              SRS_CB_URL_PARAMS.publishKey
-            }=${myLiveRoom.key!}&${SRS_CB_URL_PARAMS.publishType}=${
+              SRS_CB_URL_QUERY.publishKey
+            }=${myLiveRoom.key!}&${SRS_CB_URL_QUERY.publishType}=${
               isPk.value ? LiveRoomTypeEnum.pk : LiveRoomTypeEnum.forward_all
             }`,
           });

src/hooks/webrtc/forwardBilibili.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 
 import { fetchRtcV1Publish } from '@/api/srs';
-import { SRS_CB_URL_PARAMS } from '@/constant';
+import { SRS_CB_URL_QUERY } from '@/constant';
 import { useRTCParams } from '@/hooks/use-rtcParams';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
@@ -92,8 +92,8 @@ export const useForwardBilibili = () => {
           const answerRes = await fetchRtcV1Publish({
             sdp: offerSdp.sdp!,
             streamurl: `${myLiveRoom.rtmp_url!}?${
-              SRS_CB_URL_PARAMS.publishKey
-            }=${myLiveRoom.key!}&${SRS_CB_URL_PARAMS.publishType}=${
+              SRS_CB_URL_QUERY.publishKey
+            }=${myLiveRoom.key!}&${SRS_CB_URL_QUERY.publishType}=${
               isPk.value
                 ? LiveRoomTypeEnum.pk
                 : LiveRoomTypeEnum.forward_bilibili

src/hooks/webrtc/forwardHuya.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 
 import { fetchRtcV1Publish } from '@/api/srs';
-import { SRS_CB_URL_PARAMS } from '@/constant';
+import { SRS_CB_URL_QUERY } from '@/constant';
 import { useRTCParams } from '@/hooks/use-rtcParams';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
@@ -88,8 +88,8 @@ export const useForwardHuya = () => {
           const answerRes = await fetchRtcV1Publish({
             sdp: offerSdp.sdp!,
             streamurl: `${myLiveRoom.rtmp_url!}?${
-              SRS_CB_URL_PARAMS.publishKey
-            }=${myLiveRoom.key!}&${SRS_CB_URL_PARAMS.publishType}=${
+              SRS_CB_URL_QUERY.publishKey
+            }=${myLiveRoom.key!}&${SRS_CB_URL_QUERY.publishType}=${
               isPk.value ? LiveRoomTypeEnum.pk : LiveRoomTypeEnum.forward_huya
             }`,
           });

src/hooks/webrtc/live.ts

@@ -28,6 +28,7 @@ export const useWebRtcLive = () => {
       sender: string;
       receiver: string;
       videoEl: HTMLVideoElement;
+      sucessCb: (stream) => void;
     }) => {
       return new WebRTCClass({
         maxBitrate: currentMaxBitrate.value,
@@ -38,6 +39,7 @@ export const useWebRtcLive = () => {
         videoEl: data.videoEl,
         sender: data.sender,
         receiver: data.receiver,
+        sucessCb: data.sucessCb,
       });
     },
     /**

src/hooks/webrtc/meetingOne.ts

@@ -34,6 +34,7 @@ export const useWebRtcMeetingOne = () => {
       sender: string;
       receiver: string;
       videoEl: HTMLVideoElement;
+      sucessCb: (stream) => void;
     }) => {
       return new WebRTCClass({
         maxBitrate: currentMaxBitrate.value,
@@ -44,6 +45,7 @@ export const useWebRtcMeetingOne = () => {
         videoEl: data.videoEl,
         sender: data.sender,
         receiver: data.receiver,
+        sucessCb: data.sucessCb,
       });
     },
     /**

src/hooks/webrtc/srs.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 
 import { fetchRtcV1Publish } from '@/api/srs';
-import { SRS_CB_URL_PARAMS } from '@/constant';
+import { SRS_CB_URL_QUERY } from '@/constant';
 import { useRTCParams } from '@/hooks/use-rtcParams';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
@@ -93,8 +93,8 @@ export const useWebRtcSrs = () => {
           const answerRes = await fetchRtcV1Publish({
             sdp: offerSdp.sdp!,
             streamurl: `${myLiveRoom.rtmp_url!}?${
-              SRS_CB_URL_PARAMS.publishKey
-            }=${myLiveRoom.key!}&${SRS_CB_URL_PARAMS.publishType}=${
+              SRS_CB_URL_QUERY.publishKey
+            }=${myLiveRoom.key!}&${SRS_CB_URL_QUERY.publishType}=${
               isPk.value ? LiveRoomTypeEnum.pk : LiveRoomTypeEnum.srs
             }`,
           });

src/layout/pc/head/index.vue

@@ -417,7 +417,7 @@ import { fetchCreateSignin, fetchTodayIsSignin } from '@/api/signin';
 import Dropdown from '@/components/Dropdown/index.vue';
 import VPIconChevronDown from '@/components/icons/VPIconChevronDown.vue';
 import VPIconExternalLink from '@/components/icons/VPIconExternalLink.vue';
-import { COMMON_URL, DEFAULT_AUTH_INFO } from '@/constant';
+import { COMMON_URL, DEFAULT_AUTH_INFO, URL_QUERY } from '@/constant';
 import { handleTip } from '@/hooks/use-common';
 import { loginTip } from '@/hooks/use-login';
 import { routerName } from '@/router';
@@ -685,7 +685,7 @@ function handleStartLive(key: LiveRoomTypeEnum) {
   }
   const url = router.resolve({
     name: routerName.push,
-    query: { liveType: key },
+    query: { [URL_QUERY.liveType]: key },
   });
   openToTarget(url.href);
 }

src/views/about/team/index.vue

@@ -103,7 +103,7 @@
             @click="
               router.push({
                 name: routerName.shop,
-                query: { [URL_PARAMS.goodsType]: GoodsTypeEnum.sponsors },
+                query: { [URL_QUERY.goodsType]: GoodsTypeEnum.sponsors },
               })
             "
           >
@@ -133,7 +133,7 @@ import {
 import { openToTarget } from 'billd-utils';
 import { ref } from 'vue';
 
-import { PROJECT_NAME, URL_PARAMS } from '@/constant';
+import { PROJECT_NAME, URL_QUERY } from '@/constant';
 import { GoodsTypeEnum } from '@/interface';
 import router, { routerName } from '@/router';
 import { prodDomain } from '@/spec-config';

src/views/home/index.vue

@@ -292,7 +292,7 @@ import { useRouter } from 'vue-router';
 import { fetchLiveBilibiliGetUserRecommend } from '@/api/bilibili';
 import { fetchLiveList } from '@/api/live';
 import { fetchFindLiveConfigByKey } from '@/api/liveConfig';
-import { sliderList } from '@/constant';
+import { sliderList, URL_QUERY } from '@/constant';
 import { usePull } from '@/hooks/use-pull';
 import { ILive, LiveLineEnum } from '@/interface';
 import { routerName } from '@/router';
@@ -495,7 +495,7 @@ function joinRoom(data) {
   const url = router.resolve({
     name: routerName.pull,
     params: { roomId: data.id },
-    query: { is_bilibili: data.is_bilibili },
+    query: { [URL_QUERY.isBilibili]: data.is_bilibili },
   });
   openToTarget(url.href);
 }

src/views/my/index.vue

@@ -437,7 +437,7 @@ import { ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { fetchUpdateLiveRoomKey, fetchUpdateMyLiveRoom } from '@/api/liveRoom';
-import { DEFAULT_AUTH_INFO } from '@/constant';
+import { DEFAULT_AUTH_INFO, URL_QUERY } from '@/constant';
 import { loginTip } from '@/hooks/use-login';
 import { routerName } from '@/router';
 import { useUserStore } from '@/store/user';
@@ -480,7 +480,7 @@ function openLiveRoom() {
   }
   const url = router.resolve({
     name: routerName.push,
-    query: { liveType: LiveRoomTypeEnum.srs },
+    query: { [URL_QUERY.liveType]: LiveRoomTypeEnum.srs },
   });
   openToTarget(url.href);
 }

src/views/pull/index.vue

@@ -459,7 +459,7 @@ import { fetchGoodsList } from '@/api/goods';
 import { fetchLiveRoomOnlineUser } from '@/api/live';
 import { fetchFindLiveRoom, fetchLiveRoomBilibili } from '@/api/liveRoom';
 import { fetchGetWsMessageList } from '@/api/wsMessage';
-import { liveRoomTypeEnumMap } from '@/constant';
+import { liveRoomTypeEnumMap, URL_QUERY } from '@/constant';
 import { emojiArray } from '@/emoji';
 import { commentAuthTip, loginTip } from '@/hooks/use-login';
 import { useFullScreen, usePictureInPicture } from '@/hooks/use-play';
@@ -520,6 +520,7 @@ const isBilibili = ref(false);
 
 const {
   initWs,
+  initRtcReceive,
   initPull,
   closeWs,
   closeRtc,
@@ -580,7 +581,7 @@ const rtcBytesReceived = computed(() => {
 
 onMounted(async () => {
   roomId.value = route.params.roomId as string;
-  if (route.query.is_bilibili === '1') {
+  if (route.query[URL_QUERY.isBilibili] === '1') {
     isBilibili.value = true;
     const res = await fetchLiveRoomBilibili();
     roomId.value = `${res.data.id!}`;
@@ -620,6 +621,7 @@ onMounted(async () => {
       isBilibili: true,
       isAnchor: false,
     });
+    initRtcReceive();
   }
   getGiftRecord();
   getGiftGroupList();

src/views/push/index.vue

@@ -489,7 +489,12 @@ import { useRoute } from 'vue-router';
 import { fetchLiveRoomOnlineUser } from '@/api/live';
 import { fetchUpdateMyLiveRoom } from '@/api/liveRoom';
 import { fetchGetWsMessageList } from '@/api/wsMessage';
-import { THEME_COLOR, liveRoomTypeEnumMap, mediaTypeEnumMap } from '@/constant';
+import {
+  THEME_COLOR,
+  URL_QUERY,
+  liveRoomTypeEnumMap,
+  mediaTypeEnumMap,
+} from '@/constant';
 import { emojiArray } from '@/emoji';
 import { commentAuthTip, loginTip } from '@/hooks/use-login';
 import { usePush } from '@/hooks/use-push';
@@ -597,7 +602,7 @@ const wrapSize = reactive({
   height: 0,
 });
 const bodyAppendChildElArr = ref<HTMLElement[]>([]);
-const liveType = Number(route.query.liveType);
+const liveType = Number(route.query[URL_QUERY.liveType]);
 const recorder = ref<MediaRecorder>();
 const bolbId = ref(0);
 const msrDelay = ref(1000 * 1);
@@ -767,7 +772,7 @@ watch(
 );
 
 watch(
-  () => route.query.roomId,
+  () => route.query[URL_QUERY.roomId],
   (newval) => {
     if (newval) {
       handleSendGetLiveUser(Number(newval));

src/views/shop/index.vue

@@ -64,7 +64,7 @@ import { useRoute } from 'vue-router';
 
 import { fetchGoodsList } from '@/api/goods';
 import QrPayCpt from '@/components/QrPay/index.vue';
-import { URL_PARAMS } from '@/constant';
+import { URL_QUERY } from '@/constant';
 import { GoodsTypeEnum, IGoods } from '@/interface';
 import router from '@/router';
 import { formatMoney } from '@/utils';
@@ -106,7 +106,7 @@ async function getGoodsList(type: GoodsTypeEnum) {
 }
 
 onMounted(() => {
-  const key = route.query[URL_PARAMS.goodsType] as GoodsTypeEnum;
+  const key = route.query[URL_QUERY.goodsType] as GoodsTypeEnum;
   if (GoodsTypeEnum[key]) {
     currTab.value = key;
   } else {

src/views/user/index.vue

@@ -64,6 +64,7 @@ import { ref, watchEffect } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { fetchFindUser } from '@/api/user';
+import { URL_QUERY } from '@/constant';
 import { loginTip } from '@/hooks/use-login';
 import { routerName } from '@/router';
 import { useUserStore } from '@/store/user';
@@ -106,7 +107,7 @@ function openLiveRoom() {
   }
   const url = router.resolve({
     name: routerName.push,
-    query: { liveType: LiveRoomTypeEnum.srs },
+    query: { [URL_QUERY.liveType]: LiveRoomTypeEnum.srs },
   });
   openToTarget(url.href);
 }