视频连线

frontend/src/pages/meeting/room.vue

@@ -59,6 +59,7 @@
               :video-enabled="true"
               :audio-track="null"
               :video-track="screenTile.videoTrack"
+              video-fit="contain"
               :is-speaking="false"
             />
           </view>
@@ -241,6 +242,7 @@ const networkLevel = ref(4) // 持续接入 getStats 后动态更新（Task 16
 const startedAt = ref(0)
 const nowTs = ref(Date.now())
 let timerHandle = null
+let viewportCleanup = null
 
 /** 视频区容器引用：传给 SelfVideoFloat 计算吸附边界 */
 const videoCol = ref(null)
@@ -765,6 +767,15 @@ const redirectHome = () => {
   uni.reLaunch({ url: '/pages/index/index' })
 }
 
+const syncViewportHeight = () => {
+  // #ifdef H5
+  const height = window.visualViewport?.height || window.innerHeight
+  if (height > 0) {
+    document.documentElement.style.setProperty('--meeting-vh', `${height}px`)
+  }
+  // #endif
+}
+
 // ============ 生命周期 ============
 
 let stateStopWatch = null
@@ -787,6 +798,22 @@ onMounted(() => {
   // P2-3 修复：onLoad 已 redirectTo 跳转时，避免本页继续初始化定时器与 watcher
   if (redirectingToJoin) return
 
+  // #ifdef H5
+  syncViewportHeight()
+  const viewport = window.visualViewport
+  const onViewportChange = () => syncViewportHeight()
+  window.addEventListener('resize', onViewportChange)
+  window.addEventListener('orientationchange', onViewportChange)
+  viewport?.addEventListener?.('resize', onViewportChange)
+  viewport?.addEventListener?.('scroll', onViewportChange)
+  viewportCleanup = () => {
+    window.removeEventListener('resize', onViewportChange)
+    window.removeEventListener('orientationchange', onViewportChange)
+    viewport?.removeEventListener?.('resize', onViewportChange)
+    viewport?.removeEventListener?.('scroll', onViewportChange)
+  }
+  // #endif
+
   const startIso = meetingStore.currentRoom?.started_at || meetingStore.currentRoom?.created_at
   startedAt.value = startIso ? Date.parse(startIso) : Date.now()
   timerHandle = setInterval(() => { nowTs.value = Date.now() }, 1000)
@@ -807,6 +834,7 @@ onBeforeUnmount(() => {
     clearInterval(timerHandle)
     timerHandle = null
   }
+  if (viewportCleanup) { viewportCleanup(); viewportCleanup = null }
   if (stateStopWatch) { stateStopWatch(); stateStopWatch = null }
 })
 
@@ -832,8 +860,18 @@ onUnload(() => {
   inset: 0;
   width: 100vw;
   height: 100vh;
+  height: 100svh;
+  height: 100dvh;
+  height: var(--meeting-vh, 100dvh);
   min-width: 100vw;
   min-height: 100vh;
+  min-height: 100svh;
+  min-height: 100dvh;
+  min-height: var(--meeting-vh, 100dvh);
+  max-height: 100vh;
+  max-height: 100svh;
+  max-height: 100dvh;
+  max-height: var(--meeting-vh, 100dvh);
   display: flex;
   flex-direction: column;
   background: #0F172A;
@@ -1038,6 +1076,10 @@ onUnload(() => {
 .chat-col.open { width: 640rpx; }
 
 @media (max-width: 750px) {
+  .body {
+    padding-bottom: calc(96rpx + env(safe-area-inset-bottom));
+    box-sizing: border-box;
+  }
   /* 小屏幕：聊天面板改为全屏浮层，避免挤压视频 */
   .chat-col { position: fixed; top: 0; right: 0; bottom: 0; z-index: 205; }
   .chat-col.open { width: 100vw; }