mdm-client 1.0.3 → 1.0.4

package/src/components/LivePointMeeting/LivePointMeeting.vue

@@ -142,7 +142,8 @@ export default {
       isDurationCalc: true,
       isFootShow: false,
       footVisibleDuration: 3,
-      isRoomConnectedHandled: false
+      isRoomConnectedHandled: false,
+      rotateDegreeMap: new Map(), // 存储与会者identity对应的旋转角度
     }
   },
   computed: {
@@ -164,6 +165,47 @@ export default {
     }
   },
   methods: {
+    // 根据 identity 和度数应用旋转到视频元素，并切换旋转按钮图标
+    applyRotation(identity, degree) {
+      try {
+        const norm = ((degree % 360) + 360) % 360; // 归一化到0-359
+        const videoElm = document.getElementById(`video-${identity}`);
+        if (videoElm) {
+          videoElm.style.transformOrigin = 'center center';
+          if (norm === 90 || norm === 270) {
+            const parent = videoElm.parentElement;
+            if (parent) {
+              const rect = parent.getBoundingClientRect();
+              videoElm.style.top = '50%';
+              videoElm.style.left = '50%';
+              videoElm.style.width = `${rect.height}px`;
+              videoElm.style.height = `${rect.width}px`;
+              videoElm.style.transform = `translate(-50%, -50%) rotate(${norm}deg)`;
+              videoElm.style.objectFit = 'cover';
+            }
+          } else {
+            videoElm.style.top = '0';
+            videoElm.style.left = '0';
+            videoElm.style.width = '100%';
+            videoElm.style.height = '100%';
+            videoElm.style.transform = `rotate(${norm}deg)`;
+            videoElm.style.objectFit = 'contain';
+          }
+        }
+
+        const rotateElm = document.getElementById(`rotate-${identity}`);
+        if (rotateElm) {
+          let clsIndex = 1;
+          if (norm === 0) clsIndex = 1;
+          else if (norm === 90) clsIndex = 2;
+          else if (norm === 180) clsIndex = 3;
+          else if (norm === 270) clsIndex = 4;
+          rotateElm.className = `rotate-icon rotate-icon${clsIndex}`;
+        }
+      } catch (err) {
+        console.error('applyRotation error', err);
+      }
+    },
     async createRoom() {
       if (!this.liveClient) {
         return;
@@ -719,6 +761,8 @@ export default {
       // 与会者状态变更
       // 视频元素
       let videoElm = document.getElementById(`video-${videoItem.identity}`);
+      // 旋转按钮元素
+      let rotateElm = document.getElementById(`rotate-${videoItem.identity}`);
       // 当与会者断开会议链接即remove为true
       if (videoItem.remove) {
         if (videoElm) {
@@ -731,6 +775,15 @@ export default {
         }
         this.removeFromParticipantList(videoItem);
 
+        // 清理旋转按钮与状态
+        if (rotateElm) {
+          try { videoDiv && videoDiv.removeChild(rotateElm); } catch (e) {}
+          rotateElm = null;
+        }
+        if (this.rotateDegreeMap.has(videoItem.identity)) {
+          this.rotateDegreeMap.delete(videoItem.identity);
+        }
+
         // 音视频轨道与video元素解绑
         if (videoItem.videoTrack) {
           videoItem.videoTrack.detach();
@@ -760,6 +813,22 @@ export default {
       let boardElm = document.getElementById(`board-${videoItem.identity}`);
       // 底部麦克风图标元素
       let microElm = document.getElementById(`microphone-${videoItem.identity}`);
+      // 根据platformID设定元素样式（与多方会议保持一致）
+      if (videoElm) {
+        if (
+          videoItem.metadata?.platformID == 1 ||
+          videoItem.metadata?.platformID == 4 ||
+          videoItem.metadata?.platformID == 7
+        ) {
+          videoElm.style.objectFit = 'contain';
+        } else {
+          if (videoItem?.source == 'camera') {
+            videoElm.style.objectFit = 'cover';
+          } else {
+            videoElm.style.objectFit = 'contain';
+          }
+        }
+      }
       // 声明麦克风按钮点击事件回调
       const unableMicrophone = () => {
         this.liveClient.changeParticipantMicrophoneStatus(videoItem.identity, true);
@@ -776,17 +845,43 @@ export default {
         let layoutNormalElm = document.querySelector("#point-meeting-contain .layout-normal");
         let localChild = layoutBlurElm.firstElementChild;
         let currentEle = document.getElementById(`participant-${videoItem.identity}`);
-        if (localChild) {
-          if (localChild.id === `participant-${this.localIdentity}`) {
-            return;
+        // 核心逻辑：点击任意非焦点或焦点元素，切换位置
+        // 期望行为：layoutBlurElm 始终只保留一个“缩略/小画面”元素（本地），点击其他元素切换焦点并将之前焦点移到小画面
+        if (!layoutBlurElm || !layoutNormalElm || !currentEle) return;
+
+        const isCurrentInBlur = currentEle.parentElement === layoutBlurElm;
+        const isCurrentInNormal = currentEle.parentElement === layoutNormalElm;
+        const blurFirst = layoutBlurElm.firstElementChild;
+        const normalFirst = layoutNormalElm.firstElementChild;
+
+        // 如果当前元素已经在小画面区域（layoutBlurElm），则尝试与 normalFirst 交换（如果存在）
+        if (isCurrentInBlur) {
+          if (normalFirst) {
+            // 将 normalFirst 移到小画面
+            layoutBlurElm.appendChild(normalFirst);
+            // 将当前小画面移到大画面顶部
+            layoutNormalElm.insertBefore(currentEle, layoutNormalElm.firstChild ?? null);
           } else {
-            layoutNormalElm.insertBefore(localChild, layoutNormalElm.firstChild ?? null);
-            if (currentEle) {
-              layoutBlurElm.appendChild(currentEle);
-            }
+            // 没有大画面，直接保持当前不动
+            return;
           }
-        } else {
+          return;
+        }
+
+        // 当前在大画面区域
+        if (isCurrentInNormal) {
+          // 如果小画面里有元素，则和它交换
+          if (blurFirst) {
+            layoutNormalElm.insertBefore(blurFirst, layoutNormalElm.firstChild ?? null);
+          }
+          // 将点击的大画面元素移入小画面
           layoutBlurElm.appendChild(currentEle);
+          return;
+        }
+
+        // 兜底：如果元素不在两者内（理论上不发生），直接放入大画面
+        if (!isCurrentInBlur && !isCurrentInNormal) {
+          layoutNormalElm.insertBefore(currentEle, layoutNormalElm.firstChild ?? null);
         }
       };
       // 为与会者元素绑定事件
@@ -810,6 +905,55 @@ export default {
           `;
           videoDiv.appendChild(describeElm);
         }
+        // 仅在视频通话(roomMode=auto => 此组件中对应 meetingType==='video')、且为摄像头画面、且 platformID 为 4 时显示旋转按钮
+        if (
+          videoItem.isCameraEnabled &&
+          !videoItem.isScreenShareEnabled &&
+          videoItem?.metadata?.platformID === 4
+        ) {
+          if (!rotateElm) {
+            rotateElm = document.createElement('div');
+            rotateElm.id = `rotate-${videoItem.identity}`;
+            rotateElm.className = 'rotate-icon rotate-icon1';
+            videoDiv && videoDiv.appendChild(rotateElm);
+          }
+          // 绑定（或重绑）事件处理，阻止冒泡，避免触发父容器的setBlurVideoLeft
+          const handleRotateClick = (event) => {
+            event?.stopPropagation?.();
+            event?.preventDefault?.();
+            const current = this.rotateDegreeMap.get(videoItem.identity) || 0;
+            const next = (current + 90) % 360;
+            this.rotateDegreeMap.set(videoItem.identity, next);
+            this.applyRotation(videoItem.identity, next);
+          };
+          rotateElm.onclick = handleRotateClick;
+          // 进一步保险：阻止按下就冒泡（处理某些浏览器差异与长按）
+          rotateElm.onmousedown = (e) => { e?.stopPropagation?.(); };
+          rotateElm.ontouchstart = (e) => { e?.stopPropagation?.(); };
+          // 初始化角度并应用
+          if (!this.rotateDegreeMap.has(videoItem.identity)) {
+            this.rotateDegreeMap.set(videoItem.identity, 0);
+          }
+          this.applyRotation(videoItem.identity, this.rotateDegreeMap.get(videoItem.identity));
+        } else {
+          // 不满足条件则移除旋转按钮并清除状态
+          if (rotateElm) {
+            try { videoDiv && videoDiv.removeChild(rotateElm); } catch (e) {}
+            rotateElm = null;
+          }
+          if (this.rotateDegreeMap.has(videoItem.identity)) {
+            this.rotateDegreeMap.delete(videoItem.identity);
+          }
+          // 同时复原视频元素的旋转
+          if (videoElm) {
+            videoElm.style.transform = '';
+            videoElm.style.transformOrigin = '';
+            videoElm.style.top = '';
+            videoElm.style.left = '';
+            videoElm.style.width = '';
+            videoElm.style.height = '';
+          }
+        }
       } else {
         if (describeElm) {
           videoDiv.removeChild(describeElm);
@@ -851,6 +995,10 @@ export default {
         }
       }
       this.addToParticipantList(videoItem);
+      // 每次渲染时，如存在旋转角度记录，则应用旋转（避免重新渲染后丢失旋转效果）
+      if (this.rotateDegreeMap.has(videoItem.identity)) {
+        this.applyRotation(videoItem.identity, this.rotateDegreeMap.get(videoItem.identity));
+      }
     },
     renderAudioItem(audioItem) {
       console.log("语音通话渲染" + audioItem.identity + ":", audioItem);
@@ -887,7 +1035,8 @@ export default {
           }
           this.addToParticipantList(audioItem);
         }
-        let audioElm = document.getElementById(`audio=${audioItem.identity}`);
+  // 修复ID选择器错误：应为 audio-${identity}
+  let audioElm = document.getElementById(`audio-${audioItem.identity}`);
         if (audioItem.remove) {
           if (audioElm) {
             audioElm.srcObject = null;

package/src/components/LivePointMeeting/style/index.scss

@@ -110,6 +110,8 @@
       height: 100%;
       position: relative;
       border-radius: 6px;
+      background: var(--dialog-bg);
+      overflow: hidden; // 旋转后裁剪溢出内容，避免页面出现“怪异”形态
       .p-video {
         position: absolute;
         width: 100%;
@@ -119,6 +121,39 @@
         z-index: 10;
         object-fit: contain;
         border-radius: 6px;
+        backface-visibility: hidden; // 避免3D旋转引发的锯齿闪烁
+        will-change: transform; // 提示浏览器优化旋转
+      }
+      // 参会者视频旋转按钮（与 LiveMultipleMeeting 保持一致）
+      .rotate-icon {
+        visibility: hidden; // 默认隐藏，悬浮显示
+        cursor: pointer;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 50;
+        aspect-ratio: 1/1;
+        width: auto;
+        height: 3%;
+        min-height: 30px;
+        &1 {
+          background: var(--rotate-icon1) no-repeat center / 100% 100%;
+        }
+        &2 {
+          background: var(--rotate-icon2) no-repeat center / 100% 100%;
+        }
+        &3 {
+          background: var(--rotate-icon3) no-repeat center / 100% 100%;
+        }
+        &4 {
+          background: var(--rotate-icon4) no-repeat center / 100% 100%;
+        }
+      }
+      // 悬浮显示旋转按钮
+      &:hover {
+        .rotate-icon {
+          visibility: visible;
+        }
       }
       .describe {
         position: absolute;

package/src/components/MeetingReadyDialog/MeetingReadyDialog.vue

@@ -19,6 +19,10 @@
       <div class="video-contain">
         <div class="avatar"></div>
         <video id="video-ele" class="video-ele" muted autoplay v-show="cameraStatus"></video>
+        <div class="mirror-switch" @click="setMirror">
+          <img class="mirror-switch-icon" src="../../assets/image/common/mirror.png" />
+          <span>镜像</span>
+        </div>
       </div>
       <div class="tool-bar">
         <div class="tool-bar-group">
@@ -124,6 +128,7 @@ export default {
       videoSelectShow: false,
       outputSelectShow: false,
       allTracks: [],
+      isMirror: false,
       audioDevices: [],
       outputDevices: [],
       videoDevices: [],
@@ -150,16 +155,16 @@ export default {
         if (newVal) {
           constrict = {
             audio: this.activeDevice?.audioInputDevice
-              ? { deviceId: this.activeDevice.audioInputDevice }
+              ? { deviceId: { exact: this.activeDevice.audioInputDevice } }
               : true,
             video: this.activeDevice?.videoDevice
-              ? { deviceId: this.activeDevice.videoDevice }
+              ? { deviceId: { exact: this.activeDevice.videoDevice } }
               : { facingMode: this.curFacingMode },
           };
         } else {
           constrict = {
             audio: this.activeDevice?.audioInputDevice
-              ? { deviceId: this.activeDevice.audioInputDevice }
+              ? { deviceId: { exact: this.activeDevice.audioInputDevice } }
               : true,
             video: false,
           };
@@ -167,6 +172,33 @@ export default {
         await this.getDefaultDeviceStream(constrict);
       },
     },
+    microphoneStatus: {
+      handler: async function (newVal) {
+        let constrict = null;
+        if (newVal) {
+          constrict = {
+            audio: this.activeDevice?.audioInputDevice
+              ? { deviceId: { exact: this.activeDevice.audioInputDevice } }
+              : true,
+            video: this.cameraStatus
+              ? this.activeDevice?.videoDevice
+                ? { deviceId: { exact: this.activeDevice.videoDevice } }
+                : { facingMode: this.curFacingMode }
+              : false,
+          };
+        } else {
+          constrict = {
+            audio: false,
+            video: this.cameraStatus
+              ? this.activeDevice?.videoDevice
+                ? { deviceId: { exact: this.activeDevice.videoDevice } }
+                : { facingMode: this.curFacingMode }
+              : false,
+          };
+        }
+        await this.getDefaultDeviceStream(constrict);
+      },
+    },
   },
   mounted() {
     this.init();
@@ -198,6 +230,7 @@ export default {
         this.showMessageInstance.message("error", "会议名称不能超过20个字符");
         return;
       }
+      this.streamPause();
       this.$emit("launchMeeting", {
         roomName: this.roomName,
         cameraStatus: this.cameraStatus,
@@ -206,6 +239,7 @@ export default {
         audioInputDevice: this.activeDevice.audioInputDevice,
         audioOutputDevice: this.activeDevice.audioOutputDevice,
         videoDevice: this.activeDevice.videoDevice,
+        isMirror: this.isMirror,
       });
       this.$emit("close");
     },
@@ -215,6 +249,7 @@ export default {
         this.showMessageInstance.message("error", "会议ID不能为空");
         return;
       }
+      this.streamPause();
       this.$emit("joinMeeting", {
         roomNum: this.roomNum,
         cameraStatus: this.cameraStatus,
@@ -223,10 +258,23 @@ export default {
         audioInputDevice: this.activeDevice.audioInputDevice,
         audioOutputDevice: this.activeDevice.audioOutputDevice,
         videoDevice: this.activeDevice.videoDevice,
+        isMirror: this.isMirror,
       });
       this.$emit("close");
     },
 
+    setMirror() {
+      this.isMirror = !this.isMirror;
+      this.$nextTick(() => {
+        let videoDom = document.getElementById("video-ele");
+        if (videoDom) {
+          this.isMirror
+            ? (videoDom.style.transform = "rotateY(180deg)")
+            : (videoDom.style.transform = "rotateY(0deg)");
+        }
+      });
+    },
+
     async getDeviceList() {
       try {
         const { audioDevices, videoDevices, outputDevices } = await LiveClient.getDeviceList();
@@ -312,11 +360,16 @@ export default {
       }
     },
 
+    sleep(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    },
+
     async getDefaultDeviceStream(constrict) {
       try {
+        this.clearAllTrack();
+        await this.sleep(500);
         const stream = await navigator.mediaDevices.getUserMedia(constrict);
         let videoEle = document.querySelector("#video-ele");
-        this.clearAllTrack();
         if (videoEle) {
           this.allTracks = stream.getTracks();
           this.getActiveDeviceId(stream);
@@ -325,8 +378,10 @@ export default {
             videoEle.play();
           };
         }
+        return stream;
       } catch (err) {
-        throw new Error(err);
+        console.error("Failed to get media stream:", err);
+        this.showMessageInstance.message("error", "获取设备媒体流失败,请检查浏览器权限状态或者设备是否可用");
       }
     },
 
@@ -343,12 +398,16 @@ export default {
     async initVideoStream() {
       this.curFacingMode = "user";
       const constrict = {
-        audio: this.microphoneStatus,
+        audio: this.microphoneStatus
+          ? this.activeDevice?.audioInputDevice
+            ? { deviceId: { exact: this.activeDevice.audioInputDevice } }
+            : true
+          : false,
         video: this.cameraStatus
-          ? {
-              facingMode: this.curFacingMode,
-            }
-          : this.cameraStatus,
+          ? this.activeDevice?.videoDevice
+            ? { deviceId: { exact: this.activeDevice.videoDevice } }
+            : { facingMode: this.curFacingMode }
+          : false,
       };
       await this.getDefaultDeviceStream(constrict);
     },
@@ -356,10 +415,10 @@ export default {
     async handleAudioInputDeviceChoice(e) {
       if (e && e !== this.activeDevice?.audioInputDevice) {
         const constrict = {
-          audio: this.microphoneStatus ? { deviceId: e } : false,
+          audio: this.microphoneStatus ? { deviceId: { exact: e } } : false,
           video: this.cameraStatus
             ? this.activeDevice?.videoDevice
-              ? { deviceId: this.activeDevice.videoDevice }
+              ? { deviceId: { exact: this.activeDevice.videoDevice } }
               : { facingMode: this.curFacingMode }
             : this.cameraStatus,
         };
@@ -378,10 +437,10 @@ export default {
         const constrict = {
           audio: this.microphoneStatus
             ? this.activeDevice?.audioInputDevice
-              ? { deviceId: this.activeDevice.audioInputDevice }
+              ? { deviceId: { exact: this.activeDevice.audioInputDevice } }
               : this.microphoneStatus
             : this.microphoneStatus,
-          video: this.cameraStatus ? { deviceId: e } : this.cameraStatus,
+          video: this.cameraStatus ? { deviceId: { exact: e } } : this.cameraStatus,
         };
         await this.getDefaultDeviceStream(constrict);
       }
@@ -493,6 +552,29 @@ export default {
         top: 0;
         object-fit: cover;
       }
+
+      .mirror-switch {
+        cursor: pointer;
+        position: absolute;
+        top: 23px;
+        right: 17px;
+        background: rgba(28, 36, 47, 0.6);
+        border-radius: 8px 8px 8px 8px;
+        display: flex;
+        align-items: center;
+        height: 40px;
+        padding: 0 10px;
+        font-weight: 400;
+        font-size: 12px;
+        z-index: 10;
+        color: #fff;
+
+        &-icon {
+          width: 16px;
+          height: 14px;
+          margin-right: 6px;
+        }
+      }
     }
 
     .tool-bar {