update

src/components/RTC/PageRtcLive.vue

@@ -29,8 +29,8 @@
           @click="openDialog('dialogShare', shareLink)"
         ></div>
         <div v-if="mode == '2' && role == 'leader'" class="members" @click="openMember"></div>
-        <div v-if="audioDevices.length != 0 && !disableMic" @click="changeMedia('audio', hideMic)" :class="{ mic_off: hideMic }" class="mic_on"></div>
-        <div v-if="audioDevices.length == 0 || disableMic" class="mic_no"></div>
+        <div v-if="!disableMic" @click="handleMuteAduio" :class="{ mic_off: audioMuted }" class="mic_on"></div>
+        <div v-if="disableMic" class="mic_no"></div>
         <div v-if="role == 'leader'" @click="handleMuteVideo" :class="videoMuted ? 'video_no' : 'video_on'"></div>
         <div class="exit" @click="openDialog('dialogIndex')"></div>
       </div>
@@ -139,13 +139,7 @@ let getUrl = (href, queryArr) => {
 };
 
 const connectStatus = ref(0);
-const showPaint = ref(true);
 const isBrushes = ref(false);
-const hideVideo = ref(false);
-const hideVideoBottom = ref(false);
-const hideVideoTop = ref(true);
-const hideMic = ref(true);
-const hideMicTop = ref(true);
 const showInput = ref(false);
 const showMember = ref(false);
 const animateActive = ref(false);
@@ -202,15 +196,18 @@ const setUserWords = (res) => {
 };
 
 const handleMuteVideo = () =>{
-  console.log(111111111111111);
   videoMuted.value=!videoMuted.value
 }
 
+const handleMuteAduio = () =>{
+  audioMuted.value=!audioMuted.value
+}
+
 const setUserMuted = (res) => {
   if (res.userId == user_info.value.UserId) {
     user_info.value.IsMuted = res.muted;
     disableMic.value = res.muted;
-    hideMic.value = res.muted;
+    audioMuted.value = res.muted;
   }
 };
 
@@ -228,7 +225,7 @@ const setUserJoin = async (res) => {
   let name = res.user.Nickname;
   if (res.user.Role == "leader") {
     name = "主持人";
-    console.log(trtccom$.value);
+    console.log(trtccom$.value,'trtccom$.value');
     Dialog.toast({ content: `主持人进入房间` });
 
   }

src/components/RTC/Trtccom.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="trtccom" v-if="show">
     <Device @switchDevice="switchDevice" @canUseDevice="canUseDevice" />
-    <div class="local" id="local" v-if="isJoined&&role=='leader'"></div>
-    <div class="local" :id="clientId" v-if="isJoined&&role=='customer'&&clientId"></div>
+    <div class="local" id="local" v-if="isJoined && role == 'leader'"></div>
+    <div class="local" :id="clientId" v-if="isJoined && role == 'customer' && clientId"></div>
     <div class="videoBox userVideo" v-show="props.videoMuted">
       <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
       <img class="loadingTip" :src="require('@/assets/images/rtcLive/loading@2x.png')" alt="" />
@@ -23,18 +23,14 @@ const emit = defineEmits(["audioMuted", "videoMuted"]);
 const store = useStore();
 
 const show = ref(false);
-const clientId = ref('');
-
+const clientId = ref("");
 
 const role = ref(browser.getURLParam("role"));
 
-
-
 const isJoined = computed(() => store.getters["rtc/isJoined"]);
 const isPublished = computed(() => store.getters["rtc/isPublished"]);
 const userSig = computed(() => store.getters["rtc/userSig"]);
 
-
 const initParamsStates = computed(
   () => !!(store.getters["rtc/sdkAppId"] && store.getters["rtc/secretKey"] && store.getters["rtc/roomId"] && store.getters["rtc/userId"])
 );
@@ -83,7 +79,7 @@ TRTC.checkSystemRequirements().then((checkResult) => {
   }
 });
 
