diff --git a/electron/src/renderer/src/CameraLivePage.tsx b/electron/src/renderer/src/CameraLivePage.tsx
index 129d3a2..803410d 100644
--- a/electron/src/renderer/src/CameraLivePage.tsx
+++ b/electron/src/renderer/src/CameraLivePage.tsx
@@ -3,18 +3,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
import { apiFetch, apiFetchJson, apiUrl } from './api'
import { useAdaptiveInterval, usePageVisible } from './hooks/useAdaptiveInterval'
import { classifyRowActivity, statusPollMs } from './adaptivePoll'
-import {
- businessStatusLabel,
- formatFfmpegSpeed,
- statusPresentation,
-} from './liveStatusLabels'
+import { formatFfmpegSpeed } from './liveStatusLabels'
import type { ControlStatusPayload, LiveDetailState, GpuCaps } from './types/live'
import { liveDetailFromStatus } from './types/live'
-import QualityGuardBanner from './components/QualityGuardBanner'
-import LivePipeline from './components/LivePipeline'
-import LiveYoutubeMonitor from './components/LiveYoutubeMonitor'
import LivePulse from './components/ui/LivePulse'
import CameraLocalPreview from './components/CameraLocalPreview'
+import WorkerChecklist from './components/worker/WorkerChecklist'
+import WorkerFlowStrip, { type FlowStep } from './components/worker/WorkerFlowStrip'
+import WorkerMetrics from './components/worker/WorkerMetrics'
import {
formatControlOutput,
mergeYoutubeOptionsForUi,
@@ -23,7 +19,6 @@ import {
} from './youtubeLiveUtils'
const CAMERA_PROCESS = 'camera_youtube'
-const CAMERA_RELAY_ID = 'camera'
type CaptureDevice = { id: string; name: string; kind: 'video' | 'audio' }
@@ -56,6 +51,48 @@ const DEFAULT_CONFIG: CameraConfig = {
youtube_watch_url: '',
}
+function cameraFlowSteps(
+ live: LiveDetailState,
+ hasDevice: boolean,
+ hasKey: boolean,
+ useGpu: boolean,
+): FlowStep[] {
+ const s = (live.businessStatus || '').trim().toLowerCase()
+ const pushing = live.isPushing || live.processStatus === 'online'
+
+ let capture: FlowStep['state'] = hasDevice ? (pushing ? 'active' : 'pending') : 'warn'
+ let encode: FlowStep['state'] = 'idle'
+ let out: FlowStep['state'] = hasKey ? 'idle' : 'warn'
+
+ if (s === 'streaming') {
+ capture = 'active'
+ encode = 'active'
+ out = 'active'
+ } else if (s === 'relay_slow' || s === 'source_stalled') {
+ capture = 'active'
+ encode = 'warn'
+ out = 'warn'
+ } else if (s === 'youtube_key_rejected') {
+ capture = hasDevice ? 'active' : 'warn'
+ encode = 'active'
+ out = 'error'
+ } else if (pushing) {
+ capture = 'active'
+ encode = 'pending'
+ out = 'pending'
+ } else if (hasDevice && hasKey) {
+ capture = 'pending'
+ encode = 'idle'
+ out = 'pending'
+ }
+
+ return [
+ { id: 'capture', label: '采集', title: '摄像头 / 麦克风', state: capture },
+ { id: 'encode', label: '编码', title: useGpu ? 'NVENC' : 'x264', state: encode },
+ { id: 'youtube', label: '输出', title: 'YouTube RTMPS', state: out },
+ ]
+}
+
export default function CameraLivePage({
backendReady,
gpuCaps,
@@ -67,7 +104,7 @@ export default function CameraLivePage({
const [deviceErr, setDeviceErr] = useState
(null)
const [deviceBusy, setDeviceBusy] = useState(false)
const [config, setConfig] = useState(DEFAULT_CONFIG)
- const [configStatus, setConfigStatus] = useState('就绪')
+ const [configStatus, setConfigStatus] = useState('')
const [saveBusy, setSaveBusy] = useState(false)
const [ytIniModel, setYtIniModel] = useState({
keys: [''],
@@ -83,6 +120,7 @@ export default function CameraLivePage({
recentError: '',
})
const [loadingAction, setLoadingAction] = useState(null)
+ const [logOpen, setLogOpen] = useState(false)
const videoDevices = useMemo(() => devices.filter((d) => d.kind === 'video'), [devices])
const audioDevices = useMemo(() => devices.filter((d) => d.kind === 'audio'), [devices])
@@ -91,6 +129,7 @@ export default function CameraLivePage({
const keyConfigured = !!youtubeIniActiveKey(ytIniModel)
const cameraConfigured = !!config.video_device.trim()
const ready = keyConfigured && cameraConfigured && backendReady
+ const useGpu = !['否', '0', 'false', '关', 'off'].includes((config.use_gpu || '').toLowerCase())
const loadDevices = useCallback(async () => {
setDeviceBusy(true)
@@ -111,8 +150,7 @@ export default function CameraLivePage({
const loadConfig = useCallback(async () => {
try {
const data = await apiFetchJson<{ config?: Partial }>(apiUrl('/camera/config'))
- const c = { ...DEFAULT_CONFIG, ...(data.config ?? {}) }
- setConfig(c)
+ setConfig({ ...DEFAULT_CONFIG, ...(data.config ?? {}) })
} catch (e) {
setConfigStatus(e instanceof Error ? e.message : String(e))
}
@@ -188,8 +226,7 @@ export default function CameraLivePage({
const data = await apiFetchJson(
`${apiUrl('/status')}?process=${encodeURIComponent(CAMERA_PROCESS)}`,
)
- const ps = String(data.process_status ?? 'unknown')
- setLiveDetail(liveDetailFromStatus(data, ps))
+ setLiveDetail(liveDetailFromStatus(data, String(data.process_status ?? 'unknown')))
} catch {
/* ignore */
}
@@ -240,198 +277,88 @@ export default function CameraLivePage({
[backendReady, saveConfig, saveYoutubeKey, onControlNotice, refreshStatus],
)
- const statusLine = statusPresentation(liveDetail.processStatus)
- const businessLabel = businessStatusLabel(liveDetail.businessStatus, liveDetail.businessNote)
+ const checklist = useMemo(
+ () => [
+ {
+ id: 'device',
+ label: '已选择摄像头',
+ ok: cameraConfigured,
+ hint: '从下方列表选择视频设备',
+ },
+ {
+ id: 'encode',
+ label: `编码 ${config.width}×${config.height} @ ${config.fps}fps · ${config.bitrate}kbps`,
+ ok: cameraConfigured,
+ hint: '保存采集参数',
+ },
+ {
+ id: 'key',
+ label: 'YouTube 串流密钥',
+ ok: keyConfigured,
+ hint: '填写右侧密钥后保存',
+ },
+ {
+ id: 'backend',
+ label: '控制服务就绪',
+ ok: backendReady,
+ hint: '等待 web2 启动',
+ },
+ ],
+ [cameraConfigured, config, keyConfigured, backendReady],
+ )
- const watchItems = useMemo(
- () => [{ relayId: CAMERA_RELAY_ID, label: '摄像头线路', input: config.youtube_watch_url.trim() }],
- [config.youtube_watch_url],
+ const flowSteps = useMemo(
+ () => cameraFlowSteps(liveDetail, cameraConfigured, keyConfigured, useGpu),
+ [liveDetail, cameraConfigured, keyConfigured, useGpu],
)
return (
-
-
- 本地画面预览
-
- 推流前可先确认摄像头画面正常（与 FFmpeg 推流使用同一物理设备，预览走浏览器采集）。
+
+
+
-
-
-
-
📷 物理摄像头直播
-
摄像头 → YouTube
-
- 使用本机摄像头与麦克风采集画面，经 FFmpeg 推送到 YouTube 直播间。与抖音转播线路独立，请勿同时开启冲突进程。
-
-
-
-
-
- {ready ? '可启动' : !keyConfigured ? '缺少密钥' : !cameraConfigured ? '未选摄像头' : '未就绪'}
-
-
- {statusLine.line}
-
-
+
+
+
+ 画面预览
+
+ {config.video_device.trim() || '未选择设备'}
+
+
+
+
+