udpate

.env

@@ -17,4 +17,4 @@ VITE_APP_APIS_URL=https://testeur.4dkankan.com/
 # VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
 # VITE_TAKE_LOOK_API=https://testeur.4dkankan.com/
 VITE_USE_HTTPS=1
-VITE_PUBLIC_DIR='livestream/'
+VITE_PUBLIC_DIR='/livestream/'

.env.eur

@@ -17,4 +17,4 @@ VITE_APP_APIS_URL=https://testeur.4dkankan.com/
 # VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
 # VITE_TAKE_LOOK_API=https://testeur.4dkankan.com/
 VITE_USE_HTTPS=1
-VITE_PUBLIC_DIR='livestream/'
+VITE_PUBLIC_DIR='/livestream/'

.env.production

@@ -17,4 +17,4 @@ VITE_APP_APIS_URL=https://testeur.4dkankan.com/
 # VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
 # VITE_TAKE_LOOK_API=https://testeur.4dkankan.com/
 VITE_USE_HTTPS=1
-VITE_PUBLIC_DIR='livestream/'
+VITE_PUBLIC_DIR='/livestream/'

src/components/chatRoom/dialog/createdName.vue

@@ -46,6 +46,7 @@
   // import browser from '/@/utils/browser';
   // import Cropper from '@/components/cropper/cropper.vue';
   // Cropper
+  const emit = defineEmits(['closeDialog', 'confirmDialog']);
 
   const userName = ref('');
   const rtcStore = useRtcStore();
@@ -63,7 +64,8 @@
   });
 
   const closeCreated = () => {
-    ifShow.value = false
+    ifShow.value = false;
+    emit('closeDialog');
   };
   const createdConfirm = () => {
     if (unref(userName).length === 0) {
@@ -73,11 +75,12 @@
       rtcStore.setNickName(unref(userName));
       const search = new URLSearchParams(location.search);
       search.set('name', decodeURIComponent(unref(userName)));
-      const replaceUrl = location.origin + location.pathname + search.toString();
+      const replaceUrl = location.origin + location.pathname + '?' + search.toString();
       console.log('replaceUrl', replaceUrl);
       history.replaceState(null, '', replaceUrl);
       Dialog.toast({ content: '保存成功！', type: 'success' });
-      ifShow.value = false
+      ifShow.value = false;
+      emit('confirmDialog');
     }
   };
 </script>

src/components/chatRoom/index.vue

@@ -107,7 +107,7 @@
     @close-dialog="showCloseDialog = false"
     @confirm-dialog="handleCloseRoom"
   />
-  <CreatedName :show="showCreateNameDialog" />
+  <CreatedName :show="showCreateNameDialog" @confirmDialog="handleNameConfirm" />
 </template>
 
 <script lang="ts" setup>
@@ -141,6 +141,7 @@
   // import { storeToRefs } from 'pinia';
   import ShareContainer from './share.vue';
   import CreatedName from './dialog/createdName.vue';
+
   // hook
   const { isDrawing, setDraw, setCloseDraw } = useDraw();
   const { initialRoom } = useRoom();
@@ -171,6 +172,7 @@
   const shareLink = ref<string>('');
   const showCloseDialog = ref(false);
   const showCreateNameDialog = ref(false);
+
   // watchEffect(() => {
 
   // });
@@ -183,6 +185,21 @@
     { deep: true, immediate: true },
   );
   //设置socket 参数
+  const startJoin = () => {
+    consola.info({
+      message: initParams,
+      tag: 'socket参数',
+    });
+    rtcStore.setSocketParams(initParams);
+    const socket = createSocket();
+    initSocketEvent(socket);
+    const { createRTCSocket } = useRtcSdk();
+
+    (async () => {
+      await createRTCSocket();
+    })();
+    initialRoom();
+  };
   const initParams: SocketParams = {
     userId: browser.getURLParam('vruserId') || `user_${Math.floor(Math.random() * 100000000)}`,
     roomId: browser.getURLParam('roomId') || `room_${Math.floor(Math.random() * 100000000)}`,
@@ -191,24 +208,20 @@
     nickname: browser.getURLParam('name'),
     mode: browser.getURLParam('mode'),
   };