-async function createLocalStream(video=true) {
+async function createLocalStream(video = true) {
   try {
     localStream = TRTC.createStream({
       userId: store.getters["rtc/userId"],
@@ -129,6 +125,12 @@ async function handleJoin() {
 
   await createLocalStream();
   await handlePublish();
+
+  localClient.on("stream-added", (event) => {
+    const remoteStream = event.stream;
+    // //订阅远端流
+    localClient.subscribe(remoteStream);
+  });
 }
 
 async function handlePublish() {
@@ -155,14 +157,15 @@ async function handleStartShare() {
   try {
     await shareClient.join();
     await shareClient.publish();
-    console.log('Start share screen success');
+    console.log("Start share screen success");
     store.isShared = true;
   } catch (error) {
     console.error(`Start share error: ${error.message_}`);
   }
 }
 
-async function handleClientJoin() {if (!initParamsStates.value) {
+async function handleClientJoin() {
+  if (!initParamsStates.value) {
     return;
   }
 
@@ -176,6 +179,7 @@ async function handleClientJoin() {if (!initParamsStates.value) {
     installEventHandlers();
 
     await localClient.join({ roomId: parseInt(store.getters["rtc/roomId"], 10) });
+
     store.commit("rtc/setIsJoined", true);
   } catch (error) {
     console.error(error, "error-----------");
@@ -183,25 +187,9 @@ async function handleClientJoin() {if (!initParamsStates.value) {
 
   await createLocalStream(false);
   await handlePublish();
-
-  localClient.on('stream-subscribed', handleSubscribed);
-
 }
 
-
-async function handleSubscribed(event) {
-  const remoteStream = event.stream;
-  clientId.value = remoteStream.getId();
-  await nextTick();
-  remoteStream
-    .play(clientId.value)
-    .then(() => {
-      console.log(`RemoteStream play success`);
-    })
-    .catch((error) => {
-      console.log(`RemoteStream play failed:  error: ${error.message_}`);
-    });
-}
+async function handleSubscribed(event) {}
 
 async function handleUnpublish() {
   if (!isJoined.value) {
@@ -315,7 +303,7 @@ function handleStreamAdded(event) {
   const id = remoteStream.getId();
   const userId = remoteStream.getUserId();
 
-  if (remoteStream.getUserId() === `share_${store.userId}`) {
+  if (remoteStream.getUserId() === store.getters["rtc/userId"]) {
     // don't need to screen shared by us
     localClient.unsubscribe(remoteStream).catch((error) => {
       console.error(`unsubscribe failed: ${error.message_}`);
@@ -328,10 +316,24 @@ function handleStreamAdded(event) {
   }
 }
 
-function handleStreamSubscribed(event) {
-  const remoteStream = event.stream;
-  const userId = remoteStream.getUserId();
-  console.log(`RemoteStream subscribed: [${userId}]`);
+async function handleStreamSubscribed(event) {
+  if (role.value == "customer") {
+    const remoteStream = event.stream;
+    clientId.value = remoteStream.getId();
+    await nextTick();
+    remoteStream
+      .play(clientId.value)
+      .then(() => {
+        console.log(`RemoteStream play success`,88888888888888888888);
+      })
+      .catch((error) => {
+        console.log(`RemoteStream play failed:  error: ${error.message_}`);
+      });
+  }
+
+  // const remoteStream = event.stream;
+  // const userId = remoteStream.getUserId();
+  // console.log(`RemoteStream subscribed: [${userId}]`);
 }
 
 function handleStreamRemoved(event) {
@@ -365,10 +367,10 @@ let switchDevice = async ({ videoId, audioId }) => {
 let canUseDevice = () => {
   console.log("可用");
 
-  if (role.value == 'leader') {
+  if (role.value == "leader") {
     handleJoin();
-  } else{
-    handleClientJoin()
+  } else {
+    handleClientJoin();
   }
 };
 </script>