mirror of
https://github.com/HumanAIGC-Engineering/gradio-webrtc.git
synced 2026-02-05 18:09:23 +08:00
优化resize 逻辑,numpy版本依赖
This commit is contained in:
BIN
dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl
vendored
BIN
dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl
vendored
Binary file not shown.
@@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
$: containerWidth = icon
|
$: containerWidth = icon
|
||||||
? "128px"
|
? "128px"
|
||||||
: `calc((var(--boxSize) + var(--gutter)) * ${numBars})`;
|
: `calc((var(--boxSize) + var(--gutter)) * ${numBars} + 80px)`;
|
||||||
|
|
||||||
$: if(stream_state === "open") setupAudioContext();
|
$: if(stream_state === "open") setupAudioContext();
|
||||||
|
|
||||||
@@ -90,7 +90,11 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="gradio-webrtc-boxContainer" style:width={containerWidth}>
|
<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>
|
<div class="gradio-webrtc-box"></div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
@@ -111,10 +115,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
--boxSize: 8px;
|
--boxSize: 4px;
|
||||||
--gutter: 4px;
|
--gutter: 4px;
|
||||||
}
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.split-container {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
.gradio-webrtc-box {
|
.gradio-webrtc-box {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: var(--boxSize);
|
width: var(--boxSize);
|
||||||
|
|||||||
@@ -207,7 +207,10 @@
|
|||||||
webcam_received = false;
|
webcam_received = false;
|
||||||
dispatch("error", "Too many concurrent users. Come back later!");
|
dispatch("error", "Too many concurrent users. Come back later!");
|
||||||
});
|
});
|
||||||
} else {
|
} else if (stream_state === 'waiting') {
|
||||||
|
// waiting 中不允许操作
|
||||||
|
return
|
||||||
|
}else {
|
||||||
remoteVideoPosition.init = false
|
remoteVideoPosition.init = false
|
||||||
computeLocalPosition()
|
computeLocalPosition()
|
||||||
stop(pc);
|
stop(pc);
|
||||||
@@ -237,12 +240,6 @@
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function handle_click_outside(event: MouseEvent): void {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
options_open = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
let wrapperRef: HTMLDivElement;
|
let wrapperRef: HTMLDivElement;
|
||||||
const wrapperRect = {
|
const wrapperRect = {
|
||||||
width: 0,
|
width: 0,
|
||||||
@@ -294,6 +291,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function computeLocalPosition() {
|
function computeLocalPosition() {
|
||||||
|
if (!localVideoRef || !localVideoContainerRef || !localVideoRef.videoHeight) return
|
||||||
if (remoteVideoPosition.init) {
|
if (remoteVideoPosition.init) {
|
||||||
// 存在远端视频则计算画中画
|
// 存在远端视频则计算画中画
|
||||||
let height = remoteVideoPosition.height / 4
|
let height = remoteVideoPosition.height / 4
|
||||||
@@ -321,7 +319,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
function computeRemotePosition() {
|
function computeRemotePosition() {
|
||||||
if (!remoteVideoRef.srcObject) return
|
if (!remoteVideoRef.srcObject || !remoteVideoRef.videoHeight) return
|
||||||
console.log(remoteVideoRef.videoHeight, remoteVideoRef.videoWidth)
|
console.log(remoteVideoRef.videoHeight, remoteVideoRef.videoWidth)
|
||||||
let height = wrapperRect.height - 24
|
let height = wrapperRect.height - 24
|
||||||
let width = height / remoteVideoRef.videoHeight* remoteVideoRef.videoWidth
|
let width = height / remoteVideoRef.videoHeight* remoteVideoRef.videoWidth
|
||||||
@@ -347,6 +345,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
|
wrapperRef.getBoundingClientRect()
|
||||||
|
wrapperRect.width = wrapperRef.clientWidth
|
||||||
|
wrapperRect.height = wrapperRef.clientHeight
|
||||||
computeLocalPosition()
|
computeLocalPosition()
|
||||||
computeRemotePosition()
|
computeRemotePosition()
|
||||||
})
|
})
|
||||||
@@ -378,7 +379,7 @@
|
|||||||
style:width={videoShowType=== 'picture-in-picture' ?remoteVideoPosition.width+'px':''}
|
style:width={videoShowType=== 'picture-in-picture' ?remoteVideoPosition.width+'px':''}
|
||||||
style:height={videoShowType === 'picture-in-picture' ?remoteVideoPosition.height + '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>
|
||||||
<div class="actions"
|
<div class="actions"
|
||||||
style:left={videoShowType === 'picture-in-picture' ? actionsPosition.left+'px': ''}
|
style:left={videoShowType === 'picture-in-picture' ? actionsPosition.left+'px': ''}
|
||||||
@@ -609,6 +610,7 @@
|
|||||||
background: linear-gradient(180deg, #7873F6 0%, #524DE1 100%);
|
background: linear-gradient(180deg, #7873F6 0%, #524DE1 100%);
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.start-chat {
|
.start-chat {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ requires-python = ">=3.10"
|
|||||||
authors = [{ name = "Freddy Boulton", email = "YOUREMAIL@domain.com" }]
|
authors = [{ name = "Freddy Boulton", email = "YOUREMAIL@domain.com" }]
|
||||||
keywords = ["gradio-custom-component", "gradio-template-Video", "streaming", "webrtc", "realtime"]
|
keywords = ["gradio-custom-component", "gradio-template-Video", "streaming", "webrtc", "realtime"]
|
||||||
# Add dependencies here
|
# Add dependencies here
|
||||||
dependencies = ["gradio>=4.0,<6.0", "aiortc"]
|
dependencies = ["gradio>=4.0,<6.0", "aiortc", "numpy<3.0,>=1.0"]
|
||||||
classifiers = [
|
classifiers = [
|
||||||
'Development Status :: 3 - Alpha',
|
'Development Status :: 3 - Alpha',
|
||||||
'Operating System :: OS Independent',
|
'Operating System :: OS Independent',
|
||||||
@@ -47,7 +47,7 @@ vad = ["librosa", "onnxruntime"]
|
|||||||
stopword = ["silero", "librosa", "onnxruntime"]
|
stopword = ["silero", "librosa", "onnxruntime"]
|
||||||
|
|
||||||
[tool.hatch.build]
|
[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]
|
[tool.hatch.build.targets.wheel]
|
||||||
packages = ["/backend/gradio_webrtc"]
|
packages = ["/backend/gradio_webrtc"]
|
||||||
|
|||||||
Reference in New Issue
Block a user