340 lines
13 KiB
TypeScript
340 lines
13 KiB
TypeScript
import { Component, createSignal, onCleanup, onMount, Show, For } from 'solid-js'
|
||
import { useSearch } from '@tanstack/solid-router'
|
||
import {
|
||
CircleStop,
|
||
Cloud,
|
||
FileVideo,
|
||
MessageSquare,
|
||
Server,
|
||
Video,
|
||
} from 'lucide-solid'
|
||
import { api } from '../../lib/api'
|
||
import { permissions } from '../../lib/permissions'
|
||
import { Alert, Badge, Button, CheckboxRow, Corners, LiveDot, Meter, Reveal } from '../../components/ui'
|
||
import { DanmakuOverlay, ChatPanel } from '../../components/danmaku'
|
||
import { subscribeRoom } from '../../lib/sse'
|
||
import { subscribeChat, sendChat, type ChatMessage } from '../../lib/chat'
|
||
import { whipPublish, cfPublish, toRTC } from '../../lib/webrtc'
|
||
import type { BackendInfo, RoomEvent, StreamTarget } from '../../lib/types'
|
||
|
||
function backendLabel(kind: string): string {
|
||
return kind === 'BACKEND_KIND_CLOUDFLARE'
|
||
? 'Cloudflare Realtime'
|
||
: kind === 'BACKEND_KIND_SRS'
|
||
? 'SRS'
|
||
: kind
|
||
}
|
||
|
||
function backendIcon(kind: string) {
|
||
return kind === 'BACKEND_KIND_CLOUDFLARE' ? Cloud : Server
|
||
}
|
||
|
||
export const Publish: Component = () => {
|
||
const search = useSearch({ from: '/publish' })
|
||
const room = () => search().room
|
||
|
||
const [backends, setBackends] = createSignal<BackendInfo[]>([])
|
||
const [selected, setSelected] = createSignal<Record<string, boolean>>({
|
||
BACKEND_KIND_CLOUDFLARE: true,
|
||
BACKEND_KIND_SRS: true,
|
||
})
|
||
const [stream, setStream] = createSignal<MediaStream | null>(null)
|
||
const [running, setRunning] = createSignal(false)
|
||
const [targets, setTargets] = createSignal<StreamTarget[]>([])
|
||
const [error, setError] = createSignal('')
|
||
const [msgs, setMsgs] = createSignal<ChatMessage[]>([])
|
||
const [showDanmaku, setShowDanmaku] = createSignal(true)
|
||
|
||
let videoEl: HTMLVideoElement | undefined
|
||
const pcs: Record<string, RTCPeerConnection> = {}
|
||
|
||
onMount(() => {
|
||
api.getConfig().then((c) => setBackends(c.backends || [])).catch(() => {})
|
||
const stopRoom = subscribeRoom(room(), (ev: RoomEvent) => setTargets(ev.targets || []))
|
||
const stopChat = subscribeChat(room(), (m) => setMsgs((p) => [...p, m].slice(-100)))
|
||
onCleanup(() => {
|
||
stopRoom()
|
||
stopChat()
|
||
})
|
||
})
|
||
|
||
const send = (text: string, color?: string) => {
|
||
sendChat(room(), text, color).catch(() => {})
|
||
}
|
||
|
||
const toggle = (kind: string) => setSelected((s) => ({ ...s, [kind]: !s[kind] }))
|
||
|
||
const start = async () => {
|
||
if (!permissions.can('room:publish')) {
|
||
setError('当前角色无权发布（需要 room:publish）')
|
||
return
|
||
}
|
||
setError('')
|
||
setRunning(true)
|
||
try {
|
||
if (!stream()) {
|
||
const ms = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
|
||
setStream(ms)
|
||
if (videoEl) videoEl.srcObject = ms
|
||
}
|
||
const ms = stream()!
|
||
const wants = backends().filter((b) => selected()[b.kind])
|
||
for (const b of wants) {
|
||
const resp = await api.publish(room(), b.kind, '')
|
||
if (b.kind === 'BACKEND_KIND_SRS') {
|
||
pcs.srs = await whipPublish({
|
||
stream: resp.stream!,
|
||
token: resp.publish_token!,
|
||
local: ms,
|
||
iceServers: (resp.ice_servers || []).map(toRTC),
|
||
})
|
||
} else if (b.kind === 'BACKEND_KIND_CLOUDFLARE') {
|
||
pcs.cloudflare = await cfPublish({
|
||
sessionId: resp.session_id!,
|
||
local: ms,
|
||
iceServers: (resp.ice_servers || []).map(toRTC),
|
||
})
|
||
}
|
||
}
|
||
} catch (e: any) {
|
||
setError(String(e?.message || e))
|
||
setRunning(false)
|
||
}
|
||
}
|
||
|
||
const stopAll = async () => {
|
||
for (const k of Object.keys(pcs)) {
|
||
try {
|
||
pcs[k].close()
|
||
} catch {}
|
||
delete pcs[k]
|
||
}
|
||
for (const t of targets()) {
|
||
try {
|
||
await api.stop(room(), t.backend)
|
||
} catch {}
|
||
}
|
||
if (stream()) {
|
||
stream()!.getTracks().forEach((t) => t.stop())
|
||
setStream(null)
|
||
}
|
||
setTargets([])
|
||
setRunning(false)
|
||
}
|
||
|
||
onCleanup(stopAll)
|
||
|
||
return (
|
||
<div class="mx-auto max-w-[1400px] space-y-5 px-4 py-8 sm:px-6 sm:py-10">
|
||
<Reveal>
|
||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<p class="mono-label text-muted-foreground">publish / {room()}</p>
|
||
<h1 class="display mt-2 text-4xl sm:text-5xl">开始直播</h1>
|
||
<p class="mt-3 max-w-lg text-sm text-muted-foreground">
|
||
选择分发后端，一路推流将扇出到所选 SFU。
|
||
</p>
|
||
</div>
|
||
<div class="flex items-center gap-3 border border-line bg-card/60 px-4 py-2.5">
|
||
<LiveDot active={running()} />
|
||
<span class="mono-label">{running() ? '推流中 / live' : '待机 / standby'}</span>
|
||
<Meter active={running()} />
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Show when={!permissions.can('room:publish')}>
|
||
<Alert tone="warning">
|
||
当前角色（{permissions.role()}）无权发布，仅 admin / publisher 可推流。可切换到「观看」进入房间发弹幕。
|
||
</Alert>
|
||
</Show>
|
||
|
||
<Show when={error()}>
|
||
<Alert tone="error">{error()}</Alert>
|
||
</Show>
|
||
|
||
<div class="grid gap-4 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
|
||
<Reveal delay={1} class="min-w-0">
|
||
<div class="relative h-full border border-line bg-card/50 p-4 sm:p-5">
|
||
<Corners />
|
||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||
<div class="flex items-center gap-2">
|
||
<Video class="size-4 text-acid-lime" />
|
||
<h3 class="font-semibold">本地预览</h3>
|
||
<span class="micro-label text-muted-foreground">preview</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="font-mono text-[11px] text-muted-foreground">
|
||
{stream()
|
||
? `${stream()!.getVideoTracks().length} 视频 · ${stream()!.getAudioTracks().length} 音频`
|
||
: 'tracks · off'}
|
||
</span>
|
||
<Button variant="ghost" size="sm" onClick={() => setShowDanmaku((v) => !v)}>
|
||
{showDanmaku() ? '隐藏弹幕' : '显示弹幕'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative mt-4 aspect-video overflow-hidden border border-line/70 bg-black">
|
||
<video ref={(el) => (videoEl = el)} autoplay playsinline muted class="size-full" />
|
||
<Show when={showDanmaku()}>
|
||
<DanmakuOverlay messages={msgs} />
|
||
</Show>
|
||
<div class="pointer-events-none absolute top-3 left-3 flex flex-wrap items-center gap-1.5">
|
||
<Badge variant={running() ? 'success' : 'outline'} class="bg-black/50 shadow-sm backdrop-blur-sm">
|
||
<LiveDot active={running()} />
|
||
{running() ? 'LIVE' : 'STANDBY'}
|
||
</Badge>
|
||
</div>
|
||
<Show when={!stream()}>
|
||
<div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2.5 text-white/60">
|
||
<span class="flex size-12 items-center justify-center border border-white/20 bg-white/5">
|
||
<Video class="size-5" />
|
||
</span>
|
||
<span class="micro-label text-white/50">camera off</span>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<Button class="h-10" onClick={start} disabled={running() || !permissions.can('room:publish')}>
|
||
<Video class="size-4" />
|
||
开始推流
|
||
</Button>
|
||
<Button variant="danger" class="h-10" onClick={stopAll} disabled={!running()}>
|
||
<CircleStop class="size-4" />
|
||
停止推流
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal delay={2} class="min-w-0 self-start">
|
||
<div class="relative border border-line bg-card/50 p-4 sm:p-5">
|
||
<div class="flex items-center justify-between gap-2">
|
||
<div class="flex items-center gap-2">
|
||
<Server class="size-4 text-acid-lime" />
|
||
<h3 class="font-semibold">分发后端</h3>
|
||
<span class="micro-label text-muted-foreground">routing</span>
|
||
</div>
|
||
<Badge variant="muted">{backends().length} 路</Badge>
|
||
</div>
|
||
|
||
<div class="mt-4 space-y-2.5">
|
||
<Show
|
||
when={backends().length > 0}
|
||
fallback={<p class="text-sm text-muted-foreground">正在读取后端配置…</p>}
|
||
>
|
||
<For each={backends()}>
|
||
{(b) => {
|
||
const Icon = backendIcon(b.kind)
|
||
return (
|
||
<div
|
||
class={`flex items-center justify-between gap-3 border p-3 transition-colors ${
|
||
b.configured ? 'border-line bg-background/50' : 'border-line/60 bg-background/20 opacity-70'
|
||
}`}
|
||
>
|
||
<div class="flex min-w-0 items-center gap-3">
|
||
<span class="flex size-9 shrink-0 items-center justify-center border border-line bg-background text-foreground/80">
|
||
<Icon class="size-4" />
|
||
</span>
|
||
<div class="min-w-0">
|
||
<CheckboxRow
|
||
label={b.name}
|
||
checked={!!selected()[b.kind]}
|
||
onChange={() => toggle(b.kind)}
|
||
disabled={running()}
|
||
/>
|
||
<p class="micro-label mt-1.5 text-muted-foreground">
|
||
{backendLabel(b.kind)} · {b.primary ? '主 SFU' : '对照后端'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<Badge variant={b.configured ? 'success' : 'muted'}>
|
||
{b.configured ? '在线' : '未配置'}
|
||
</Badge>
|
||
</div>
|
||
)
|
||
}}
|
||
</For>
|
||
</Show>
|
||
</div>
|
||
|
||
<p class="mt-4 border-t border-line/70 pt-4 text-xs leading-relaxed text-muted-foreground">
|
||
推流凭证仅在服务端会话中生效，浏览器端不会出现 SFU 密钥。
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<Reveal delay={1}>
|
||
<div class="relative border border-line bg-card/50 p-4 sm:p-5">
|
||
<div class="flex items-center gap-2">
|
||
<FileVideo class="size-4 text-acid-lime" />
|
||
<h3 class="font-semibold">分发状态</h3>
|
||
<span class="micro-label text-muted-foreground">fan-out status</span>
|
||
</div>
|
||
<Show
|
||
when={targets().length > 0}
|
||
fallback={
|
||
<div class="mt-4 border border-dashed border-line px-5 py-8 text-center text-sm text-muted-foreground">
|
||
尚未开始推流
|
||
</div>
|
||
}
|
||
>
|
||
<div class="mt-4 grid gap-3 md:grid-cols-2">
|
||
<For each={targets()}>
|
||
{(t) => (
|
||
<div class="relative border border-line/80 bg-background/40 p-4">
|
||
<span class="absolute top-0 left-0 h-3 w-3 border-t-2 border-l-2 border-acid-lime" aria-hidden="true" />
|
||
<div class="flex items-center justify-between gap-2">
|
||
<span class="truncate text-sm font-medium">{backendLabel(t.backend)}</span>
|
||
<Badge variant="success">
|
||
<LiveDot active />
|
||
直播中
|
||
</Badge>
|
||
</div>
|
||
<Show when={t.stream}>
|
||
<div class="mt-3 flex flex-wrap gap-2">
|
||
<a class="mono-chip" href={`/live/${t.stream}.m3u8`} target="_blank" rel="noreferrer">
|
||
<FileVideo class="size-3" />
|
||
HLS
|
||
</a>
|
||
<a class="mono-chip" href={`/live/${t.stream}.flv`} target="_blank" rel="noreferrer">
|
||
<FileVideo class="size-3" />
|
||
FLV
|
||
</a>
|
||
</div>
|
||
</Show>
|
||
<Show when={t.session_id}>
|
||
<p class="mt-2 truncate font-mono text-[10px] text-muted-foreground">
|
||
session · {t.session_id}
|
||
</p>
|
||
</Show>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal delay={2}>
|
||
<div class="relative border border-line bg-card/50 p-4 sm:p-5">
|
||
<div class="flex items-center justify-between gap-2">
|
||
<div class="flex items-center gap-2">
|
||
<MessageSquare class="size-4 text-acid-lime" />
|
||
<h3 class="font-semibold">房间弹幕 / 聊天</h3>
|
||
<span class="micro-label text-muted-foreground">danmaku</span>
|
||
</div>
|
||
<Badge variant="muted">{msgs().length}</Badge>
|
||
</div>
|
||
<div class="mt-4 h-80 min-h-0">
|
||
<ChatPanel messages={msgs} canChat={permissions.can('room:chat')} onSend={send} />
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
)
|
||
}
|