-  consola.info({
-    message: initParams,
-    tag: 'socket参数',
-  });
+
   if (initParams.nickname === '') {
-    initParams.nickname = initParams.userId;
     showCreateNameDialog.value = true;
+  } else {
+    startJoin();
   }
-  rtcStore.setSocketParams(initParams);
 
-  const socket = createSocket();
-  initSocketEvent(socket);
-  const { createRTCSocket, handleLeave } = useRtcSdk();
+  const handleNameConfirm = () => {
+    const rtcStore = useRtcStore();
+    initParams.nickname = rtcStore.nickname;
+    console.log('输入后', initParams);
+    startJoin();
+  };
 
-  (async () => {
-    await createRTCSocket();
-  })();
-  initialRoom();
   onMounted(async () => {
     const app = await useApp();
     // app.Connect.follow.start({ follow: !unref(isNativeLeader) });
@@ -221,6 +234,7 @@
     });
   });
   onUnmounted(async () => {
+    const { handleLeave } = useRtcSdk();
     const app = await useApp();
     app.Connect.follow.off('data', leaderSync);
     app.Connect.paint.off('data', leaderPaint);
@@ -230,12 +244,14 @@
   /* method 方法*/
 
   const leaderSync = (data) => {
+    const { socket } = useSocket();
     if (unref(isNativeLeader) && unref(isJoined)) {
       socket.emit('sync', data);
     }
   };
   const leaderPaint = (data) => {
     if (unref(isNativeLeader) && unref(isJoined)) {
+      const { socket } = useSocket();
       const records = getApp().Connect.paint.records;
       canUndo.value = records?.length;
       socket.emit('paint', data);
@@ -253,6 +269,7 @@
   const onDraw = async (status: boolean) => {
     // isBrushes.value = status;
     status && setDraw();
+    const { socket } = useSocket();
     !status && setCloseDraw();
     if (unref(isBrushes)) {
       const app = await useApp();
@@ -282,6 +299,7 @@
     if (text.value == '') {
       return;
     }
+    const { socket } = useSocket();
     let data = {
       role: rtcStore.role,
       mode: rtcStore.mode,
@@ -321,6 +339,7 @@
 
   const handleNoMute = () => {
     const { localStream } = useRtcSdk();
+    const { socket } = useSocket();
     console.log('localStream', localStream);
     rtcStore.unmute();
     localStream.unmuteAudio();
@@ -332,6 +351,7 @@
   };
   const handleMute = () => {
     const { localStream } = useRtcSdk();
+    const { socket } = useSocket();
     console.log('localStream', localStream);
     rtcStore.mute();
     localStream.muteVideo();

src/components/chatRoom/memberList.vue

@@ -11,7 +11,7 @@
           <div class="memberItem" v-for="(i, idx) in data" :key="idx">
             <div class="userMsg">
               <div class="avatar" :class="`${role}`">
-                <img :src="i?.Avatar || defaultAvatar" alt="" />
+                <img :src="i?.Avatar ? decodeURIComponent(i?.Avatar) : defaultAvatar" alt="" />
                 <div class="avatar-crown" v-show="i.Role === 'leader'"></div>
               </div>
               <div class="name">{{ i.Nickname }}</div>

src/store/modules/rtc.ts

@@ -25,7 +25,7 @@ interface RtcState {
   remoteStreams: RemoteStream[];
   // invitedRemoteStreams: any[],
   avatar: Nullable<string>;
-  nickname: Nullable<string>;
+  nickname: string;
   mode: string;
   chatList: ChatContentType[];
   memberList: UserInfoType[];

vite.config.ts

@@ -26,7 +26,7 @@ export default ({ mode }) =>
         strategy: 'default',
         customSplitting: {
           'vue-vendor': ['vue'],
-          'utils': [/src\/utils/]
+          utils: [/src\/utils/],
         },
       }),
       mkcert(),