update

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

@@ -19,7 +19,9 @@ import scene from './scene.png';
 import show from './show@2x.png';
 import music_off from './music_off.png';
 import music_on from './music_on.png';
-import video_no from './video_no.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';
 const icons = {
   arrow,
   arrows,
@@ -42,6 +44,8 @@ const icons = {
   show,
   music_off,
   music_on,
-  video_no,
+  video_on,
+  video_off,
+  video_disable,
 };
 export { icons };

src/components/chatRoom/camera copy.vue.bk

@@ -1,97 +0,0 @@
-<template>
-  <div class="avatar-video" ref="refVideo"> </div>
-</template>
-<script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, unref, watch } from 'vue';
-  import { computed } from 'vue';
-  import { useRtcSdk } from '/@/hooks/useTRTC';
-  import { useRtcStore } from '/@/store/modules/rtc';
-
-  const rtcStore = useRtcStore();
-  //   const destination = computed(() => (rtcStore.isLeader ? '.local' : '.remote'));
-  const isPublished = computed(() => rtcStore.isPublished);
-  const remoteStreams = computed(() => rtcStore.remoteStreams);
-  const refVideo = ref(null);
-  const initHostCam = ref(false);
-  const initCustomCam = ref(false);
-
-  const handleCapVideoElement = (event) => {
-    const { localStream } = useRtcSdk();
-    const steamId = localStream.getId();
-    initHostCam.value = true;
-    if (event.type === 'video' && event.state === 'PLAYING') {
-      const localVideo = document.getElementById(`video_${steamId}`);
-      const avatarVideo = document.querySelector('.avatar-video');
-      avatarVideo && localVideo && avatarVideo.append(localVideo);
-      console.log('localVideo', `video_${steamId}`, localVideo);
-    }
-  };
-  const handleCapVideoRemoteElement = () => {
-    const remoteStream = unref(remoteStreams)[0];
-    const steamId = remoteStream.getId();
-    initCustomCam.value = true;
-    const remoteVideo = document.getElementById(`video_${steamId}`);
-    const avatarVideo = document.querySelector('.avatar-video');
-    const preVideo = document.querySelector('.avatar-video video');
-    preVideo && avatarVideo?.removeChild(preVideo);
-    avatarVideo && remoteVideo && avatarVideo.append(remoteVideo);
-    console.log('remoteVideo', `video_${steamId}`, remoteVideo);
-  };
-  onUnmounted(() => {
-    const { localStream } = useRtcSdk();
-    localStream && localStream.off('player-state-changed', handleCapVideoElement);
-  });
-
-  onMounted(() => {
-    watch(
-      () => isPublished,
-      (val) => {
-        if (unref(val) && !unref(initHostCam)) {
-          if (rtcStore.isLeader) {
-            const { localStream } = useRtcSdk();
-            const hasVideo = localStream.hasVideo();
-            if (hasVideo) {
-              localStream.on('player-state-changed', handleCapVideoElement);
-            }
-          } else {
-            console.log('gemer', remoteStreams);
-          }
-        }
-      },
-      {
-        deep: true,
-      },
-    );
-    watch(
-      () => remoteStreams,
-      (val) => {
-        if (unref(val)?.length) {
-          if (!rtcStore.isLeader) {
-            const remoteStreams = unref(val)[0];
-            const hasVideo = remoteStreams.hasVideo();
-            if (hasVideo) {
-              setTimeout(() => {
-                handleCapVideoRemoteElement();
-              }, 2000);
-            }
-          }
-        }
-      },
-      {
-        deep: true,
-      },
-    );
-  });
-</script>
-<style scoped lang="scss">
-  .avatar-video {
-    width: 1.94rem;
-    height: 1.94rem;
-    position: fixed;
-    top: 0.69rem;
-    left: 0.53rem;
-    overflow: hidden;
-    z-index: 10000;
-    border-radius: 50%;
-  }
-</style>

src/components/chatRoom/camera.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class="avatar-video">
-    <teleport :to="destination" v-if="isPublished">
-      <div>video</div>
-    </teleport>
-  </div>
+  <teleport to=".local" v-if="isPublished && isLeader">
+    <div class="micBox">
+      <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
+      <i class="speak_mic_off" v-else></i>
+    </div>
+  </teleport>
+  <teleport to=".remote" v-if="!isLeader && remoteStreams.length > 0">
+    <div class="micBox">
+      <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
+      <i class="speak_mic_off" v-else></i>
+    </div>
+  </teleport>
 </template>
 <script lang="ts" setup>
   //   import { ref } from 'vue';
-  import { computed } from 'vue';
+  import { computed, onMounted } from 'vue';
+  // import { useSocket } from '/@/hooks/userSocket';
+
   //   import { useRtcSdk } from '/@/hooks/useTRTC';
   import { useRtcStore } from '/@/store/modules/rtc';
 
   const rtcStore = useRtcStore();
-  const destination = computed(() => (rtcStore.isLeader ? '.local' : '.remote'));
+  // const destination = computed(() => (rtcStore.isLeader ? '.local' : '.remote'));
   const isPublished = computed(() => rtcStore.isPublished);
