update

.env.development

@@ -4,8 +4,8 @@ VITE_APP_RESOURCE_URL=https://4dkk.4dage.com/
 VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.5.0
-# VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
-VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
+VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
+# VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
 # VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer

index.html

@@ -30,7 +30,7 @@
     <script src="<{BASE_URL}><{VITE_APP_STATIC_DIR}>/static/lib/flv.min.js"></script>
     <script src="<{BASE_URL}><{VITE_APP_STATIC_DIR}>/static/lib/vconsole.js"></script>
     <script src="<{BASE_URL}><{VITE_APP_STATIC_DIR}>/static/lib/swiper/swiper-bundle.min.js"></script>
-    <script src="<{BASE_URL}><{VITE_APP_STATIC_DIR}>/static/lib/socket.io.min.js"></script>
+    <script src="<{BASE_URL}><{VITE_APP_STATIC_DIR}>/static/lib/socket.io.msgpack.min.js"></script>
     <script src="<{BASE_URL}><{VITE_APP_STATIC_DIR}>/static/lib/zmjm.min.js"></script>
     <script src="<{BASE_URL}><{VITE_APP_STATIC_DIR}>/static/lib/jweixin-1.6.0.js"></script>
 

src/components/basic/icon/images/index.ts

@@ -22,6 +22,7 @@ import music_on from './music_on.png';
 import video_on from './video_on@2x.png';
 import video_off from './video_off@2x.png';
 import video_disable from './video_off_50@2x.png';
+import kick_user from './remove@2x.png';
 const icons = {
   arrow,
   arrows,
@@ -47,5 +48,6 @@ const icons = {
   video_on,
   video_off,
   video_disable,
+  kick_user,
 };
 export { icons };

src/components/chatRoom/camera.vue

@@ -56,7 +56,7 @@
   const { muteVideoLeader, globalVideoEnable } = useRtcSdk();
   const hosterhasVideo = computed(() => rtcStore.videoDeviceId?.length > 0);
   const remoteStreams = computed(() => rtcStore.remoteStreams);
-  console.log('hosterhasVideo', hosterhasVideo);
+  console.log('hosterhasVideo', unref(hosterhasVideo));
   onMounted(() => {
     watch(
       () => remoteStreams,

src/components/chatRoom/chatroom.scss

@@ -437,6 +437,11 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            .kick_icon {
+              width: 0.65rem;
+              height: 0.65rem;
+              margin-right: 0.3rem;
+            }
             > div {
               //   width: 0.56rem;
               //   height: 0.56rem;

src/components/chatRoom/index.vue

@@ -227,7 +227,7 @@
   const audioMuted = computed(() => unref(selfRoomStatus)?.IsMuted);
   const { globalVideoEnable } = useRtcSdk();
   const hosterhasVideo = computed(() => rtcStore.videoDeviceId?.length > 0);
-
+  const { isUsingMiniApp } = useMiniApp();
   const { muteVideoLeader } = useRtcSdk();
   let roomCounter = ref(-1);
   let roomCount: NodeJS.Timeout;
@@ -236,6 +236,7 @@
 
   watchEffect(() => {
     console.log('sceneList', sceneList);
+    console.log('isUsingMiniApp', unref(isUsingMiniApp));
   });
   watch(
     () => currentSession,
@@ -527,7 +528,6 @@
   };
 
   const handleCreateShare = () => {
-    const { isUsingMiniApp } = useMiniApp();
     const search = new URLSearchParams();
     search.set('isTour', '0');
     // search.set('vruserId', `user_${Math.floor(Math.random() * 100000000)}`);
@@ -579,15 +579,17 @@
   const handleShowCamera = () => {
     const { localStream, muteVideoLeader } = useRtcSdk();
     const { socket } = useSocket();
-    socket.emit('action', {
-      type: 'sync-camera',
-      data: {
-        show: true,
-        userId: rtcStore.userId,
-      },
-    });
-    muteVideoLeader.value = false;
-    localStream && localStream.unmuteVideo();
+    if (!unref(isUsingMiniApp)) {
+      socket.emit('action', {
+        type: 'sync-camera',
+        data: {
+          show: true,
+          userId: rtcStore.userId,
+        },
+      });
+      localStream && localStream.unmuteVideo();
+      muteVideoLeader.value = false;
+    }
   };
 </script>
 

src/components/chatRoom/memberList.vue

@@ -31,14 +31,8 @@
             </div>
             <div class="button">
               <!-- T人 -->
-              <div
-                class="micBtn"
-                v-if="i?.Role !== 'leader'"
-                :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
-                :wo="i.IsWords"
-                @click="isNativeLeader && userCanKick(i)"
-              ></div>
 
+              <!-- <div class="micBtn remove" @click="isNativeLeader && userCanKick(i)"></div> -->
               <div
                 class="micBtn"
                 v-if="i?.Role !== 'leader'"
@@ -46,6 +40,13 @@
                 :wo="i.IsWords"
                 @click="isNativeLeader && userCanInput(i)"
               ></div>
+
+              <ImageIcon
+                class="kick_icon"
+                v-if="i?.Role !== 'leader'"
+                type="kick_user"
+                @click="isNativeLeader && userCanKick(i)"
+              />
               <!-- mic -->
               <div
                 class="micBtn"
@@ -73,6 +74,7 @@
   import { computed, watchEffect } from 'vue';
   import { useSocket } from '/@/hooks/userSocket';
   import { useI18n } from '/@/hooks/useI18n';
+  import ImageIcon from '/@/components/basic/icon/index.vue';
   // import Dialog from '../basic/dialog';
   const rtcStore = useRtcStore();
   const { t } = useI18n();

src/components/chatRoom/roomControl.ts

@@ -16,6 +16,7 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
         role: rtcStore.role || 'leader',
         avatar: rtcStore.avatar || '',
         nickname: rtcStore.nickname,
+        isClient: false,
       };
       if (rtcStore.role === 'leader') {
         params.roomConfig = {

src/components/chatRoom/roomEvent.ts

@@ -12,6 +12,7 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
         role: rtcStore.role || 'leader',
         avatar: rtcStore.avatar,
         nickname: rtcStore.nickname,
+        isClient: false,
       };
       socket.emit('join', params);
     });

src/hooks/useTRTC.ts

@@ -15,7 +15,7 @@ const muteAudioLeader = ref(false);
 const muteVideoLeader = ref(false);
 const { isUsingMiniApp } = useMiniApp();
 const globalVideoEnable = computed(
-  () => Number(import.meta.env.VITE_ENABLE_VIDEO) === 1 && !unref(isUsingMiniApp),
+  () => Number(import.meta.env.VITE_ENABLE_VIDEO) === 1 && unref(isUsingMiniApp),
 );
 
 export const checkDevice = async () => {

src/store/modules/rtc.ts

@@ -90,6 +90,7 @@ export interface SocketParams {
   nickname: string;
   mode?: string;
   roomConfig?: RoomConfigType;
+  isClient?: boolean;
 }
 
 interface BaseDialog {