修复视频缩小后显示不全的问题

This commit is contained in:
2025-12-04 12:50:42 +08:00
parent 1441312097
commit 68bf1d9796

View File

@@ -66,12 +66,20 @@
</div>
<!-- B. 远程视频流 -->
<!--
关键修复动态 class 切换 object-fit 模式
正常模式object-cover (填满)
最小化模式object-contain (完整显示)
-->
<video
ref="remoteVideoRef"
class="w-full h-full object-cover transition-opacity duration-500 absolute inset-0 z-0"
class="w-full h-full transition-opacity duration-500 absolute inset-0 z-0 bg-black"
:class="[
{ 'opacity-0': call.type === 'audio' || call.status !== 'connected' || call.remoteCamOff },
call.minimized ? 'object-contain' : 'object-cover'
]"
autoplay
playsinline
:class="{ 'opacity-0': call.type === 'audio' || call.status !== 'connected' || call.remoteCamOff }"
></video>
<!-- C. 本地视频流 -->
@@ -306,17 +314,12 @@ const formatDuration = (seconds: number) => {
}
// --- 增强版视频流绑定 ---
// 监听流变化 + 视频容器显隐状态
watchEffect(() => {
const stream = props.localStream
const isVisible = shouldShowLocalVideo.value // 依赖显隐状态
const videoEl = localVideoRef.value
// 只有当元素存在、流存在虽然v-show会自动控制display但我们确保逻辑对齐时才尝试绑定
if (videoEl && stream) {
// 强制静音,防止浏览器策略阻止自动播放
videoEl.muted = true
if (videoEl.srcObject !== stream) {
console.log('CallWindow: Binding local stream', stream.id)
videoEl.srcObject = stream