优化人员状态

Signed-off-by: Caner <5658514@qq.com>

src/App.vue

@@ -26,9 +26,8 @@ const currentClick = ref(0)
 
 apiService.getMettingPep({ yhid: live_yhid.value, hyid: live_hyid.value }).then(({ data }) => {
   const newData = data || []
-  VideoDomList.value = newData.map(el => ({ ...el, yhtx: '/api/file/preview/' + el.yhtx, name: el.yhid == live_yhid.value ? '我' : el.yhmc, id: el.yhid == live_yhid.value ? 0 : el.yhid, audio: false, tracks: [] })).sort((a, b) => a.id - b.id)
-  console.log(66, VideoDomList.value);
-
+  VideoDomList.value = newData.map(el => ({ ...el, yhtx: '/api/file/preview/' + el.yhtx, name: el.yhid == live_yhid.value ? '我' : el.yhmc, id: el.yhid == live_yhid.value ? 0 : el.yhid, audio: false, tracks: [], isJoin: el.yhid == live_yhid.value })).sort((a, b) => a.id - b.id)
+  console.log('所有人员', VideoDomList.value);
 })
 
 
@@ -36,16 +35,29 @@ apiService.getMettingPep({ yhid: live_yhid.value, hyid: live_hyid.value }).then(
 const videoCallRoom: Room | null = new Room()
   .on(RoomEvent.TrackSubscribed, onRemoteTrack)
   .on(RoomEvent.Disconnected, close)
-  .on(RoomEvent.Connected, () => console.log('房间已连接'))
+  .on(RoomEvent.Connected, onConnect)
   .on(RoomEvent.Reconnected, () => console.log('房间已重新连接'))
   .on(RoomEvent.ConnectionStateChanged, (e) => console.log('连接状态改变', e))
-  .on(RoomEvent.ParticipantConnected, (e) => console.log('参与者加入：', e.name))
+  .on(RoomEvent.ParticipantConnected, onRemoteJoin)
   .on(RoomEvent.ParticipantDisconnected, onRemoteLeave)
   .on(RoomEvent.LocalTrackPublished, onLocalTrack)
   .on(RoomEvent.DataReceived, onDataReceived)
 
+function onConnect() {
+  console.log('房间已连接', videoCallRoom.participants);
+  videoCallRoom.participants.forEach(el => {
+    const _index = VideoDomList.value.findIndex(es => es.id == el.identity)
+    if (_index >= 0) {
+      VideoDomList.value[_index].isJoin = true
+    } else {
+      VideoDomList.value.push({ isJoin: true })
+    }
+  })
+}
+
 // 监听本地流程
 function onLocalTrack(localTrackPublication: LocalTrackPublication, localParticipant: LocalParticipant) {
+  if (!VideoDomList.value.length) return
   VideoDomList.value[0].audio = true
   VideoDomList.value[0].tracks.push(localTrackPublication.track)
   const dom = document.getElementById('remote_' + VideoDomList.value[0].id) as HTMLVideoElement
@@ -83,9 +95,22 @@ function onRemoteLeave(participant: RemoteParticipant) {
   // 移除dom
   VideoDomList.value.forEach(function (item) {
     if (item.id == participant.identity) {
-      item.tracks[0].detach()
-      item.tracks[1].detach()
-      item.tracks = []
+      if (item.tracks.length) {
+        item.tracks[0].detach()
+        item.tracks[1].detach()
+        item.tracks = []
+      }
+      item.isJoin = false
+    }
+  })
+}
+
+// 参与者加入
+function onRemoteJoin(participant: RemoteParticipant) {
+  console.log('参与者加入', participant);
+  VideoDomList.value.forEach(function (item) {
+    if (item.id == participant.identity) {
+      item.isJoin = true
     }
   })
 }

src/components/chat.vue

@@ -5,7 +5,7 @@ import { ref } from "vue"
 const props = defineProps<{
     modelValue: boolean,
     expanded: number[],
-    data: { name: string, zzmc: string, yhtx: string, audio: boolean, tracks: Any[] }[],
+    data: { name: string, zzmc: string, yhtx: string, audio: boolean, tracks: Any[],isJoin:boolean }[],
     msgData: { name: string, yhtx: string, time: string, strData: string }[]
 }>()
 
@@ -59,7 +59,7 @@ function sendMsg() {
                             </div>
                         </div>
                         <div class="member-list-item-right">
-                            <div class="status"> {{ item.tracks.length ? '到场' : '未到场' }} </div>
+                            <div class="status"> {{ item.isJoin ? '到场' : '未到场' }} </div>
                             <Icon name="mic" :size="30" v-if="item.audio" @click="changeAudio(item)" />
                             <Icon name="prohibition" :size="30" v-else @click="changeAudio(item)" />
                         </div>