fix: 前端显示真实发送频率和渲染频率

This commit is contained in:
2026-04-02 22:48:52 +08:00
parent f6d33d6b56
commit f3bb7eaae4

View File

@@ -12,17 +12,21 @@ const streamUrl = ref('')
const canRequestFrames = computed(() => props.video?.available === true)
const streamFps = computed(() => Math.max(props.video?.fps ?? 0, 30))
const modeLabel = computed(() => {
const senderProfileLabel = computed(() => {
if (!props.video) {
return '正在获取视频状态'
return '发送端 Profile: --'
}
if (props.video.source_mode === 'omnisocket-jpeg-live') {
return `${props.video.fps} FPS 实时接收`
return `发送端 Profile: ${props.video.fps} FPS`
})
const displayModeLabel = computed(() => {
if (!props.video) {
return '前端显示: 等待状态'
}
if (props.video.source_mode === 'omnisocket-waiting') {
return '尚未收到实时视频帧'
if (!canRequestFrames.value) {
return '前端显示: 等待新视频帧'
}
return `${props.video.fps} FPS`
return `前端显示: MJPEG Stream (${streamFps.value} FPS 请求)`
})
const placeholderText = computed(() => {
@@ -77,7 +81,10 @@ watch([streamFps, canRequestFrames], refreshStreamUrl, { immediate: true })
</div>
<div class="stat-card">
<span>当前模式</span>
<strong>{{ modeLabel }}</strong>
<div class="stat-lines">
<strong>{{ senderProfileLabel }}</strong>
<strong class="secondary">{{ displayModeLabel }}</strong>
</div>
</div>
</div>
@@ -186,6 +193,16 @@ h2 {
font-size: 18px;
}
.stat-lines {
display: grid;
gap: 6px;
}
.stat-lines .secondary {
font-size: 15px;
color: #a8b4ce;
}
.hint {
margin: 0;
color: #8d99b3;