优化resize 逻辑,numpy版本依赖

This commit is contained in:
杍超
2025-02-06 14:27:33 +08:00
parent 0778080e44
commit 6117b26a48
4 changed files with 24 additions and 15 deletions

Binary file not shown.

View File

@@ -20,7 +20,7 @@
$: containerWidth = icon
? "128px"
: `calc((var(--boxSize) + var(--gutter)) * ${numBars})`;
: `calc((var(--boxSize) + var(--gutter)) * ${numBars} + 80px)`;
$: if(stream_state === "open") setupAudioContext();
@@ -90,7 +90,11 @@
</div>
{:else}
<div class="gradio-webrtc-boxContainer" style:width={containerWidth}>
{#each Array(numBars) as _}
{#each Array(numBars/2) as _}
<div class="gradio-webrtc-box"></div>
{/each}
<div class="split-container"></div>
{#each Array(numBars/2) as _}
<div class="gradio-webrtc-box"></div>
{/each}
</div>
@@ -111,10 +115,13 @@
display: flex;
justify-content: space-between;
height: 64px;
--boxSize: 8px;
--boxSize: 4px;
--gutter: 4px;
}
}
.split-container {
width: 80px;
}
.gradio-webrtc-box {
height: 100%;
width: var(--boxSize);

View File

@@ -207,7 +207,10 @@
webcam_received = false;
dispatch("error", "Too many concurrent users. Come back later!");
});
} else {
} else if (stream_state === 'waiting') {
// waiting 中不允许操作
return
}else {
remoteVideoPosition.init = false
computeLocalPosition()
stop(pc);
@@ -237,12 +240,6 @@
};
}
function handle_click_outside(event: MouseEvent): void {
event.preventDefault();
event.stopPropagation();
options_open = false;
}
let wrapperRef: HTMLDivElement;
const wrapperRect = {
width: 0,
@@ -294,6 +291,7 @@
}
function computeLocalPosition() {
if (!localVideoRef || !localVideoContainerRef || !localVideoRef.videoHeight) return
if (remoteVideoPosition.init) {
// 存在远端视频则计算画中画
let height = remoteVideoPosition.height / 4
@@ -321,7 +319,7 @@
}
}
function computeRemotePosition() {
if (!remoteVideoRef.srcObject) return
if (!remoteVideoRef.srcObject || !remoteVideoRef.videoHeight) return
console.log(remoteVideoRef.videoHeight, remoteVideoRef.videoWidth)
let height = wrapperRect.height - 24
let width = height / remoteVideoRef.videoHeight* remoteVideoRef.videoWidth
@@ -347,6 +345,9 @@
}
window.addEventListener('resize', () => {
wrapperRef.getBoundingClientRect()
wrapperRect.width = wrapperRef.clientWidth
wrapperRect.height = wrapperRef.clientHeight
computeLocalPosition()
computeRemotePosition()
})
@@ -378,7 +379,7 @@
style:width={videoShowType=== 'picture-in-picture' ?remoteVideoPosition.width+'px':''}
style:height={videoShowType === 'picture-in-picture' ?remoteVideoPosition.height + 'px': ''}
>
<video class="remote-video" on:playing={computeRemotePosition} bind:this={remoteVideoRef} autoplay playsinline />
<video class="remote-video" on:playing={computeRemotePosition} bind:this={remoteVideoRef} autoplay playsinline muted={volumeMuted}/>
</div>
<div class="actions"
style:left={videoShowType === 'picture-in-picture' ? actionsPosition.left+'px': ''}
@@ -609,6 +610,7 @@
background: linear-gradient(180deg, #7873F6 0%, #524DE1 100%);
transition: all 0.3s;
z-index: 2;
cursor: pointer;
}
.start-chat {
font-size: 16px;

View File

@@ -16,7 +16,7 @@ requires-python = ">=3.10"
authors = [{ name = "Freddy Boulton", email = "YOUREMAIL@domain.com" }]
keywords = ["gradio-custom-component", "gradio-template-Video", "streaming", "webrtc", "realtime"]
# Add dependencies here
dependencies = ["gradio>=4.0,<6.0", "aiortc"]
dependencies = ["gradio>=4.0,<6.0", "aiortc", "numpy<3.0,>=1.0"]
classifiers = [
'Development Status :: 3 - Alpha',
'Operating System :: OS Independent',
@@ -47,7 +47,7 @@ vad = ["librosa", "onnxruntime"]
stopword = ["silero", "librosa", "onnxruntime"]
[tool.hatch.build]
artifacts = ["/backend/gradio_webrtc/templates", "*.pyi"]
artifacts = ["/backend/gradio_webrtc/templates", "*.pyi", "/Users/huangbinchao/miniconda3/envs/gradio_rtc/lib/python3.12/site-packages/gradio_webrtc/templates"]
[tool.hatch.build.targets.wheel]
packages = ["/backend/gradio_webrtc"]