更新版本

src/components/RTC/PageRtcLive.vue

@@ -403,7 +403,7 @@ const onGetOuT = (data) => {
 const startFollow = (app) => {
   app.Connect.follow.start({ follow: role.value == "customer" });
 
-  store.commit("rtc/setUserId", browser.getURLParam("userId") || `user_${Math.floor(Math.random() * 100000000)}`);
+  store.commit("rtc/setUserId", browser.getURLParam("userId") || `user_${role.value}_${Math.floor(Math.random() * 100000000)}`);
   store.commit("rtc/setRoomId", browser.getURLParam("roomId") || Math.floor(Math.random() * 100000000));
 
   socket.value.on("connect", () => {

src/components/RTC/Trtccom.vue

@@ -1,8 +1,12 @@
 <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" :class="{disabledlocal:role=='customer'}" id="local" v-if="isJoined"></div>
+
+    <template v-if="isJoined && invitedRemoteStreams.length > 0">
+      <div class="local" :data-role="item.userId_" :class="{disabledlocal:item.userId_.indexOf('customer')>-1}" v-for="(item, i) in invitedRemoteStreams" :id="item.getId()" :key="i"></div>
+    </template>
+
     <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,7 +27,7 @@ const emit = defineEmits(["audioMuted", "videoMuted"]);
 const store = useStore();
 
 const show = ref(false);
-const clientId = ref("");
+const invitedRemoteStreams = ref([]);
 
 const role = ref(browser.getURLParam("role"));
 
@@ -87,23 +91,25 @@ TRTC.checkSystemRequirements().then((checkResult) => {
   }
 });
 
-async function createLocalStream(video = true) {
+async function createLocalStream() {
+  let isLeader = role.value == 'leader'
   try {
     localStream = TRTC.createStream({
       userId: store.getters["rtc/userId"],
       audio: true,
-      video: video,
-      cameraId: video ? store.getters["rtc/videoDeviceId"] : null,
+      video: isLeader,
+      cameraId: isLeader ? store.getters["rtc/videoDeviceId"] : '',
       microphoneId: store.getters["rtc/audioDeviceId"],
     });
-    localStream.setVideoProfile("480p");
+    isLeader && localStream.setVideoProfile("480p");
+
+    
 
     await localStream.initialize();
   } catch (error) {}
 }
 
 async function handleJoin() {
-  console.log(!initParamsStates.value);
   if (!initParamsStates.value) {
     return;
   }
@@ -117,6 +123,7 @@ async function handleJoin() {
     });
     installEventHandlers();
 
+
     await localClient.join({ roomId: parseInt(store.getters["rtc/roomId"], 10) });
     store.commit("rtc/setIsJoined", true);
     // inviteLink.value = store.commit("rtc/createShareLink");
@@ -132,11 +139,6 @@ async function handleJoin() {
       // addLocalControlView();
     })
     .catch((e) => {});
-  localClient.on("stream-added", (event) => {
-    const remoteStream = event.stream;
-    // //订阅远端流
-    localClient.subscribe(remoteStream);
-  });
 }
 
 async function handlePublish() {
@@ -170,33 +172,6 @@ async function handleStartShare() {
   }
 }
 
-async function handleClientJoin() {
-  if (!initParamsStates.value) {
-    return;
-  }
-
-  try {
-    localClient = TRTC.createClient({
-      mode: "rtc",
-      sdkAppId: parseInt(store.getters["rtc/sdkAppId"], 10),
-      userId: store.getters["rtc/userId"],
-      userSig: userSig.value,
-    });
-    installEventHandlers();
-
-    await localClient.join({ roomId: parseInt(store.getters["rtc/roomId"], 10) });
-
-    store.commit("rtc/setIsJoined", true);
-  } catch (error) {
-    console.error(error, "error-----------");
-  }
-
-  await createLocalStream(false);
-  await handlePublish();
-}
-
-async function handleSubscribed(event) {}
-
 async function handleUnpublish() {
   if (!isJoined.value) {
     return;
@@ -305,6 +280,8 @@ function handleStreamAdded(event) {
   const id = remoteStream.getId();
   const userId = remoteStream.getUserId();
 
+  console.log(remoteStream, "-------------remoteStream");
+
   if (remoteStream.getUserId() === store.getters["rtc/userId"]) {
     // don't need to screen shared by us
     localClient.unsubscribe(remoteStream).catch((error) => {
@@ -319,20 +296,27 @@ function handleStreamAdded(event) {
 }
 
 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;
+
+  if (remoteStream.userId_ == store.getters["rtc/userId"]) {
+    return
   }
 
+  if (!invitedRemoteStreams.value.some(item=>item.userId_==remoteStream.userId_)) {
+    invitedRemoteStreams.value.push(remoteStream);
+  }
+
+  console.log(invitedRemoteStreams.value, "invitedRemoteStreams.value");
+  await nextTick();
+  remoteStream
+    .play(remoteStream.getId())
+    .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}]`);
@@ -368,12 +352,7 @@ let switchDevice = async ({ videoId, audioId }) => {
 
 let canUseDevice = () => {
   console.log("可用");
-
-  if (role.value == "leader") {
-    handleJoin();
-  } else {
-    handleClientJoin();
-  }
+  handleJoin();
 };
 </script>
 
@@ -419,5 +398,9 @@ let canUseDevice = () => {
       height: 1.94rem;
     }
   }
+  .disabledlocal {
+    opacity: 0 !important;
+    visibility: hidden !important;
+  }
 }
 </style>