-  //   const remoteStreams = computed(() => rtcStore.remoteStreams);
-  //   const refVideo = ref(null);
-  //   const initHostCam = ref(false);
-  //   const initCustomCam = ref(false);
+  const isLeader = computed(() => rtcStore.isLeader);
+  const remoteStreams = computed(() => rtcStore.remoteStreams);
+  const roomLeader = computed(() => rtcStore.getRoomLeader());
+  // const hasVideo = computed(() => rtcStore.videoDeviceId.length > 0);
+  onMounted(() => {});
 </script>
 <style lang="scss">
   .local,
@@ -30,5 +40,44 @@
     overflow: hidden;
     z-index: 10000;
     border-radius: 50%;
+    .micBox {
+      width: 100%;
+      height: 0.44rem;
+      background: rgba(0, 0, 0, 0.3);
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .speak_mic {
+        display: block;
+        background-size: 720px auto;
+        width: 12px;
+        height: 12px;
+        background-image: url(/@/assets/images/rtcLive/speed.png);
+        // width: 0.69rem;
+        // height: 0.69rem;
+        animation: myAnimation 3s steps(59) infinite;
+      }
+      .speak_mic_off {
+        display: block;
+        background-size: center center;
+        background-size: contain;
+        width: 12px;
+        height: 12px;
+        background-image: url(/@/assets/images/rtcLive/scene_mic_off@2x.png);
+      }
+    }
+  }
+  @keyframes myAnimation {
+    0% {
+      background-position: 0px 0px;
+    }
+
+    100% {
+      background-position: -708px 0px;
+    }
   }
 </style>

src/components/chatRoom/controls/actions.ts

@@ -93,7 +93,6 @@ export function handleActions({
 
     case 'room-valid-time':
       handleRoomValidTime(data);
-
     default:
       break;
   }

src/components/chatRoom/controls/join.ts

@@ -19,7 +19,7 @@ export function handleJoin(data: any) {
   const rtcStore = useRtcStore();
 
   // const userExsit = rtcStore.checkUserInMemberList(rtcStore.userId);
-  banLaterEnterer(members, user);
+  // banLaterEnterer(members, user);
   enterRoom();
   rtcStore.setIsJoined(true);
   consolaGlobalInstance.info({

src/components/chatRoom/roomControl.ts

@@ -17,7 +17,6 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
         nickname: rtcStore.nickname,
       };
       socket.emit('join', params);
-      rtcStore.setIsJoined(true);
     });
 
     socket.on('action', (data: any) => {

src/hooks/useTRTC.ts

@@ -99,9 +99,9 @@ async function createRTCSocket(): Promise<void> {
   }
 }
 async function handleJoin() {
+  const rtcStore = useRtcStore();
   try {
     // let res = await apis.getSign({ userId: store.getters["rtc/userId"] });
-    const rtcStore = useRtcStore();
     localClient = TRTC.createClient({
       mode: 'rtc',
       sdkAppId: parseInt(rtcStore.sdkAppId, 10),
@@ -113,16 +113,13 @@ async function handleJoin() {
     installEventHandlers();
 
     await localClient.join({ roomId: rtcStore.roomId });
-    // store.commit("rtc/setIsJoined", true);
-    rtcStore.setIsJoined(true);
-    // inviteLink.value = store.commit("rtc/createShareLink");
   } catch (error) {
     console.error(error, 'error-----------');
   }
 
   await createLocalStream();
   await handlePublish();
-  localStream
+  await localStream
     .play('local')
     .then(() => {
       consola.info({
@@ -131,8 +128,9 @@ async function handleJoin() {
       });
     })
     .catch((error) => {
-      console.log(localStream, error);
+      console.log('play-local-error', error);
     });
+  rtcStore.setIsRTCJoined(true);
 
   localStream.on('error', (error) => {
     if (error.getCode() === 0x4043) {
@@ -380,7 +378,7 @@ async function handleStreamSubscribed(event) {
         tag: 'rtc:audio',
       });
       await remoteStream.play(remoteId);
-    } catch (error) {}
+    } catch (error) { }
   }, 200);
 }
 

src/store/modules/rtc.ts

@@ -20,6 +20,7 @@ interface RtcState {
   microphoneList: MediaDeviceInfo[];
   logs: any[];
   isJoined: boolean;
+  isRTCJoined: boolean;
   isPublished: boolean;
   isShared: boolean;
   remoteStreams: RemoteStream[];
@@ -110,6 +111,7 @@ export const useRtcStore = defineStore({
     microphoneList: [],
     logs: [],
     isJoined: false,
+    isRTCJoined: false,
     isPublished: false,
     isShared: false,
     remoteStreams: [],
@@ -166,6 +168,9 @@ export const useRtcStore = defineStore({
     getSelfRoomStatus() {
       return () => this.memberList.find((item) => item.UserId === this.userId);
     },
+    getRoomLeader() {
+      return () => this.memberList.find((item) => item.Role === 'leader');
+    },
   },
   actions: {
     showBaseDialog(dialog: BaseDialog, callback?: () => void): void {
@@ -235,6 +240,9 @@ export const useRtcStore = defineStore({
       this.isJoined = payload;
       console.log('setIsJoined', payload);
     },
+    setIsRTCJoined(payload: boolean) {
+      this.isRTCJoined = payload;
+    },
     setIsPublished(payload: boolean) {
       this.isPublished = payload;
     },