deepgeek/gradio-webrtc
2
0
Fork 0
mirror of https://github.com/HumanAIGC-Engineering/gradio-webrtc.git synced 2026-02-05 09:59:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新分屏显示

Browse Source
This commit is contained in:
杍超
2025-02-18 14:11:00 +08:00
parent 936e946e98
commit e1fb40a8a8
3 changed files with 15 additions and 6278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl vendored
View File

Binary file not shown.

6276
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
frontend/shared/VideoChat.svelte
View File

@@ -282,6 +282,7 @@
wrapperRef.getBoundingClientRect() wrapperRef.getBoundingClientRect()
wrapperRect.width = wrapperRef.clientWidth wrapperRect.width = wrapperRef.clientWidth
wrapperRect.height = wrapperRef.clientHeight wrapperRect.height = wrapperRef.clientHeight
isLandScape = wrapperRect.width * 1.5 > wrapperRect.height
console.log(wrapperRect) console.log(wrapperRect)
}) })
@@ -350,11 +351,12 @@
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
} }
export let isLandScape = true
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
wrapperRef.getBoundingClientRect() wrapperRef.getBoundingClientRect()
wrapperRect.width = wrapperRef.clientWidth wrapperRect.width = wrapperRef.clientWidth
wrapperRect.height = wrapperRef.clientHeight wrapperRect.height = wrapperRef.clientHeight
isLandScape = wrapperRect.width * 1.5 > wrapperRect.height
computeLocalPosition() computeLocalPosition()
computeRemotePosition() computeRemotePosition()
}) })
@@ -371,7 +373,7 @@
<WebcamPermissions on:click={async () => access_webcam()} /> <WebcamPermissions on:click={async () => access_webcam()} />
</div> </div>
{/if} {/if}
<div class="video-container" bind:this={wrapperRef} class:picture-in-picture={videoShowType === 'picture-in-picture'} class:side-by-side={videoShowType === 'side-by-side'} style:visibility="{webcam_accessed ? 'visible' : 'hidden'}"> <div class="video-container" bind:this={wrapperRef} class:vertical={!isLandScape} class:picture-in-picture={videoShowType === 'picture-in-picture'} class:side-by-side={videoShowType === 'side-by-side'} style:visibility="{webcam_accessed ? 'visible' : 'hidden'}">
<div class=local-video-container bind:this={localVideoContainerRef} <div class=local-video-container bind:this={localVideoContainerRef}
style:left={localVideoPosition.width < 10 ? '50%' :localVideoPosition.left + 'px'} style:left={localVideoPosition.width < 10 ? '50%' :localVideoPosition.left + 'px'}
style:top={localVideoPosition.height < 10 ? '50%' : localVideoPosition.top + 'px'} style:top={localVideoPosition.height < 10 ? '50%' : localVideoPosition.top + 'px'}
@@ -502,6 +504,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.local-video-container, .remote-video-container { .local-video-container, .remote-video-container {
position: static; position: static;
width: 49%; width: 49%;
@@ -512,6 +515,16 @@
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-radius: 32px; border-radius: 32px;
transition: all 0.3s linear; transition: all 0.3s linear;
overflow: hidden;
}
&.vertical {
flex-direction: column-reverse;
.local-video-container, .remote-video-container {
width: 100%;
height: 49%;
}
} }
.local-video, .remote-video { .local-video, .remote-video {
width: 100%; width: 100%;