fix: 前端显示真实发送频率和渲染频率
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user