feat: 优化

src/hooks/use-pull.ts

@@ -19,6 +19,7 @@ import {
   WebSocketClass,
   WsConnectStatusEnum,
   WsMsgTypeEnum,
+  prettierReceiveWebsocket,
 } from '@/network/webSocket';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
@@ -392,7 +393,7 @@ export function usePull({
     if (!instance?.socketIo) return;
     // websocket连接成功
     instance.socketIo.on(WsConnectStatusEnum.connect, () => {
-      console.log('【websocket】websocket连接成功');
+      prettierReceiveWebsocket(WsConnectStatusEnum.connect);
       handleHeartbeat();
       if (!instance) return;
       instance.status = WsConnectStatusEnum.connect;
@@ -402,7 +403,7 @@ export function usePull({
 
     // websocket连接断开
     instance.socketIo.on(WsConnectStatusEnum.disconnect, () => {
-      console.log('【websocket】websocket连接断开');
+      prettierReceiveWebsocket(WsConnectStatusEnum.disconnect);
       if (!instance) return;
       instance.status = WsConnectStatusEnum.disconnect;
       instance.update();
@@ -410,8 +411,8 @@ export function usePull({
 
     // 收到offer
     instance.socketIo.on(WsMsgTypeEnum.offer, async (data: IOffer) => {
-      console.warn(
-        '【websocket】收到offer',
+      prettierReceiveWebsocket(
+        WsMsgTypeEnum.offer,
         `发送者：${data.data.sender}，接收者：${data.data.receiver}`,
         data
       );
@@ -451,7 +452,11 @@ export function usePull({
 
     // 收到answer
     instance.socketIo.on(WsMsgTypeEnum.answer, async (data: IOffer) => {
-      console.warn('【websocket】收到answer', data);
+      prettierReceiveWebsocket(
+        WsMsgTypeEnum.answer,
+        `发送者：${data.data.sender}，接收者：${data.data.receiver}`,
+        data
+      );
       if (isSRS) return;
       if (!instance) return;
       const rtc = networkStore.getRtcMap(`${roomId.value}___${data.socketId}`);
@@ -468,7 +473,11 @@ export function usePull({
 
     // 收到candidate
     instance.socketIo.on(WsMsgTypeEnum.candidate, (data: ICandidate) => {
-      console.warn('【websocket】收到candidate', data);
+      prettierReceiveWebsocket(
+        WsMsgTypeEnum.candidate,
+        `发送者：${data.data.sender}，接收者：${data.data.receiver}`,
+        data
+      );
       if (isSRS) return;
       if (!instance) return;
       const rtc = networkStore.getRtcMap(`${roomId.value}___${data.socketId}`);
@@ -493,24 +502,24 @@ export function usePull({
       }
     });
 
-    // 当前所有在线用户
+    // 管理员正在直播
     instance.socketIo.on(WsMsgTypeEnum.roomLiveing, (data: IAdminIn) => {
-      console.log('【websocket】收到管理员正在直播', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.roomLiveing, data);
       if (isSRS && !isFlv) {
         startNewWebRtc({});
       }
     });
 
-    // 当前所有在线用户
+    // 管理员不在直播
     instance.socketIo.on(WsMsgTypeEnum.roomNoLive, (data: IAdminIn) => {
-      console.log('【websocket】收到管理员不在直播', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.roomNoLive, data);
       roomNoLive.value = true;
       closeRtc();
     });
 
     // 当前所有在线用户
     instance.socketIo.on(WsMsgTypeEnum.liveUser, (data) => {
-      console.log('【websocket】当前所有在线用户', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.liveUser, data);
       if (!instance) return;
       liveUserList.value = data.map((item) => ({
         avatar: 'red',
@@ -521,7 +530,7 @@ export function usePull({
 
     // 收到用户发送消息
     instance.socketIo.on(WsMsgTypeEnum.message, (data) => {
-      console.log('【websocket】收到用户发送消息', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.message, data);
       if (!instance) return;
       const danmu: IDanmu = {
         msgType: DanmuMsgTypeEnum.danmu,
@@ -534,7 +543,7 @@ export function usePull({
 
     // 用户加入房间
     instance.socketIo.on(WsMsgTypeEnum.joined, (data) => {
-      console.log('【websocket】用户加入房间完成', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.joined, data);
       roomName.value = data.data.roomName;
       track.audio = data.data.track_audio;
       track.video = data.data.track_video;
@@ -548,7 +557,7 @@ export function usePull({
 
     // 其他用户加入房间
     instance.socketIo.on(WsMsgTypeEnum.otherJoin, (data) => {
-      console.log('【websocket】其他用户加入房间', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.otherJoin, data);
       const danmu: IDanmu = {
         msgType: DanmuMsgTypeEnum.otherJoin,
         socketId: data.data.socketId,
@@ -561,16 +570,17 @@ export function usePull({
 
     // 用户离开房间
     instance.socketIo.on(WsMsgTypeEnum.leave, (data) => {
-      console.log('【websocket】用户离开房间', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.leave, data);
       if (!instance) return;
-      instance.socketIo?.emit(WsMsgTypeEnum.leave, {
-        roomId: instance.roomId,
+      instance.send({
+        msgType: WsMsgTypeEnum.leave,
+        data: { roomId: instance.roomId },
       });
     });
 
     // 用户离开房间完成
     instance.socketIo.on(WsMsgTypeEnum.leaved, (data) => {
-      console.log('【websocket】用户离开房间完成', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.leaved, data);
       if (!instance) return;
       const res = liveUserList.value.filter(
         (item) => item.socketId !== data.socketId

src/hooks/use-push.ts

@@ -19,6 +19,7 @@ import {
   WebSocketClass,
   WsConnectStatusEnum,
   WsMsgTypeEnum,
+  prettierReceiveWebsocket,
 } from '@/network/webSocket';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
@@ -111,9 +112,6 @@ export function usePush({
     });
     ws.update();
     initReceive();
-    if (isSRS) {
-      sendJoin();
-    }
   }
 
   /** 原生的webrtc时，receiver必传 */
@@ -290,18 +288,16 @@ export function usePush({
     if (!instance?.socketIo) return;
     // websocket连接成功
     instance.socketIo.on(WsConnectStatusEnum.connect, () => {
-      console.log('【websocket】websocket连接成功', instance.socketIo?.id);
+      prettierReceiveWebsocket(WsConnectStatusEnum.connect);
       if (!instance) return;
       instance.status = WsConnectStatusEnum.connect;
       instance.update();
-      if (!isSRS) {
-        sendJoin();
-      }
+      sendJoin();
     });
 
     // websocket连接断开
     instance.socketIo.on(WsConnectStatusEnum.disconnect, () => {
-      console.log('【websocket】websocket连接断开', instance);
+      prettierReceiveWebsocket(WsConnectStatusEnum.disconnect, instance);
       if (!instance) return;
       instance.status = WsConnectStatusEnum.disconnect;
       instance.update();
@@ -309,8 +305,8 @@ export function usePush({
 
     // 收到offer
     instance.socketIo.on(WsMsgTypeEnum.offer, (data: IOffer) => {
-      console.warn(
-        '【websocket】收到offer',
+      prettierReceiveWebsocket(
+        WsMsgTypeEnum.offer,
         `发送者：${data.data.sender}，接收者：${data.data.receiver}`,
         data
       );
@@ -346,7 +342,11 @@ export function usePush({
 
     // 收到answer
     instance.socketIo.on(WsMsgTypeEnum.answer, async (data: IOffer) => {
-      console.warn('【websocket】收到answer', data);
+      prettierReceiveWebsocket(
+        WsMsgTypeEnum.answer,
+        `发送者：${data.data.sender}，接收者：${data.data.receiver}`,
+        data
+      );
       if (isSRS) return;
       if (isDone.value) return;
       if (!instance) return;
@@ -364,7 +364,11 @@ export function usePush({
 
     // 收到candidate
     instance.socketIo.on(WsMsgTypeEnum.candidate, (data: ICandidate) => {
-      console.warn('【websocket】收到candidate', data);
+      prettierReceiveWebsocket(
+        WsMsgTypeEnum.candidate,
+        `发送者：${data.data.sender}，接收者：${data.data.receiver}`,
+        data
+      );
       if (isSRS) return;
       if (isDone.value) return;
       if (!instance) return;
@@ -390,20 +394,19 @@ export function usePush({
       }
     });
 
-    // 当前所有在线用户
+    // 管理员正在直播
     instance.socketIo.on(WsMsgTypeEnum.roomLiveing, (data: IAdminIn) => {
-      console.log('【websocket】收到管理员正在直播', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.roomLiveing, data);
     });
 
     // 当前所有在线用户
-    instance.socketIo.on(WsMsgTypeEnum.liveUser, () => {
-      console.log('【websocket】当前所有在线用户');
-      if (!instance) return;
+    instance.socketIo.on(WsMsgTypeEnum.liveUser, (data) => {
+      prettierReceiveWebsocket(WsMsgTypeEnum.liveUser, data);
     });
 
     // 收到用户发送消息
     instance.socketIo.on(WsMsgTypeEnum.message, (data) => {
-      console.log('【websocket】收到用户发送消息', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.message, data);
       if (!instance) return;
       damuList.value.push({
         socketId: data.socketId,
@@ -414,7 +417,7 @@ export function usePush({
 
     // 用户加入房间完成
     instance.socketIo.on(WsMsgTypeEnum.joined, (data: IJoin) => {
-      console.log('【websocket】用户加入房间完成', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.joined, data);
       handleHeartbeat(data.data.liveId!);
       joined.value = true;
       liveUserList.value.push({
@@ -429,7 +432,7 @@ export function usePush({
 
     // 其他用户加入房间
     instance.socketIo.on(WsMsgTypeEnum.otherJoin, (data) => {
-      console.log('【websocket】其他用户加入房间', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.otherJoin, data);
       liveUserList.value.push({
         socketId: data.data.socketId,
       });
@@ -447,16 +450,17 @@ export function usePush({
 
     // 用户离开房间
     instance.socketIo.on(WsMsgTypeEnum.leave, (data) => {
-      console.log('【websocket】用户离开房间', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.leave, data);
       if (!instance) return;
-      instance.socketIo?.emit(WsMsgTypeEnum.leave, {
-        roomId: instance.roomId,
+      instance.send({
+        msgType: WsMsgTypeEnum.leave,
+        data: { roomId: instance.roomId },
       });
     });
 
     // 用户离开房间完成
     instance.socketIo.on(WsMsgTypeEnum.leaved, (data) => {
-      console.log('【websocket】用户离开房间完成', data);
+      prettierReceiveWebsocket(WsMsgTypeEnum.leaved, data);
       const res = liveUserList.value.filter(
         (item) => item.socketId !== data.socketId
       );

src/interface.ts

@@ -54,8 +54,6 @@ export enum liveTypeEnum {
   srsFlvPull = 'srsFlvPull',
   srsPush = 'srsPush',
   webrtcPush = 'webrtcPush',
-  pushMeeting = 'pushMeeting',
-  pullMeeting = 'pullMeeting',
 }
 
 export interface BilldHtmlWebpackPluginLog {

src/layout/head/index.vue

@@ -182,10 +182,6 @@ const options = ref([
     label: 'srs-webrtc开播',
     key: liveTypeEnum.srsPush,
   },
-  {
-    label: 'webrtc多人会议',
-    key: liveTypeEnum.pushMeeting,
-  },
 ]);
 
 onMounted(() => {
@@ -205,12 +201,6 @@ function handlePushSelect(key) {
       query: { liveType: key },
     });
     openToTarget(url.href);
-  } else {
-    const url = router.resolve({
-      name: routerName.pushMeeting,
-    });
-    openToTarget(url.href);
-    window.$message.info('敬请期待！');
   }
 }
 

src/network/webRtc.ts

@@ -66,8 +66,6 @@ export class WebRTCClass {
   peerConnection: RTCPeerConnection | null = null;
   dataChannel: RTCDataChannel | null = null;
 
-  candidateFlag = false;
-
   sender?: RTCRtpTransceiver;
 
   getStatsSetIntervalDelay = 1000;
@@ -488,9 +486,8 @@ export class WebRTCClass {
       );
       this.rtcStatus.icecandidate = true;
       this.update();
-      if (event.candidate && !this.candidateFlag) {
+      if (event.candidate) {
         const networkStore = useNetworkStore();
-        this.candidateFlag = true;
         this.update();
         console.log('准备发送candidate', event.candidate.candidate);
         const roomId = this.roomId.split('___')[0];

src/network/webSocket.ts

@@ -53,6 +53,10 @@ export enum WsMsgTypeEnum {
   candidate = 'candidate',
 }
 
+export function prettierReceiveWebsocket(...arg) {
+  console.warn('【websocket】收到消息', ...arg);
+}
+
 export class WebSocketClass {
   socketIo: Socket | null = null;
   status: WsConnectStatusEnum = WsConnectStatusEnum.disconnect;
@@ -84,7 +88,7 @@ export class WebSocketClass {
       );
       return;
     }
-    console.log('【websocket】发送websocket消息', msgType, data);
+    console.warn('【websocket】发送消息', msgType, data);
     this.socketIo?.emit(msgType, {
       roomId: this.roomId,
       socketId: this.socketIo.id,
@@ -104,7 +108,4 @@ export class WebSocketClass {
     console.warn('手动关闭websocket连接', this.socketIo?.id);
     this.socketIo?.close();
   };
-
-  // 连接websocket
-  connect = () => {};
 }

src/router/index.ts

@@ -15,8 +15,6 @@ export const routerName = {
 
   pull: 'pull',
   push: 'push',
-  pushMeeting: 'pushMeeting',
-  pullMeeting: 'pullMeeting',
 };
 
 // 默认路由
@@ -60,16 +58,6 @@ export const defaultRoutes: RouteRecordRaw[] = [
         path: '/push',
         component: () => import('@/views/push/index.vue'),
       },
-      {
-        name: routerName.pushMeeting,
-        path: '/meeting',
-        component: () => import('@/views/meeting/index.vue'),
-      },
-      {
-        name: routerName.pullMeeting,
-        path: '/meeting/:roomId',
-        component: () => import('@/views/meeting/roomId.vue'),
-      },
     ],
   },
   {

src/views/meeting/index.vue

@@ -1,488 +0,0 @@
-<template>
-  <div class="webrtc-push-wrap">
-    <div
-      ref="topRef"
-      class="left"
-    >
-      <div
-        ref="containerRef"
-        class="container"
-      >
-        <div class="video-wrap">
-          <video
-            id="localVideo"
-            ref="localVideoRef"
-            autoplay
-            webkit-playsinline="true"
-            playsinline
-            x-webkit-airplay="allow"
-            x5-video-player-type="h5"
-            x5-video-player-fullscreen="true"
-            x5-video-orientation="portraint"
-            muted
-          ></video>
-          <div
-            v-if="currMediaTypeList.length > 0"
-            class="controls"
-          >
-            <VideoControls></VideoControls>
-          </div>
-          <div
-            v-if="!currMediaTypeList || currMediaTypeList.length <= 0"
-            class="add-wrap"
-          >
-            <n-space>
-              <n-button
-                class="item"
-                @click="startGetUserMedia"
-              >
-                摄像头
-              </n-button>
-              <n-button
-                class="item"
-                @click="startGetDisplayMedia"
-              >
-                窗口
-              </n-button>
-            </n-space>
-          </div>
-        </div>
-
-        <div class="sidebar">
-          <div class="title">在线人员</div>
-          <div
-            v-for="(item, index) in sidebarList"
-            :key="index"
-            class="item"
-          >
-            <video
-              :ref="(el) => (remoteVideoRef[item.socketId] = el)"
-              autoplay
-              webkit-playsinline="true"
-              playsinline
-              x-webkit-airplay="allow"
-              x5-video-player-type="h5"
-              x5-video-player-fullscreen="true"
-              x5-video-orientation="portraint"
-              muted
-            ></video>
-          </div>
-        </div>
-      </div>
-
-      <div
-        ref="bottomRef"
-        class="room-control"
-      >
-        <div class="info">
-          <div
-            class="avatar"
-            :style="{ backgroundImage: `url(${userStore.userInfo?.avatar})` }"
-          ></div>
-          <div class="detail">
-            <div class="top">
-              <n-input-group>
-                <n-input
-                  v-model:value="roomName"
-                  size="small"
-                  placeholder="输入房间名"
-                  :style="{ width: '50%' }"
-                  :disabled="disabled"
-                />
-                <n-button
-                  size="small"
-                  type="primary"
-                  :disabled="disabled"
-                  @click="confirmRoomName"
-                >
-                  确定
-                </n-button>
-              </n-input-group>
-            </div>
-            <div class="bottom">
-              <span>socketId：{{ getSocketId() }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="other">
-          <div class="top">
-            <span class="item">
-              <i class="ico"></i>
-              <span>正在观看人数：{{ liveUserList.length }}</span>
-            </span>
-          </div>
-          <div class="bottom">
-            <n-space>
-              <n-button
-                type="info"
-                size="small"
-                @click="startLive"
-              >
-                开始直播
-              </n-button>
-              <n-button
-                type="info"
-                size="small"
-                @click="endLive"
-              >
-                结束直播
-              </n-button>
-            </n-space>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="right">
-      <div class="resource-card">
-        <div class="title">素材列表</div>
-        <div class="list">
-          <div
-            v-for="(item, index) in currMediaTypeList"
-            :key="index"
-            class="item"
-          >
-            <span class="name">{{ item.txt }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="danmu-card">
-        <div class="title">弹幕互动</div>
-        <div class="list-wrap">
-          <div class="list">
-            <div
-              v-for="(item, index) in damuList"
-              :key="index"
-              class="item"
-            >
-              <template v-if="item.msgType === DanmuMsgTypeEnum.danmu">
-                <span class="name">{{ item.socketId }}：</span>
-                <span class="msg">{{ item.msg }}</span>
-              </template>
-              <template v-else-if="item.msgType === DanmuMsgTypeEnum.otherJoin">
-                <span class="name system">系统通知：</span>
-                <span class="msg">{{ item.socketId }}进入直播！</span>
-              </template>
-              <template
-                v-else-if="item.msgType === DanmuMsgTypeEnum.userLeaved"
-              >
-                <span class="name system">系统通知：</span>
-                <span class="msg">{{ item.socketId }}离开直播！</span>
-              </template>
-            </div>
-          </div>
-        </div>
-        <div class="send-msg">
-          <input
-            v-model="danmuStr"
-            class="ipt"
-            @keydown="keydownDanmu"
-          />
-          <n-button
-            type="info"
-            size="small"
-            @click="sendDanmu"
-          >
-            发送
-          </n-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { usePush } from '@/hooks/use-push';
-import { DanmuMsgTypeEnum, liveTypeEnum } from '@/interface';
-import { useUserStore } from '@/store/user';
-
-const route = useRoute();
-const userStore = useUserStore();
-
-const liveType = route.query.liveType;
-
-const topRef = ref<HTMLDivElement>();
-const bottomRef = ref<HTMLDivElement>();
-const containerRef = ref<HTMLDivElement>();
-const localVideoRef = ref<HTMLVideoElement>();
-const remoteVideoRef = ref<HTMLVideoElement[]>([]);
-
-const {
-  initPush,
-  confirmRoomName,
-  getSocketId,
-  startGetDisplayMedia,
-  startGetUserMedia,
-  startLive,
-  endLive,
-  closeWs,
-  closeRtc,
-  sendDanmu,
-  keydownDanmu,
-  disabled,
-  danmuStr,
-  roomName,
-  damuList,
-  liveUserList,
-  currMediaTypeList,
-  sidebarList,
-} = usePush({
-  localVideoRef,
-  remoteVideoRef,
-  isSRS: liveType === liveTypeEnum.srsPush,
-});
-
-onUnmounted(() => {
-  closeWs();
-  closeRtc();
-});
-
-onMounted(() => {
-  initPush();
-  if (topRef.value && bottomRef.value && containerRef.value) {
-    const res =
-      bottomRef.value.getBoundingClientRect().top -
-      topRef.value.getBoundingClientRect().top;
-    containerRef.value.style.height = `${res}px`;
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.webrtc-push-wrap {
-  margin: 20px auto 0;
-  min-width: $large-width;
-  height: 700px;
-  text-align: center;
-  .left {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    box-sizing: border-box;
-    width: $large-left-width;
-    height: 100%;
-    border-radius: 6px;
-    background-color: white;
-    color: #9499a0;
-    vertical-align: top;
-
-    .container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 100%;
-      background-color: #fff;
-      .video-wrap {
-        position: relative;
-        display: flex;
-        flex: 1;
-        height: 100%;
-        background-color: rgba($color: #000000, $alpha: 0.5);
-        #localVideo {
-          max-width: 100%;
-          max-height: 100%;
-        }
-        .controls {
-          display: none;
-        }
-        &:hover {
-          .controls {
-            display: block;
-          }
-        }
-        .add-wrap {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-          padding: 0 20px;
-          height: 50px;
-          border-radius: 5px;
-          background-color: white;
-          transform: translate(-50%, -50%);
-        }
-      }
-      .sidebar {
-        width: 130px;
-        height: 100%;
-        background-color: rgba($color: #000000, $alpha: 0.3);
-        .title {
-          color: white;
-        }
-        .join {
-          color: white;
-          cursor: pointer;
-        }
-        video {
-          max-width: 100%;
-        }
-      }
-    }
-    .room-control {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      justify-content: space-between;
-      padding: 20px;
-      background-color: papayawhip;
-
-      .info {
-        display: flex;
-        align-items: center;
-
-        .avatar {
-          margin-right: 20px;
-          width: 64px;
-          height: 64px;
-          border-radius: 50%;
-          background-color: skyblue;
-          background-position: center center;
-          background-size: cover;
-          background-repeat: no-repeat;
-        }
-        .detail {
-          display: flex;
-          flex-direction: column;
-          text-align: initial;
-          .top {
-            margin-bottom: 10px;
-            color: #18191c;
-            .btn {
-              margin-left: 10px;
-            }
-          }
-          .bottom {
-            font-size: 14px;
-          }
-        }
-      }
-      .other {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        font-size: 12px;
-        .top {
-          display: flex;
-          align-items: center;
-          .item {
-            display: flex;
-            align-items: center;
-            margin-right: 20px;
-            .ico {
-              display: inline-block;
-              margin-right: 4px;
-              width: 10px;
-              height: 10px;
-              border-radius: 50%;
-              background-color: skyblue;
-            }
-          }
-        }
-        .bottom {
-          margin-top: 10px;
-        }
-      }
-    }
-  }
-  .right {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    margin-left: 10px;
-    width: 240px;
-    height: 100%;
-    border-radius: 6px;
-    background-color: white;
-    color: #9499a0;
-
-    .resource-card {
-      box-sizing: border-box;
-      margin-bottom: 5%;
-      margin-bottom: 10px;
-      padding: 10px;
-      width: 100%;
-      height: 290px;
-      border-radius: 6px;
-      background-color: papayawhip;
-      .title {
-        text-align: initial;
-      }
-      .item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin: 5px 0;
-        font-size: 12px;
-      }
-    }
-    .danmu-card {
-      box-sizing: border-box;
-      padding: 10px;
-      width: 100%;
-      height: 400px;
-      border-radius: 6px;
-      background-color: papayawhip;
-      text-align: initial;
-      .title {
-        margin-bottom: 10px;
-      }
-      .list {
-        margin-bottom: 10px;
-        height: 300px;
-        overflow: scroll;
-        .item {
-          margin-bottom: 10px;
-          font-size: 12px;
-          .name {
-            color: #9499a0;
-          }
-          .msg {
-            color: #61666d;
-          }
-        }
-      }
-
-      .send-msg {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        .ipt {
-          display: block;
-          box-sizing: border-box;
-          margin: 0 auto;
-          margin-right: 10px;
-          padding: 10px;
-          width: 80%;
-          height: 30px;
-          outline: none;
-          border: 1px solid hsla(0, 0%, 60%, 0.2);
-          border-radius: 4px;
-          background-color: #f1f2f3;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-}
-// 屏幕宽度小于$large-width的时候
-@media screen and (max-width: $large-width) {
-  .webrtc-push-wrap {
-    .left {
-      width: $medium-left-width;
-    }
-    .right {
-      .list {
-        .item {
-        }
-      }
-    }
-  }
-}
-</style>

src/views/meeting/roomId.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped></style>

src/views/pull/index.vue

@@ -38,7 +38,10 @@
               <VideoControls></VideoControls>
             </div>
           </div>
-          <div class="sidebar">
+          <div
+            v-if="showJoin"
+            class="sidebar"
+          >
             <div
               v-for="(item, index) in sidebarList"
               :key="index"
@@ -60,7 +63,6 @@
             </div>
 
             <div
-              v-if="showJoin"
               class="join"
               @click="handleJoin()"
             >
@@ -162,7 +164,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { usePull } from '@/hooks/use-pull';
@@ -200,7 +202,6 @@ const {
   liveUserList,
   danmuStr,
   localStream,
-  sender,
   sidebarList,
 } = usePull({
   localVideoRef,
@@ -218,19 +219,19 @@ function handleJoin() {
   });
 }
 
-watch(
-  () => localStream,
-  (newVal) => {
-    // localVideoRef.value!.srcObject = newVal.value;
-  }
-);
-
 onUnmounted(() => {
   closeWs();
   closeRtc();
 });
 
 onMounted(() => {
+  if (
+    [liveTypeEnum.srsFlvPull, liveTypeEnum.srsWebrtcPull].includes(
+      route.query.liveType as liveTypeEnum
+    )
+  ) {
+    showJoin.value = false;
+  }
   if (topRef.value && bottomRef.value && containerRef.value) {
     const res =
       bottomRef.value.getBoundingClientRect().top -