fix: 架构优化

src/components/VideoControls/index.vue

@@ -265,26 +265,43 @@ function handlePageFull() {
 }
 
 function changeLiveLine(item: LiveLineEnum) {
-  if (
-    [
-      LiveRoomTypeEnum.wertc_live,
-      LiveRoomTypeEnum.wertc_meeting_one,
-      LiveRoomTypeEnum.wertc_meeting_two,
-    ].includes(appStore.liveRoomInfo!.type!) &&
-    item !== LiveLineEnum.rtc
-  ) {
-    window.$message.info('不支持该线路！');
-    return;
-  } else if (
-    ![
-      LiveRoomTypeEnum.wertc_live,
-      LiveRoomTypeEnum.wertc_meeting_one,
-      LiveRoomTypeEnum.wertc_meeting_two,
-    ].includes(appStore.liveRoomInfo!.type!) &&
-    item === LiveLineEnum.rtc
-  ) {
-    window.$message.info('不支持该线路！');
-    return;
+  const type = appStore.liveRoomInfo?.type;
+  if (type === undefined) return;
+  if (item === LiveLineEnum['rtmp-rtc']) {
+    if (
+      [
+        LiveRoomTypeEnum.wertc_live,
+        LiveRoomTypeEnum.wertc_meeting_one,
+        LiveRoomTypeEnum.wertc_meeting_two,
+        LiveRoomTypeEnum.tencent_css,
+        LiveRoomTypeEnum.tencent_css_pk,
+      ].includes(type)
+    ) {
+      window.$message.info('不支持该线路！');
+      return;
+    }
+  } else if (item === LiveLineEnum.flv || item === LiveLineEnum.hls) {
+    if (
+      [
+        LiveRoomTypeEnum.wertc_live,
+        LiveRoomTypeEnum.wertc_meeting_one,
+        LiveRoomTypeEnum.wertc_meeting_two,
+      ].includes(type)
+    ) {
+      window.$message.info('不支持该线路！');
+      return;
+    }
+  } else if (item === LiveLineEnum.rtc) {
+    if (
+      ![
+        LiveRoomTypeEnum.wertc_live,
+        LiveRoomTypeEnum.wertc_meeting_one,
+        LiveRoomTypeEnum.wertc_meeting_two,
+      ].includes(type)
+    ) {
+      window.$message.info('不支持该线路！');
+      return;
+    }
   }
   appStore.liveLine = item;
 }

src/hooks/use-play.ts

@@ -124,25 +124,9 @@ export function useFlvPlay() {
     retryMax.value = initRetryMax;
   }
 
-  function setMuted(val) {
-    if (flvVideoEl.value) {
-      flvVideoEl.value.muted = val;
-    }
-    if (flvPlayer.value) {
-      flvPlayer.value.muted = val;
-    }
-  }
-  function setVolume(val: number) {
-    if (flvVideoEl.value) {
-      flvVideoEl.value.volume = val / 100;
-    }
-    if (flvPlayer.value) {
-      flvPlayer.value.volume = val / 100;
-    }
-  }
   function setPlay() {
     try {
-      console.log(`开始播放flv，muted:${cacheStore.muted}`);
+      console.log(`开始播放flv`);
       flvVideoEl.value?.play();
       flvPlayer.value?.play();
     } catch (error) {
@@ -151,6 +135,19 @@ export function useFlvPlay() {
     }
   }
 
+  watch(
+    () => appStore.playing,
+    (newVal) => {
+      if (flvVideoEl.value) {
+        if (newVal) {
+          flvVideoEl.value.play();
+        } else {
+          flvVideoEl.value.pause();
+        }
+      }
+    }
+  );
+
   watch(
     () => flvIsPlaying.value,
     (newVal) => {
@@ -161,14 +158,32 @@ export function useFlvPlay() {
   watch(
     () => cacheStore.muted,
     (newVal) => {
-      setMuted(newVal);
+      appStore.pageIsClick = true;
+      if (flvVideoEl.value) {
+        flvVideoEl.value.muted = newVal;
+      }
+      if (!newVal) {
+        cacheStore.volume = cacheStore.volume || appStore.normalVolume;
+      } else {
+        cacheStore.volume = 0;
+      }
     }
   );
 
   watch(
     () => cacheStore.volume,
     (newVal) => {
-      setVolume(newVal);
+      if (flvVideoEl.value) {
+        flvVideoEl.value.volume = newVal / 100;
+      }
+      if (!newVal) {
+        cacheStore.muted = true;
+      } else {
+        cacheStore.muted = false;
+      }
+    },
+    {
+      immediate: true,
     }
   );
 
@@ -189,10 +204,9 @@ export function useFlvPlay() {
           });
           const videoEl = createVideo({
             appendChild: true,
-            muted: cacheStore.muted,
+            muted: appStore.pageIsClick ? cacheStore.muted : true,
             autoplay: true,
           });
-          // const videoEl = createVideo({});
           videoEl.addEventListener('play', () => {
             console.log('flv-play');
           });
@@ -200,8 +214,6 @@ export function useFlvPlay() {
             console.log('flv-playing');
             flvIsPlaying.value = true;
             retry.value = 0;
-            setMuted(cacheStore.muted);
-            setVolume(cacheStore.volume);
             flvVideoEl.value = videoEl;
             resolve('');
           });
@@ -278,26 +290,9 @@ export function useHlsPlay() {
     retryMax.value = initRetryMax;
   }
 
-  function setMuted(val: boolean) {
-    if (hlsVideoEl.value) {
-      hlsVideoEl.value.muted = val;
-    }
-    if (hlsPlayer.value) {
-      hlsPlayer.value.muted(val);
-    }
-  }
-  function setVolume(val: number) {
-    if (hlsVideoEl.value) {
-      hlsVideoEl.value.volume = val / 100;
-    }
-    if (hlsPlayer.value) {
-      hlsPlayer.value.volume(val / 100);
-    }
-  }
-
   function setPlay() {
     try {
-      console.log(`开始播放hls，muted:${cacheStore.muted}`);
+      console.log(`开始播放hls`);
       hlsVideoEl.value?.play();
       hlsPlayer.value?.play();
     } catch (error) {
@@ -306,6 +301,19 @@ export function useHlsPlay() {
     }
   }
 
+  watch(
+    () => appStore.playing,
+    (newVal) => {
+      if (hlsVideoEl.value) {
+        if (newVal) {
+          hlsVideoEl.value.play();
+        } else {
+          hlsVideoEl.value.pause();
+        }
+      }
+    }
+  );
+
   watch(
     () => hlsIsPlaying.value,
     (newVal) => {
@@ -316,14 +324,32 @@ export function useHlsPlay() {
   watch(
     () => cacheStore.muted,
     (newVal) => {
-      setMuted(newVal);
+      appStore.pageIsClick = true;
+      if (hlsVideoEl.value) {
+        hlsVideoEl.value.muted = newVal;
+      }
+      if (!newVal) {
+        cacheStore.volume = cacheStore.volume || appStore.normalVolume;
+      } else {
+        cacheStore.volume = 0;
+      }
     }
   );
 
   watch(
     () => cacheStore.volume,
     (newVal) => {
-      setVolume(newVal);
+      if (hlsVideoEl.value) {
+        hlsVideoEl.value.volume = newVal / 100;
+      }
+      if (!newVal) {
+        cacheStore.muted = true;
+      } else {
+        cacheStore.muted = false;
+      }
+    },
+    {
+      immediate: true,
     }
   );
 
@@ -334,13 +360,9 @@ export function useHlsPlay() {
         destroyHls();
         const videoEl = createVideo({
           appendChild: true,
-          muted: cacheStore.muted,
+          muted: appStore.pageIsClick ? cacheStore.muted : true,
           autoplay: true,
         });
-        // const videoEl = createVideo({
-        //   muted: cacheStore.muted,
-        //   autoplay: true,
-        // });
         hlsPlayer.value = videoJs(
           videoEl,
           {
@@ -377,8 +399,6 @@ export function useHlsPlay() {
         hlsPlayer.value?.on('playing', () => {
           console.log('hls-playing');
           hlsIsPlaying.value = true;
-          setMuted(cacheStore.muted);
-          setVolume(cacheStore.volume);
           retry.value = 0;
           // console.log(hlsPlayer.value?.videoHeight()); // 获取到的是正确的！
           const childNodes = hlsPlayer.value?.el().childNodes;

src/hooks/use-pull.ts

@@ -42,9 +42,7 @@ export function usePull() {
   const hlsurl = ref('');
   const videoWrapRef = ref<HTMLDivElement>();
   const videoResolution = ref();
-  const isRemoteDesk = ref(false);
-  const videoElArr = ref<HTMLVideoElement[]>([]);
-  const remoteVideo = ref<HTMLElement[]>([]);
+  const remoteVideo = ref<Array<HTMLVideoElement | HTMLCanvasElement>>([]);
   const remoteStream = ref<MediaStream[]>([]);
   const { mySocketId, initWs, roomLiving, anchorInfo, liveUserList, damuList } =
     useWebsocket();
@@ -53,7 +51,7 @@ export function usePull() {
   const { flvVideoEl, flvIsPlaying, startFlvPlay, destroyFlv } = useFlvPlay();
   const { hlsVideoEl, hlsIsPlaying, startHlsPlay, destroyHls } = useHlsPlay();
   const stopDrawingArr = ref<any[]>([]);
-  const rtmpToRtcVido = ref<HTMLVideoElement>();
+  const rtcVideo = ref<HTMLVideoElement[]>([]);
 
   let changeWrapSizeFn;
 
@@ -99,7 +97,6 @@ export function usePull() {
         changeWrapSizeFn = changeWrapSize;
         stopDrawingArr.value.push(stopDrawing);
         remoteVideo.value.push(canvas);
-        videoElArr.value.push(videoEl);
         videoLoading.value = false;
       }
     } else if (appStore.videoControls.renderMode === LiveRenderEnum.video) {
@@ -117,7 +114,6 @@ export function usePull() {
         });
         changeWrapSizeFn = changeWrapSize;
         remoteVideo.value.push(videoEl);
-        videoElArr.value.push(videoEl);
         videoLoading.value = false;
       }
     }
@@ -178,6 +174,38 @@ export function usePull() {
     }
   );
 
+  watch(
+    () => cacheStore.muted,
+    (newVal) => {
+      appStore.pageIsClick = true;
+      rtcVideo.value.forEach((v) => {
+        v.muted = newVal;
+      });
+      if (!newVal) {
+        cacheStore.volume = cacheStore.volume || appStore.normalVolume;
+      } else {
+        cacheStore.volume = 0;
+      }
+    }
+  );
+
+  watch(
+    () => cacheStore.volume,
+    (newVal) => {
+      rtcVideo.value.forEach((v) => {
+        v.volume = newVal / 100;
+      });
+      if (!newVal) {
+        cacheStore.muted = true;
+      } else {
+        cacheStore.muted = false;
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
   function handleRtmpToRtcPlay() {
     console.log('handleRtmpToRtcPlay');
     handleStopDrawing();
@@ -187,10 +215,15 @@ export function usePull() {
       isPk: false,
       roomId: roomId.value,
     });
+    const videoEl = createVideo({
+      appendChild: true,
+      muted: appStore.pageIsClick ? cacheStore.muted : true,
+    });
+    rtcVideo.value.push(videoEl);
     webRtcRtmpToRtc.newWebRtc({
       sender: mySocketId.value,
       receiver: 'rtmpToRtc',
-      videoEl: createVideo({}),
+      videoEl,
       sucessCb: (stream) => {
         remoteStream.value.push(stream);
       },
@@ -316,7 +349,6 @@ export function usePull() {
       destroyFlv();
       destroyHls();
       remoteStream.value = [];
-
       if (!roomLiving.value) {
         return;
       }
@@ -336,47 +368,6 @@ export function usePull() {
     }
   );
 
-  watch(
-    () => cacheStore.muted,
-    (newVal) => {
-      videoElArr.value.forEach((el) => {
-        el.muted = newVal;
-      });
-      if (!newVal) {
-        cacheStore.volume = cacheStore.volume || appStore.normalVolume;
-      } else {
-        cacheStore.volume = 0;
-      }
-    }
-  );
-
-  watch(
-    () => cacheStore.volume,
-    (newVal) => {
-      videoElArr.value.forEach((el) => {
-        el.volume = newVal / 100;
-      });
-      if (!newVal) {
-        cacheStore.muted = true;
-      } else {
-        cacheStore.muted = false;
-      }
-    }
-  );
-
-  watch(
-    () => appStore.playing,
-    (newVal) => {
-      videoElArr.value.forEach((el) => {
-        if (newVal) {
-          el.play();
-        } else {
-          el.pause();
-        }
-      });
-    }
-  );
-
   watch(
     () => hlsIsPlaying.value,
     (newVal) => {
@@ -395,15 +386,13 @@ export function usePull() {
     roomId.value = id;
   }
 
-  function initPull(data: { autolay?: boolean; isRemoteDesk?: boolean }) {
+  function initPull(data: { autolay?: boolean }) {
     if (data.autolay === undefined) {
       autoplayVal.value = true;
     } else {
       autoplayVal.value = data.autolay;
     }
-    isRemoteDesk.value = !!data.isRemoteDesk;
     initWs({
-      isRemoteDesk: data.isRemoteDesk,
       roomId: roomId.value,
       isAnchor: false,
     });
@@ -540,6 +529,5 @@ export function usePull() {
     liveRoomInfo,
     anchorInfo,
     initRoomId,
-    rtmpToRtcVido,
   };
 }

src/hooks/use-push.ts

@@ -189,7 +189,6 @@ export function usePush() {
 
   function connectWs() {
     initWs({
-      isRemoteDesk: false,
       isAnchor: true,
       roomId: roomId.value,
       currentMaxBitrate: currentMaxBitrate.value,

src/hooks/use-websocket.ts

@@ -40,10 +40,8 @@ import {
   WsMsgTypeEnum,
   WsOfferType,
   WsOtherJoinType,
-  WsRemoteDeskBehaviorType,
   WsRoomLivingType,
   WsStartLiveType,
-  WsStartRemoteDesk,
   WsUpdateJoinInfoType,
 } from '@/types/websocket';
 import {
@@ -60,7 +58,6 @@ import {
 import { useForwardAll } from './webrtc/forwardAll';
 import { useForwardBilibili } from './webrtc/forwardBilibili';
 import { useForwardHuya } from './webrtc/forwardHuya';
-import { useWebRtcRemoteDesk } from './webrtc/remoteDesk';
 
 export const useWebsocket = () => {
   const route = useRoute();
@@ -75,8 +72,6 @@ export const useWebsocket = () => {
     videoContentHint,
     audioContentHint,
   } = useRTCParams();
-  const { updateWebRtcRemoteDeskConfig, webRtcRemoteDesk } =
-    useWebRtcRemoteDesk();
   const { updateWebRtcMeetingPkConfig, webRtcMeetingPk } = useWebRtcMeetingPk();
   const { updateWebRtcSrsConfig, webRtcSrs } = useWebRtcSrs();
   const { updateForwardBilibiliConfig, forwardBilibili } = useForwardBilibili();
@@ -95,7 +90,6 @@ export const useWebsocket = () => {
   const roomId = ref('');
   const roomLiving = ref(false);
   const isAnchor = ref(false);
-  const isRemoteDesk = ref(false);
   const isBilibili = ref(false);
   const anchorInfo = ref<IUser>();
   const canvasVideoStream = ref<MediaStream>();
@@ -304,7 +298,6 @@ export const useWebsocket = () => {
       msgType: WsMsgTypeEnum.join,
       data: {
         isBilibili: isBilibili.value,
-        isRemoteDesk: isRemoteDesk.value,
         live_room_id: Number(roomId.value),
       },
     });
@@ -368,15 +361,6 @@ export const useWebsocket = () => {
       }).catch(() => {});
     });
 
-    // 收到startRemoteDesk
-    ws.socketIo.on(WsMsgTypeEnum.startRemoteDesk, (data: WsStartRemoteDesk) => {
-      console.log('收到startRemoteDesk', data);
-      if (data.data.receiver === mySocketId.value) {
-        appStore.remoteDesk.startRemoteDesk = true;
-        appStore.remoteDesk.sender = data.data.sender;
-      }
-    });
-
     // 收到srsOffer
     ws.socketIo.on(WsMsgTypeEnum.srsOffer, (data: WsOfferType['data']) => {
       console.log('收到srsOffer', data);
@@ -407,35 +391,7 @@ export const useWebsocket = () => {
       WsMsgTypeEnum.nativeWebRtcOffer,
       async (data: WsOfferType['data']) => {
         console.log('收到nativeWebRtcOffer', data);
-        if (data.isRemoteDesk) {
-          if (data.receiver === mySocketId.value) {
-            console.warn('是发给我的nativeWebRtcOffer-isRemoteDesk');
-            if (networkStore.rtcMap.get(data.sender)) {
-              return;
-            }
-            updateWebRtcRemoteDeskConfig({
-              roomId: roomId.value,
-              userStream: userStream.value,
-              anchorStream: canvasVideoStream.value,
-            });
-            webRtcRemoteDesk.newWebRtc({
-              // 因为这里是收到offer，而offer是房主发的，所以此时的data.data.sender是房主；data.data.receiver是接收者；
-              // 但是这里的nativeWebRtc的sender，得是自己，不能是data.data.sender，不要混淆
-              sender: mySocketId.value,
-              receiver: data.sender,
-              videoEl: createNullVideo(),
-            });
-            await webRtcRemoteDesk.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-isRemoteDesk');
-          }
-          return;
-        }
+
         if (
           data.live_room.type === LiveRoomTypeEnum.pk ||
           data.live_room.type === LiveRoomTypeEnum.tencent_css_pk
@@ -563,14 +519,6 @@ export const useWebsocket = () => {
       }
     );
 
-    // 收到remoteDeskBehavior
-    ws.socketIo.on(
-      WsMsgTypeEnum.remoteDeskBehavior,
-      (data: WsRemoteDeskBehaviorType['data']) => {
-        console.log('收到remoteDeskBehavior', data);
-      }
-    );
-
     // 主播正在直播
     ws.socketIo.on(
       WsMsgTypeEnum.roomLiving,
@@ -951,16 +899,13 @@ export const useWebsocket = () => {
     isAnchor: boolean;
     roomId: string;
     isBilibili?: boolean;
-    isRemoteDesk?: boolean;
     currentResolutionRatio?: number;
     currentMaxFramerate?: number;
     currentMaxBitrate?: number;
   }) {
     roomId.value = data.roomId;
     isAnchor.value = data.isAnchor;
-    if (data.isRemoteDesk !== undefined) {
-      isRemoteDesk.value = data.isRemoteDesk;
-    }
+
     if (data.isBilibili !== undefined) {
       isBilibili.value = data.isBilibili;
     }

src/hooks/webrtc/remoteDesk.ts

@@ -1,156 +0,0 @@
-import { getRandomString } from 'billd-utils';
-import { ref } from 'vue';
-
-import { useRTCParams } from '@/hooks/use-rtcParams';
-import { useAppStore } from '@/store/app';
-import { useNetworkStore } from '@/store/network';
-import { WsAnswerType, WsMsgTypeEnum, WsOfferType } from '@/types/websocket';
-import { WebRTCClass } from '@/utils/network/webRTC';
-
-export const useWebRtcRemoteDesk = () => {
-  const appStore = useAppStore();
-  const networkStore = useNetworkStore();
-
-  const { maxBitrate, maxFramerate, resolutionRatio } = useRTCParams();
-  const currentMaxBitrate = ref(maxBitrate.value[3].value);
-  const currentMaxFramerate = ref(maxFramerate.value[2].value);
-  const currentResolutionRatio = ref(resolutionRatio.value[3].value);
-  const roomId = ref('');
-  const anchorStream = ref<MediaStream>();
-  const userStream = ref<MediaStream>();
-
-  function updateWebRtcRemoteDeskConfig(data: {
-    roomId;
-    anchorStream;
-    userStream?;
-  }) {
-    roomId.value = data.roomId;
-    anchorStream.value = data.anchorStream;
-    userStream.value = data.userStream;
-  }
-
-  const webRtcRemoteDesk = {
-    newWebRtc: (data: {
-      sender: string;
-      receiver: string;
-      videoEl: HTMLVideoElement;
-    }) => {
-      return new WebRTCClass({
-        maxBitrate: currentMaxBitrate.value,
-        maxFramerate: currentMaxFramerate.value,
-        resolutionRatio: currentResolutionRatio.value,
-        isSRS: false,
-        roomId: roomId.value,
-        videoEl: data.videoEl,
-        sender: data.sender,
-        receiver: data.receiver,
-      });
-    },
-    /**
-     * 主播发offer给观众
-     */
-    sendOffer: async ({
-      sender,
-      receiver,
-    }: {
-      sender: string;
-      receiver: string;
-    }) => {
-      console.log('remoteDesk的sendOffer', {
-        sender,
-        receiver,
-      });
-      try {
-        const ws = networkStore.wsMap.get(roomId.value);
-        if (!ws) return;
-        const rtc = networkStore.rtcMap.get(receiver);
-        if (rtc) {
-          anchorStream.value?.getTracks().forEach((track) => {
-            if (anchorStream.value) {
-              console.log('remoteDesk的sendOffer插入track', track.kind, track);
-              rtc.peerConnection?.addTrack(track, anchorStream.value);
-            }
-          });
-          const offerSdp = await rtc.createOffer();
-          if (!offerSdp) {
-            console.error('remoteDesk的offerSdp为空');
-            return;
-          }
-          await rtc.setLocalDescription(offerSdp!);
-          networkStore.wsMap.get(roomId.value)?.send<WsOfferType['data']>({
-            requestId: getRandomString(8),
-            msgType: WsMsgTypeEnum.nativeWebRtcOffer,
-            data: {
-              isRemoteDesk: true,
-              live_room: appStore.liveRoomInfo!,
-              // @ts-ignore
-              live_room_id: roomId.value,
-              sender,
-              receiver,
-              sdp: offerSdp,
-            },
-          });
-        } else {
-          console.error('rtc不存在');
-        }
-      } catch (error) {
-        console.error('remoteDesk的sendOffer错误');
-        console.log(error);
-      }
-    },
-    /**
-     * 观众收到主播的offer，观众回复主播answer
-     */
-    sendAnswer: async ({
-      sdp,
-      sender,
-      receiver,
-    }: {
-      sdp: RTCSessionDescriptionInit;
-      sender: string;
-      receiver: string;
-    }) => {
-      console.log('remoteDesk的sendAnswer', {
-        sender,
-        receiver,
-      });
-      try {
-        const ws = networkStore.wsMap.get(roomId.value);
-        if (!ws) return;
-        const rtc = networkStore.rtcMap.get(receiver);
-        if (rtc) {
-          await rtc.setRemoteDescription(sdp);
-          userStream.value?.getTracks().forEach((track) => {
-            if (userStream.value) {
-              console.log('remoteDesk的sendAnswer插入track');
-              rtc.peerConnection?.addTrack(track, userStream.value);
-            }
-          });
-          const answerSdp = await rtc.createAnswer();
-          if (!answerSdp) {
-            console.error('remoteDesk的answerSdp为空');
-            return;
-          }
-          await rtc.setLocalDescription(answerSdp);
-          networkStore.wsMap.get(roomId.value)?.send<WsAnswerType['data']>({
-            requestId: getRandomString(8),
-            msgType: WsMsgTypeEnum.nativeWebRtcAnswer,
-            data: {
-              live_room_id: Number(roomId.value),
-              sender,
-              receiver,
-              sdp: answerSdp,
-            },
-          });
-        } else {
-          console.error('rtc不存在');
-        }
-      } catch (error) {
-        console.error('remoteDesk的sendAnswer错误');
-        console.log(error);
-      }
-    },
-  };
-
-  return { updateWebRtcRemoteDeskConfig, webRtcRemoteDesk };
-};

src/hooks/webrtc/rtmpToRtc.ts

@@ -78,12 +78,6 @@ export const useWebRtcRtmpToRtc = () => {
             return;
           }
           await rtc.setLocalDescription(offerSdp!);
-          const liveRooms = userStore.userInfo?.live_rooms;
-          const myLiveRoom = liveRooms?.[0];
-          if (!myLiveRoom) {
-            window.$message.error('你没有开通直播间');
-            return;
-          }
           const answerRes = await fetchRtcV1Whep({
             sdp: offerSdp.sdp!,
             stream: `roomId___${roomId.value}`,

src/store/app/index.ts

@@ -11,14 +11,9 @@ import { mobileRouterName } from '@/router';
 import { ILiveRoom } from '@/types/ILiveRoom';
 
 export type AppRootState = {
+  pageIsClick: boolean;
   useGoogleAd: boolean;
   areaList: IArea[];
-  remoteDesk: {
-    sender: string;
-    startRemoteDesk: boolean;
-    isRemoteing?: boolean;
-    isClose?: boolean;
-  };
   playing: boolean;
   videoRatio: number;
   normalVolume: number;
@@ -79,14 +74,9 @@ export type AppRootState = {
 export const useAppStore = defineStore('app', {
   state: (): AppRootState => {
     return {
+      pageIsClick: false,
       useGoogleAd: false,
       areaList: [],
-      remoteDesk: {
-        startRemoteDesk: false,
-        sender: '',
-        isRemoteing: false,
-        isClose: undefined,
-      },
       playing: false,
       videoRatio: 16 / 9,
       videoControls: {

src/types/websocket.ts

@@ -65,13 +65,6 @@ export enum WsMsgTypeEnum {
   srsAnswer = 'srsAnswer',
   srsCandidate = 'srsCandidate',
 
-  startRemoteDesk = 'startRemoteDesk',
-  remoteDeskBehavior = 'remoteDeskBehavior',
-
-  remoteDeskOffer = 'remoteDeskOffer',
-  remoteDeskAnswer = 'remoteDeskAnswer',
-  remoteDeskCandidate = 'remoteDeskCandidate',
-
   nativeWebRtcOffer = 'nativeWebRtcOffer',
   nativeWebRtcAnswer = 'nativeWebRtcAnswer',
   nativeWebRtcCandidate = 'nativeWebRtcCandidate',
@@ -243,7 +236,6 @@ export type WsJoinType = IWsFormat<{
   live_room_id: number;
   live_room?: ILiveRoom;
   anchor_info?: IUser;
-  isRemoteDesk?: boolean;
   isBilibili?: boolean;
   socket_list?: string[];
 }>;
@@ -287,7 +279,6 @@ export type WsOfferType = IWsFormat<{
   sender: string;
   receiver: string;
   live_room_id: number;
-  isRemoteDesk?: boolean;
 }>;
 
 export type WsAnswerType = IWsFormat<{

src/utils/network/webRTC.ts

@@ -1,7 +1,6 @@
 import { getRandomString } from 'billd-utils';
 
 import { prodDomain } from '@/spec-config';
-import { useAppStore } from '@/store/app';
 import { useNetworkStore } from '@/store/network';
 import { WsCandidateType, WsMsgTypeEnum } from '@/types/websocket';
 
@@ -558,10 +557,6 @@ export class WebRTCClass {
       this.peerConnection = null;
       this.dataChannel = null;
       this.videoEl.remove();
-      const appStore = useAppStore();
-      appStore.remoteDesk.isClose = true;
-      appStore.remoteDesk.isRemoteing = false;
-      appStore.remoteDesk.startRemoteDesk = false;
     } catch (error) {
       this.prettierLog({ msg: '手动关闭webrtc连接失败', type: 'error' });
       console.error(error);

src/views/pull/index.vue

@@ -617,7 +617,6 @@ onMounted(async () => {
   } else {
     initWs({
       roomId: roomId.value,
-      isRemoteDesk: false,
       isBilibili: true,
       isAnchor: false,
     });

src/views/push/index.vue

@@ -1683,7 +1683,7 @@ async function handleCache() {
     obj.type = item.type;
     obj.hidden = item.hidden;
     obj.mediaName = item.mediaName;
-    obj.muted = item.muted;
+    obj.muted = true;
     obj.volume = item.volume;
     obj.rect = item.rect;
     obj.scaleInfo = item.scaleInfo;
@@ -1695,7 +1695,7 @@ async function handleCache() {
         const { videoEl, stream, canvasDom } = await autoCreateVideo({
           file,
           id: obj.id,
-          muted: item.muted,
+          muted: true,
           rect: item.rect,
           scaleInfo: item.scaleInfo,
         });