修复视频缩小后显示不全的问题
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user