mdm-client 1.0.4 → 1.0.6

package/src/components/MiniumVideoDialog/MiniumVideoDialog.vue

@@ -19,6 +19,10 @@
           ></div>
           <div class="identity">{{ curSpeaker.name }}</div>
         </div>
+        <!-- 当当前讲话者未开启摄像头时，显示占位板（与 liveMultipleMeeting 的 board 样式一致） -->
+        <div v-if="!curSpeakerCameraStatus" class="board">
+          <div class="board-icon"></div>
+        </div>
       </div>
       <div class="speaking-wrapper" v-show="!isExpand">
         <div :class="['cur-speaking-mic', curSpeakerMicrophoneStatus ? 'mic-on' : 'mic-off']"></div>
@@ -34,8 +38,10 @@
     >
       <div class="minium-video-dialog-footer-btn mic-on" v-if="localMicrophoneStatus" @click="changeLocalMicrophoneStatus"></div>
       <div class="minium-video-dialog-footer-btn mic-off" v-else @click="changeLocalMicrophoneStatus"></div>
-      <div class="minium-video-dialog-footer-btn camera-on" v-if="localCameraStatus" @click="changeLocalCameraStatus"></div>
-      <div class="minium-video-dialog-footer-btn camera-off" v-else @click="changeLocalCameraStatus"></div>
+      <template v-if="roomMode === 'auto'">
+        <div class="minium-video-dialog-footer-btn camera-on" v-if="localCameraStatus" @click="changeLocalCameraStatus"></div>
+        <div class="minium-video-dialog-footer-btn camera-off" v-else @click="changeLocalCameraStatus"></div>
+      </template>
       <div class="minium-video-dialog-footer-btn reset" @click="reset"></div>
       <div :class="['minium-video-dialog-footer-btn', isExpand ? 'slide' : 'expand']" @click="changeExpand"></div>
     </div>
@@ -59,6 +65,8 @@ export default {
       isExpand: true,
       curSpeakers: [],
       curSpeaker: null,
+      // 统一维护的 liveClient 实例，避免在各处重复通过 window 访问
+      liveClient: null,
       localCameraStatus: false,
       localMicrophoneStatus: false,
       curSpeakerMicrophoneStatus: false,
@@ -66,6 +74,8 @@ export default {
       curSpeakerTrack: null,
       showFooter: false,
       footerTimer: null,
+      // room模式，auto-音视频，audio-仅音频
+      roomMode: 'auto',
     };
   },
   computed: {
@@ -84,7 +94,10 @@ export default {
   },
   beforeDestroy() {
     this.clearFooterTimer();
+    this.detachCurrentTrack();
     this.dispatchLiveClientEvent();
+    // 组件销毁时清理引用
+    this.liveClient = null;
   },
   methods: {
     changeExpand() {
@@ -131,19 +144,21 @@ export default {
 
     // 初始化liveClient
     initLiveClient() {
-      const liveClient = window['liveClient'];
-      if(!liveClient) {
+      this.liveClient = window['liveClient'] || null;
+      if(!this.liveClient) {
         return;
       }
+      this.roomMode = this.liveClient?.roomMode || 'auto';
       this.curSpeaker = {
-        identity: liveClient.room.localParticipant.identity,
-        name: liveClient.room.localParticipant.name,
+        identity: this.liveClient.room.localParticipant.identity,
+        name: this.liveClient.room.localParticipant.name,
       };
-      this.localCameraStatus = liveClient.room.localParticipant.isCameraEnabled;
-      this.localMicrophoneStatus = liveClient.room.localParticipant.isMicrophoneEnabled;
-      this.curSpeakerMicrophoneStatus = liveClient.room.localParticipant.isMicrophoneEnabled;
-      this.curSpeakerCameraStatus = liveClient.room.localParticipant.isCameraEnabled;
-      this.curSpeakerTrack = this.trackData.videoTrack;
+      this.localCameraStatus = this.liveClient.room.localParticipant.isCameraEnabled;
+      this.localMicrophoneStatus = this.liveClient.room.localParticipant.isMicrophoneEnabled;
+      this.curSpeakerMicrophoneStatus = this.liveClient.room.localParticipant.isMicrophoneEnabled;
+      this.curSpeakerCameraStatus = this.liveClient.room.localParticipant.isCameraEnabled;
+      // 仅在视频会议模式下记录并绑定视频轨道
+      this.curSpeakerTrack = this.roomMode === 'auto' ? this.trackData.videoTrack : null;
       // 初始化视频轨道绑定
       this.initVideoAttach();
       // 监听并处理liveclient事件
@@ -194,22 +209,27 @@ export default {
     },
 
     initVideoAttach() {
-      if(this.curSpeakerTrack) {
-        const videoElm = document.getElementById('video-contain');
-        videoElm && this.curSpeakerTrack.attach(videoElm);
+      if (this.roomMode !== 'auto') return
+      if (this.curSpeakerTrack) {
+        const videoElm = document.getElementById('video-contain')
+        if (videoElm) {
+          // 先解绑，确保不会重复附加
+          try { this.curSpeakerTrack.detach(videoElm) } catch (e) {}
+          this.curSpeakerTrack.attach(videoElm)
+        }
       }
     },
 
     initLiveClientEvent() {
-      const liveClient = window['liveClient'];
-      if(!liveClient) {
+      if(!this.liveClient) {
         return;
       }
-      liveClient.on("localCameraChange", this.handleLocalCameraChange);
-      liveClient.on("localMicrophoneChange", this.handleLocalMicrophoneChange);
-      liveClient.on("activeSpeakerChange", this.handleActiveSpeakerChange);
-      liveClient.on("videoCallRender", this.handleVideoCallRender);
-      liveClient.on("roomDisconnected", this.handleRoomDisconnected);
+      this.liveClient.on("localCameraChange", this.handleLocalCameraChange);
+      this.liveClient.on("localMicrophoneChange", this.handleLocalMicrophoneChange);
+      this.liveClient.on("activeSpeakerChange", this.handleActiveSpeakerChange);
+      this.liveClient.on("videoCallRender", this.handleVideoCallRender);
+      this.liveClient.on("audioCallRender", this.handleAudioCallRender);
+      this.liveClient.on("roomDisconnected", this.handleRoomDisconnected);
     },
 
     handleLocalCameraChange(e) {
@@ -221,19 +241,35 @@ export default {
     },
 
     handleActiveSpeakerChange(e) {
-      if (e.length > 0) {
-        let maxAudioLevel = 0;
-        let maxAudioLevelIndex = -1;
-        e.forEach((speaker, index) => {
-          if (speaker.audioLevel > maxAudioLevel) {
-            maxAudioLevel = speaker.audioLevel;
-            maxAudioLevelIndex = index;
+      this.curSpeakers = Array.isArray(e) ? e : []
+      
+      if(this.curSpeakers.length > 0) {
+        // 找到音量最大的讲话者
+        let maxAudioLevel = -1
+        let winner = null
+        this.curSpeakers.forEach(speaker => {
+          const level = typeof speaker.audioLevel === 'number' ? speaker.audioLevel : 0
+          if (level > maxAudioLevel) {
+            maxAudioLevel = level
+            winner = speaker
+          }
+        })
+
+        if (!winner) return
+
+        // 仅当 identity 变化时才切换，以减少抖动
+        if (winner.identity !== this.curSpeaker?.identity) {
+          // 解绑旧轨道，等待 videoCallRender 到来后再绑定新轨道
+          // detachCurrentTrack()
+          this.curSpeaker = {
+            identity: winner.identity,
+            name: winner.name || winner.identity,
+            isLocal: !!winner.isLocal,
           }
-        });
-        if (maxAudioLevelIndex >= 0) {
-          this.curSpeaker = e[maxAudioLevelIndex];
+          // 在未收到渲染事件前，暂时认为摄像头状态未知/关闭，用以显示占位
+          // curSpeakerCameraStatus.value = false
+          // curSpeakerMicrophoneStatus.value = false
         }
-        this.curSpeakers = e;
       }
     },
 
@@ -242,15 +278,61 @@ export default {
         this.localCameraStatus = e.isCameraEnabled;
         this.localMicrophoneStatus = e.isMicrophoneEnabled;
       }
-      if(e.identity === this.curSpeaker?.identity) {
-        this.curSpeakerCameraStatus = e.isCameraEnabled;
-        this.curSpeakerMicrophoneStatus = e.isMicrophoneEnabled;
-        if(e?.videoTrack) {
-          this.curSpeakerTrack = e.videoTrack;
+      // 利用 videoCallRender 的 remove 标记判断离会
+      if (e?.remove === true && e.identity === this.curSpeaker?.identity) {
+        this.switchToLocalAsCurrentSpeaker()
+        return
+      }
+      if (e.identity === this.curSpeaker?.identity) {
+        // 更新当前讲话者音视频状态
+        this.curSpeakerCameraStatus = this.roomMode === 'auto' ? !!e.isCameraEnabled : false
+        this.curSpeakerMicrophoneStatus = !!e.isMicrophoneEnabled
+
+        const videoElm = document.getElementById('video-contain')
+
+        if (this.roomMode === 'auto' && e.videoTrack && videoElm) {
+          // 使用 sid 作为更稳定的身份标识；sid 发布后会保持不变
+          const oldTrack = this.curSpeakerTrack
+          const newTrack = e.videoTrack
+          if (oldTrack) {
+            const sameBySid = oldTrack.sid && newTrack?.sid && oldTrack.sid === newTrack.sid
+            // 当 sid 不同或对象引用不同（无 sid 时），说明发生实际轨道切换，需要解绑旧轨道
+            if (!sameBySid) {
+              try { oldTrack.detach(videoElm) } catch (err) {}
+            }
+          }
+          this.curSpeakerTrack = newTrack
+          // 重新绑定（同轨道重复 attach 时内部已处理，不影响稳定性）
+          try { this.curSpeakerTrack.attach(videoElm) } catch (err) {}
+        } else {
+          // 摄像头关闭或无轨道，解绑任何已绑定轨道
+          if (this.curSpeakerTrack && videoElm) {
+            try { this.curSpeakerTrack.detach(videoElm) } catch (err) {}
+          }
+          this.curSpeakerTrack = null
         }
       }
     },
 
+    // 音频会议渲染事件：不进行任何视频轨道的绑定，仅更新状态并显示占位
+    handleAudioCallRender(e) {
+      if (e?.remove === true && e.identity === this.curSpeaker?.identity) {
+        this.switchToLocalAsCurrentSpeaker()
+        return
+      }
+      if (e.local) {
+        this.localMicrophoneStatus = !!e.isMicrophoneEnabled
+      }
+      if (e.identity === this.curSpeaker?.identity) {
+        this.curSpeakerMicrophoneStatus = !!e.isMicrophoneEnabled
+        // 音频模式下不显示摄像头画面
+        this.curSpeakerCameraStatus = false
+        // 确保解绑任何已绑定的视频轨道
+        this.detachCurrentTrack()
+        this.curSpeakerTrack = null
+      }
+    },
+
     handleRoomDisconnected() {
       this.$emit('miniVideoDialogClose');
     },
@@ -260,27 +342,25 @@ export default {
     },
 
     dispatchLiveClientEvent() {
-      const liveClient = window['liveClient'];
-      if(liveClient) {
-        liveClient.off("localCameraChange", this.handleLocalCameraChange);
-        liveClient.off("localMicrophoneChange", this.handleLocalMicrophoneChange);
-        liveClient.off("activeSpeakerChange", this.handleActiveSpeakerChange);
-        liveClient.off("videoCallRender", this.handleVideoCallRender);
-        liveClient.off("roomDisconnected", this.handleRoomDisconnected);
+      if(this.liveClient) {
+        this.liveClient.off("localCameraChange", this.handleLocalCameraChange);
+        this.liveClient.off("localMicrophoneChange", this.handleLocalMicrophoneChange);
+        this.liveClient.off("activeSpeakerChange", this.handleActiveSpeakerChange);
+        this.liveClient.off("videoCallRender", this.handleVideoCallRender);
+        this.liveClient.off("audioCallRender", this.handleAudioCallRender)
+        this.liveClient.off("roomDisconnected", this.handleRoomDisconnected);
       }
     },
 
     async changeLocalMicrophoneStatus() {
-      const liveClient = window['liveClient'];
-      if(liveClient) {
-        await liveClient.changeMicrophoneStatus();
+      if(this.liveClient) {
+        await this.liveClient.changeMicrophoneStatus();
       }
     },
 
     async changeLocalCameraStatus() { 
-      const liveClient = window['liveClient'];
-      if(liveClient) {
-        await liveClient.changeCameraStatus();
+      if(this.liveClient) {
+        await this.liveClient.changeCameraStatus();
       }
     },
 
@@ -290,6 +370,42 @@ export default {
         this.footerTimer = null;
       }
     },
+
+    // 工具：解绑当前视频轨道
+    detachCurrentTrack() {
+      try {
+        const videoElm = document.getElementById('video-contain')
+        if (this.curSpeakerTrack && videoElm) {
+          this.curSpeakerTrack.detach(videoElm)
+        }
+      } catch (e) {}
+    },
+    // 工具：切换当前讲话者为本地参会者
+    switchToLocalAsCurrentSpeaker() {
+      try {
+        const lp = this.liveClient?.room?.localParticipant
+        this.detachCurrentTrack()
+        if (lp) {
+          this.curSpeaker = {
+            identity: lp.identity,
+            name: lp.name,
+            isLocal: true,
+          }
+          this.curSpeakerCameraStatus = this.roomMode === 'auto' ? !!lp.isCameraEnabled : false
+          this.curSpeakerMicrophoneStatus = !!lp.isMicrophoneEnabled
+          // 立即尝试绑定已知的本地轨道（如存在），后续仍会由 videoCallRender 纠正
+          if (this.roomMode === 'auto') {
+            const track = this.trackData?.videoTrack
+            if (track && this.curSpeakerCameraStatus) {
+              this.curSpeakerTrack = track
+              this.initVideoAttach()
+            }
+          } else {
+            this.curSpeakerTrack = null
+          }
+        }
+      } catch (e) {}
+    }
   },
 }
 </script>
@@ -318,6 +434,25 @@ export default {
         border-radius: 4px;
         object-fit: contain;
       }
+      // 与 liveMultipleMeeting 保持一致的缺省板样式
+      .board {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: 30;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--meeting-board-bg) no-repeat center / 100% 100%;
+        .board-icon {
+          width: 20%;
+          height: auto;
+          aspect-ratio: 1/1;
+          background: url("../../assets/image/common/default_avatar.png") no-repeat center / 100% 100%;
+        }
+      }
       .describe {
         position: absolute;
         bottom: 6px;

package/src/components/other/appointDialog.vue

@@ -123,7 +123,7 @@ export default {
 .appoint-dialog {
   width: 220px;
   position: absolute;
-  z-index: 2100;
+  z-index: 3000;
   background: var(--dialog-bg);
   box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
   border-radius: 8px;

package/src/components/other/layoutSwitch.vue

@@ -137,7 +137,7 @@ export default {
 <style lang="scss" scoped>
 .dialog {
   position: absolute;
-  z-index: 2100;
+  z-index: 2200;
   padding-top: 40px;
   // background: transparent;
   width: fit-content;

package/src/components/other/leaveOptionDialog.vue

@@ -57,7 +57,7 @@ export default {
 .check-dialog {
   width: 160px;
   position: absolute;
-  z-index: 2100;
+  z-index: 3000;
   &-inner {
     width: 100%;
     background: var(--dialog-bg);

package/src/components/other/moreOptionDialog.vue

@@ -281,7 +281,7 @@ export default {
   border: 1px solid var(--dialog-border-color);
   padding: 4px 6px;
   position: absolute;
-  z-index: 2100;
+  z-index: 2200;
   &-item {
     width: 100%;
     height: 36px;

package/src/components/other/screenShareBoard.vue

@@ -49,7 +49,7 @@ export default {
     }
   },
   mounted() {
-    this.isFluencyPriority = (this.screenShareCaptureOption.frameRate === 60);
+    this.isFluencyPriority = (this.screenShareCaptureOption?.resolution?.frameRate === 60);
     this.systemAudioInclude = this.screenShareCaptureOption.systemAudio === "include";
   },
   methods: {
@@ -64,7 +64,7 @@ export default {
 @import "../../assets/style/mixin.scss";
 .screen-share-board {
   position: absolute;
-  z-index: 4000;
+  z-index: 2050;
   left: 0;
   top: 0;
   width: 100%;