861 lines
32 KiB
TypeScript
861 lines
32 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
||
import {
|
||
Alert,
|
||
Avatar,
|
||
Badge,
|
||
Button,
|
||
Card,
|
||
Col,
|
||
Empty,
|
||
Row,
|
||
Space,
|
||
Statistic,
|
||
Tag,
|
||
Typography,
|
||
message,
|
||
} from "antd";
|
||
import {
|
||
AudioOutlined,
|
||
ClockCircleOutlined,
|
||
PauseCircleOutlined,
|
||
PlayCircleOutlined,
|
||
SoundOutlined,
|
||
SyncOutlined,
|
||
UserOutlined,
|
||
} from "@ant-design/icons";
|
||
import { useNavigate, useParams } from "react-router-dom";
|
||
import dayjs from "dayjs";
|
||
import PageHeader from "../../components/shared/PageHeader";
|
||
import {
|
||
appendRealtimeTranscripts,
|
||
completeRealtimeMeeting,
|
||
getMeetingDetail,
|
||
getRealtimeMeetingSessionStatus,
|
||
getTranscripts,
|
||
openRealtimeMeetingSocketSession,
|
||
pauseRealtimeMeeting,
|
||
type MeetingTranscriptVO,
|
||
type MeetingVO,
|
||
type RealtimeMeetingSessionStatus,
|
||
type RealtimeTranscriptItemDTO,
|
||
type RealtimeSocketSessionVO,
|
||
} from "../../api/business/meeting";
|
||
const { Text, Title } = Typography;
|
||
const SAMPLE_RATE = 16000;
|
||
const CHUNK_SIZE = 1280;
|
||
|
||
type WsSpeaker = string | { name?: string; user_id?: string | number } | undefined;
|
||
type WsMessage = {
|
||
type?: string;
|
||
code?: number | string;
|
||
message?: string;
|
||
data?: {
|
||
text?: string;
|
||
is_final?: boolean;
|
||
start?: number;
|
||
end?: number;
|
||
speaker_id?: string;
|
||
speaker_name?: string;
|
||
user_id?: string | number | null;
|
||
};
|
||
text?: string;
|
||
is_final?: boolean;
|
||
speaker?: WsSpeaker;
|
||
timestamp?: number[][];
|
||
};
|
||
|
||
type TranscriptCard = {
|
||
id: string;
|
||
speakerName: string;
|
||
userId?: string | number;
|
||
text: string;
|
||
startTime?: number;
|
||
endTime?: number;
|
||
final: boolean;
|
||
};
|
||
|
||
type RealtimeMeetingSessionDraft = {
|
||
meetingId: number;
|
||
meetingTitle: string;
|
||
asrModelName: string;
|
||
summaryModelName: string;
|
||
asrModelId: number;
|
||
mode: string;
|
||
language: string;
|
||
useSpkId: number;
|
||
enablePunctuation: boolean;
|
||
enableItn: boolean;
|
||
enableTextRefine: boolean;
|
||
saveAudio: boolean;
|
||
hotwords: Array<{ hotword: string; weight: number }>;
|
||
};
|
||
|
||
function getSessionKey(meetingId: number) {
|
||
return `realtimeMeetingSession:${meetingId}`;
|
||
}
|
||
|
||
function buildDraftFromStatus(meetingId: number, meeting: MeetingVO | null, status?: RealtimeMeetingSessionStatus | null): RealtimeMeetingSessionDraft | null {
|
||
const config = status?.resumeConfig;
|
||
if (!config?.asrModelId) {
|
||
return null;
|
||
}
|
||
return {
|
||
meetingId,
|
||
meetingTitle: meeting?.title || `实时会议 ${meetingId}`,
|
||
asrModelName: "ASR",
|
||
summaryModelName: "LLM",
|
||
asrModelId: config.asrModelId,
|
||
mode: config.mode || "2pass",
|
||
language: config.language || "auto",
|
||
useSpkId: config.useSpkId ? 1 : 0,
|
||
enablePunctuation: config.enablePunctuation !== false,
|
||
enableItn: config.enableItn !== false,
|
||
enableTextRefine: !!config.enableTextRefine,
|
||
saveAudio: !!config.saveAudio,
|
||
hotwords: config.hotwords || [],
|
||
};
|
||
}
|
||
|
||
function floatTo16BitPCM(input: Float32Array) {
|
||
const buffer = new ArrayBuffer(input.length * 2);
|
||
const view = new DataView(buffer);
|
||
for (let i = 0; i < input.length; i += 1) {
|
||
const value = Math.max(-1, Math.min(1, input[i]));
|
||
view.setInt16(i * 2, value < 0 ? value * 0x8000 : value * 0x7fff, true);
|
||
}
|
||
return buffer;
|
||
}
|
||
|
||
function resolveSpeaker(speaker?: WsSpeaker) {
|
||
if (!speaker) {
|
||
return { speakerId: "spk_0", speakerName: "Unknown", userId: undefined };
|
||
}
|
||
if (typeof speaker === "string") {
|
||
return { speakerId: speaker, speakerName: speaker, userId: undefined };
|
||
}
|
||
return {
|
||
speakerId: speaker.user_id ? String(speaker.user_id) : "spk_0",
|
||
speakerName: speaker.name || (speaker.user_id ? String(speaker.user_id) : "Unknown"),
|
||
userId: speaker.user_id,
|
||
};
|
||
}
|
||
|
||
function formatClock(totalSeconds: number) {
|
||
const hours = Math.floor(totalSeconds / 3600);
|
||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||
const seconds = totalSeconds % 60;
|
||
if (hours > 0) {
|
||
return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
||
}
|
||
return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
||
}
|
||
|
||
function formatTranscriptTime(ms?: number) {
|
||
if (ms === undefined || ms === null) {
|
||
return "--:--";
|
||
}
|
||
const totalSeconds = Math.floor(ms / 1000);
|
||
const minutes = Math.floor(totalSeconds / 60);
|
||
const seconds = totalSeconds % 60;
|
||
return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
||
}
|
||
|
||
function toMs(value?: number) {
|
||
if (value === undefined || value === null || Number.isNaN(value)) {
|
||
return undefined;
|
||
}
|
||
return Math.round(value * 1000);
|
||
}
|
||
|
||
function buildRealtimeProxyWsUrl(socketSession: RealtimeSocketSessionVO) {
|
||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||
return `${protocol}://${window.location.host}${socketSession.path}?sessionToken=${encodeURIComponent(socketSession.sessionToken)}`;
|
||
}
|
||
|
||
function normalizeWsMessage(payload: WsMessage) {
|
||
if (payload.type === "partial" || payload.type === "segment") {
|
||
const data = payload.data || {};
|
||
return {
|
||
text: data.text || "",
|
||
isFinal: payload.type === "segment" || !!data.is_final,
|
||
speaker: {
|
||
name: data.speaker_name,
|
||
user_id: data.user_id ?? data.speaker_id,
|
||
} as WsSpeaker,
|
||
startTime: toMs(data.start),
|
||
endTime: toMs(data.end),
|
||
};
|
||
}
|
||
|
||
if (!payload.text) {
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
text: payload.text,
|
||
isFinal: !!payload.is_final,
|
||
speaker: payload.speaker,
|
||
startTime: payload.timestamp?.[0]?.[0],
|
||
endTime: payload.timestamp?.[payload.timestamp.length - 1]?.[1],
|
||
};
|
||
}
|
||
|
||
export function RealtimeAsrSession() {
|
||
const navigate = useNavigate();
|
||
const { id } = useParams<{ id: string }>();
|
||
const meetingId = Number(id);
|
||
|
||
const [meeting, setMeeting] = useState<MeetingVO | null>(null);
|
||
const [sessionDraft, setSessionDraft] = useState<RealtimeMeetingSessionDraft | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [recording, setRecording] = useState(false);
|
||
const [connecting, setConnecting] = useState(false);
|
||
const [finishing, setFinishing] = useState(false);
|
||
const [pausing, setPausing] = useState(false);
|
||
const [statusText, setStatusText] = useState("待开始");
|
||
const [streamingText, setStreamingText] = useState("");
|
||
const [streamingSpeaker, setStreamingSpeaker] = useState("Unknown");
|
||
const [transcripts, setTranscripts] = useState<TranscriptCard[]>([]);
|
||
const [audioLevel, setAudioLevel] = useState(0);
|
||
const [elapsedSeconds, setElapsedSeconds] = useState(0);
|
||
const [sessionStatus, setSessionStatus] = useState<RealtimeMeetingSessionStatus | null>(null);
|
||
|
||
const transcriptRef = useRef<HTMLDivElement | null>(null);
|
||
const wsRef = useRef<WebSocket | null>(null);
|
||
const audioContextRef = useRef<AudioContext | null>(null);
|
||
const processorRef = useRef<ScriptProcessorNode | null>(null);
|
||
const audioSourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
|
||
const streamRef = useRef<MediaStream | null>(null);
|
||
const audioBufferRef = useRef<number[]>([]);
|
||
const completeOnceRef = useRef(false);
|
||
const startedAtRef = useRef<number | null>(null);
|
||
const sessionStartedRef = useRef(false);
|
||
|
||
const finalTranscriptCount = transcripts.length;
|
||
const totalTranscriptChars = useMemo(
|
||
() => transcripts.reduce((sum, item) => sum + item.text.length, 0) + streamingText.length,
|
||
[streamingText, transcripts],
|
||
);
|
||
const statusColor = recording ? "#1677ff" : connecting || finishing ? "#faad14" : "#94a3b8";
|
||
const hasRemoteActiveConnection = Boolean(sessionStatus?.activeConnection) && !recording && !connecting;
|
||
|
||
useEffect(() => {
|
||
if (!meetingId || Number.isNaN(meetingId)) {
|
||
return;
|
||
}
|
||
|
||
const loadData = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const stored = sessionStorage.getItem(getSessionKey(meetingId));
|
||
const parsedDraft = stored ? JSON.parse(stored) : null;
|
||
|
||
const [detailRes, transcriptRes, statusRes] = await Promise.all([
|
||
getMeetingDetail(meetingId),
|
||
getTranscripts(meetingId),
|
||
getRealtimeMeetingSessionStatus(meetingId),
|
||
]);
|
||
const detail = detailRes.data.data;
|
||
const realtimeStatus = statusRes.data.data;
|
||
setMeeting(detail);
|
||
setSessionStatus(realtimeStatus);
|
||
const fallbackDraft = buildDraftFromStatus(meetingId, detail, realtimeStatus);
|
||
const resolvedDraft = parsedDraft || fallbackDraft;
|
||
setSessionDraft(resolvedDraft);
|
||
if (resolvedDraft) {
|
||
sessionStorage.setItem(getSessionKey(meetingId), JSON.stringify(resolvedDraft));
|
||
}
|
||
if (realtimeStatus?.status === "PAUSED_RESUMABLE") {
|
||
setStatusText(`已暂停，可在 ${Math.max(1, Math.ceil((realtimeStatus.remainingSeconds || 0) / 60))} 分钟内继续`);
|
||
} else if (realtimeStatus?.status === "PAUSED_EMPTY") {
|
||
setStatusText("已暂停，可继续识别");
|
||
} else if (realtimeStatus?.status === "ACTIVE" && realtimeStatus?.activeConnection) {
|
||
setStatusText("当前会议已有活跃实时连接");
|
||
} else if (realtimeStatus?.status === "COMPLETING") {
|
||
setStatusText("正在生成总结");
|
||
}
|
||
setTranscripts(
|
||
(transcriptRes.data.data || []).map((item: MeetingTranscriptVO) => ({
|
||
id: String(item.id),
|
||
speakerName: item.speakerName || item.speakerId || "发言人",
|
||
text: item.content,
|
||
startTime: item.startTime,
|
||
endTime: item.endTime,
|
||
final: true,
|
||
})),
|
||
);
|
||
} catch {
|
||
message.error("加载实时会议失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
void loadData();
|
||
}, [meetingId]);
|
||
|
||
useEffect(() => {
|
||
if (!recording) {
|
||
setElapsedSeconds(0);
|
||
return;
|
||
}
|
||
const timer = window.setInterval(() => {
|
||
if (startedAtRef.current) {
|
||
setElapsedSeconds(Math.floor((Date.now() - startedAtRef.current) / 1000));
|
||
}
|
||
}, 1000);
|
||
return () => window.clearInterval(timer);
|
||
}, [recording]);
|
||
|
||
useEffect(() => {
|
||
if (!transcriptRef.current) {
|
||
return;
|
||
}
|
||
transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
|
||
}, [streamingText, transcripts]);
|
||
|
||
useEffect(() => {
|
||
const handlePageHide = () => {
|
||
if (!meetingId || completeOnceRef.current) {
|
||
return;
|
||
}
|
||
const token = localStorage.getItem("accessToken");
|
||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||
wsRef.current.send(JSON.stringify({ is_speaking: false }));
|
||
}
|
||
fetch(`/api/biz/meeting/${meetingId}/realtime/pause`, {
|
||
method: "POST",
|
||
keepalive: true,
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||
},
|
||
body: JSON.stringify({}),
|
||
}).catch(() => undefined);
|
||
};
|
||
|
||
window.addEventListener("pagehide", handlePageHide);
|
||
return () => window.removeEventListener("pagehide", handlePageHide);
|
||
}, [meetingId]);
|
||
|
||
const shutdownAudioPipeline = async () => {
|
||
processorRef.current?.disconnect();
|
||
audioSourceRef.current?.disconnect();
|
||
if (streamRef.current) {
|
||
streamRef.current.getTracks().forEach((track) => track.stop());
|
||
}
|
||
if (audioContextRef.current && audioContextRef.current.state !== "closed") {
|
||
await audioContextRef.current.close();
|
||
}
|
||
streamRef.current = null;
|
||
processorRef.current = null;
|
||
audioSourceRef.current = null;
|
||
audioContextRef.current = null;
|
||
audioBufferRef.current = [];
|
||
setAudioLevel(0);
|
||
};
|
||
|
||
const handleFatalRealtimeError = async (errorMessage: string) => {
|
||
setConnecting(false);
|
||
setRecording(false);
|
||
setStatusText("连接失败");
|
||
sessionStartedRef.current = false;
|
||
wsRef.current?.close();
|
||
wsRef.current = null;
|
||
await shutdownAudioPipeline();
|
||
startedAtRef.current = null;
|
||
message.error(errorMessage);
|
||
};
|
||
|
||
const startAudioPipeline = async () => {
|
||
if (!window.isSecureContext || !navigator.mediaDevices?.getUserMedia) {
|
||
throw new Error("当前浏览器环境不支持麦克风访问。请使用 localhost 或 HTTPS 域名访问系统。");
|
||
}
|
||
|
||
const stream = await navigator.mediaDevices.getUserMedia({
|
||
audio: {
|
||
channelCount: 1,
|
||
echoCancellation: true,
|
||
noiseSuppression: true,
|
||
},
|
||
});
|
||
const audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
|
||
const source = audioContext.createMediaStreamSource(stream);
|
||
const processor = audioContext.createScriptProcessor(4096, 1, 1);
|
||
|
||
streamRef.current = stream;
|
||
audioContextRef.current = audioContext;
|
||
audioSourceRef.current = source;
|
||
processorRef.current = processor;
|
||
|
||
processor.onaudioprocess = (event) => {
|
||
const input = event.inputBuffer.getChannelData(0);
|
||
let maxAmplitude = 0;
|
||
for (let i = 0; i < input.length; i += 1) {
|
||
const amplitude = Math.abs(input[i]);
|
||
if (amplitude > maxAmplitude) {
|
||
maxAmplitude = amplitude;
|
||
}
|
||
audioBufferRef.current.push(input[i]);
|
||
}
|
||
|
||
setAudioLevel(Math.min(100, Math.round(maxAmplitude * 180)));
|
||
|
||
while (audioBufferRef.current.length >= CHUNK_SIZE) {
|
||
const chunk = audioBufferRef.current.slice(0, CHUNK_SIZE);
|
||
audioBufferRef.current = audioBufferRef.current.slice(CHUNK_SIZE);
|
||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||
wsRef.current.send(floatTo16BitPCM(new Float32Array(chunk)));
|
||
}
|
||
}
|
||
};
|
||
|
||
source.connect(processor);
|
||
processor.connect(audioContext.destination);
|
||
};
|
||
|
||
const saveFinalTranscript = async (normalized: {
|
||
text: string;
|
||
speaker?: WsSpeaker;
|
||
startTime?: number;
|
||
endTime?: number;
|
||
}) => {
|
||
if (!normalized.text || !meetingId) {
|
||
return;
|
||
}
|
||
const speaker = resolveSpeaker(normalized.speaker);
|
||
const item: RealtimeTranscriptItemDTO = {
|
||
speakerId: speaker.speakerId,
|
||
speakerName: speaker.speakerName,
|
||
content: normalized.text,
|
||
startTime: normalized.startTime,
|
||
endTime: normalized.endTime,
|
||
};
|
||
await appendRealtimeTranscripts(meetingId, [item]);
|
||
};
|
||
|
||
const handlePause = async () => {
|
||
if (!meetingId || pausing || finishing || (!recording && !connecting)) {
|
||
return;
|
||
}
|
||
|
||
setPausing(true);
|
||
setStatusText("暂停识别中...");
|
||
try {
|
||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||
wsRef.current.send(JSON.stringify({ is_speaking: false }));
|
||
}
|
||
wsRef.current?.close();
|
||
wsRef.current = null;
|
||
sessionStartedRef.current = false;
|
||
await shutdownAudioPipeline();
|
||
const pauseRes = await pauseRealtimeMeeting(meetingId);
|
||
setSessionStatus(pauseRes.data.data);
|
||
setRecording(false);
|
||
setConnecting(false);
|
||
startedAtRef.current = null;
|
||
setStatusText(pauseRes.data.data?.hasTranscript ? "已暂停，可继续识别" : "已暂停，当前还没有转录内容");
|
||
message.success("实时识别已暂停");
|
||
} catch (error) {
|
||
setStatusText("暂停失败");
|
||
message.error(error instanceof Error ? error.message : "暂停实时识别失败");
|
||
} finally {
|
||
setPausing(false);
|
||
}
|
||
};
|
||
|
||
const handleStart = async () => {
|
||
if (!sessionDraft?.asrModelId) {
|
||
message.error("未找到实时识别配置，请返回创建页重新进入");
|
||
return;
|
||
}
|
||
if (recording || connecting) {
|
||
return;
|
||
}
|
||
|
||
setConnecting(true);
|
||
setStatusText("连接识别服务...");
|
||
sessionStartedRef.current = false;
|
||
try {
|
||
const socketSessionRes = await openRealtimeMeetingSocketSession(meetingId, {
|
||
asrModelId: sessionDraft.asrModelId,
|
||
mode: sessionDraft.mode || "2pass",
|
||
language: sessionDraft.language || "auto",
|
||
useSpkId: sessionDraft.useSpkId,
|
||
enablePunctuation: sessionDraft.enablePunctuation !== false,
|
||
enableItn: sessionDraft.enableItn !== false,
|
||
enableTextRefine: !!sessionDraft.enableTextRefine,
|
||
saveAudio: !!sessionDraft.saveAudio,
|
||
hotwords: sessionDraft.hotwords || [],
|
||
});
|
||
const socketSession = socketSessionRes.data.data;
|
||
const socket = new WebSocket(buildRealtimeProxyWsUrl(socketSession));
|
||
socket.binaryType = "arraybuffer";
|
||
wsRef.current = socket;
|
||
|
||
socket.onopen = () => {
|
||
setStatusText("识别服务连接中，等待第三方服务就绪...");
|
||
};
|
||
|
||
socket.onmessage = (event) => {
|
||
try {
|
||
const payload = JSON.parse(event.data) as WsMessage;
|
||
if (payload.type === "proxy_ready") {
|
||
if (sessionStartedRef.current) {
|
||
return;
|
||
}
|
||
sessionStartedRef.current = true;
|
||
setStatusText("启动音频采集中...");
|
||
socket.send(JSON.stringify(socketSession.startMessage || {}));
|
||
void startAudioPipeline()
|
||
.then(() => {
|
||
startedAtRef.current = Date.now();
|
||
setConnecting(false);
|
||
setRecording(true);
|
||
setSessionStatus((prev) => prev ? { ...prev, status: "ACTIVE", activeConnection: true } : prev);
|
||
setStatusText("实时识别中");
|
||
})
|
||
.catch((error) => {
|
||
void handleFatalRealtimeError(error instanceof Error ? error.message : "启动麦克风失败");
|
||
});
|
||
return;
|
||
}
|
||
|
||
if ((payload.code || payload.type === "error") && payload.message) {
|
||
setStatusText(payload.message);
|
||
void handleFatalRealtimeError(payload.message);
|
||
return;
|
||
}
|
||
|
||
const normalized = normalizeWsMessage(payload);
|
||
if (!normalized) {
|
||
return;
|
||
}
|
||
|
||
const speaker = resolveSpeaker(normalized.speaker);
|
||
if (normalized.isFinal) {
|
||
setTranscripts((prev) => [
|
||
...prev,
|
||
{
|
||
id: `${Date.now()}-${Math.random()}`,
|
||
speakerName: speaker.speakerName,
|
||
userId: speaker.userId,
|
||
text: normalized.text,
|
||
startTime: normalized.startTime,
|
||
endTime: normalized.endTime,
|
||
final: true,
|
||
},
|
||
]);
|
||
setStreamingText("");
|
||
setStreamingSpeaker("Unknown");
|
||
void saveFinalTranscript(normalized);
|
||
} else {
|
||
setStreamingText(normalized.text);
|
||
setStreamingSpeaker(speaker.speakerName);
|
||
}
|
||
} catch {
|
||
// ignore invalid payload
|
||
}
|
||
};
|
||
|
||
socket.onerror = () => {
|
||
void handleFatalRealtimeError("实时识别 WebSocket 连接失败");
|
||
};
|
||
|
||
socket.onclose = () => {
|
||
setConnecting(false);
|
||
setRecording(false);
|
||
sessionStartedRef.current = false;
|
||
setSessionStatus((prev) => prev ? { ...prev, activeConnection: false } : prev);
|
||
};
|
||
} catch (error) {
|
||
setConnecting(false);
|
||
setStatusText("启动失败");
|
||
sessionStartedRef.current = false;
|
||
message.error(error instanceof Error ? error.message : "启动实时识别失败");
|
||
}
|
||
};
|
||
|
||
const handleStop = async (navigateAfterStop = true) => {
|
||
if (!meetingId || completeOnceRef.current) {
|
||
return;
|
||
}
|
||
|
||
completeOnceRef.current = true;
|
||
setFinishing(true);
|
||
setStatusText("结束会议中...");
|
||
|
||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||
wsRef.current.send(JSON.stringify({ is_speaking: false }));
|
||
}
|
||
wsRef.current?.close();
|
||
wsRef.current = null;
|
||
sessionStartedRef.current = false;
|
||
|
||
await shutdownAudioPipeline();
|
||
|
||
try {
|
||
await completeRealtimeMeeting(meetingId, {});
|
||
sessionStorage.removeItem(getSessionKey(meetingId));
|
||
setSessionStatus((prev) => prev ? { ...prev, status: "COMPLETING", canResume: false, activeConnection: false } : prev);
|
||
setStatusText("已提交总结任务");
|
||
message.success("实时会议已结束，正在生成总结");
|
||
if (navigateAfterStop) {
|
||
navigate(`/meetings/${meetingId}`);
|
||
}
|
||
} catch (error) {
|
||
completeOnceRef.current = false;
|
||
const errorMessage = error instanceof Error ? error.message : "结束会议失败";
|
||
if (errorMessage.includes("当前还没有转录内容")) {
|
||
try {
|
||
const statusRes = await getRealtimeMeetingSessionStatus(meetingId);
|
||
setSessionStatus(statusRes.data.data);
|
||
} catch {
|
||
// ignore status refresh failure
|
||
}
|
||
setStatusText("当前还没有转录内容，可继续识别");
|
||
} else {
|
||
setStatusText("结束失败");
|
||
}
|
||
} finally {
|
||
setRecording(false);
|
||
setFinishing(false);
|
||
startedAtRef.current = null;
|
||
sessionStartedRef.current = false;
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{ padding: 24 }}>
|
||
<Card bordered={false} style={{ borderRadius: 18 }}>
|
||
<div style={{ textAlign: "center", padding: "96px 0" }}>
|
||
<SyncOutlined spin />
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!meeting) {
|
||
return (
|
||
<div style={{ padding: 24 }}>
|
||
<Card bordered={false} style={{ borderRadius: 18 }}>
|
||
<Empty description="会议不存在" />
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||
<style>{`
|
||
.ant-list-item.transcript-row,
|
||
.live-transcript-row {
|
||
display: grid !important;
|
||
grid-template-columns: 72px minmax(0, 1fr);
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
gap: 12px;
|
||
padding: 12px 0;
|
||
border-bottom: 0;
|
||
}
|
||
.transcript-time {
|
||
position: relative;
|
||
padding-top: 10px;
|
||
color: #58627f;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
.transcript-time::after {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-left: 8px;
|
||
border-radius: 50%;
|
||
background: #6e76ff;
|
||
vertical-align: middle;
|
||
}
|
||
.transcript-row:not(:last-child) .transcript-time::before,
|
||
.live-transcript-row:not(:last-child) .transcript-time::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 38px;
|
||
width: 1px;
|
||
height: calc(100% + 12px);
|
||
background: rgba(218, 223, 243, 0.96);
|
||
}
|
||
.transcript-entry {
|
||
justify-self: start;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
.transcript-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
color: #8e98b8;
|
||
}
|
||
.transcript-avatar {
|
||
background: linear-gradient(135deg, #7a84ff, #9363ff) !important;
|
||
}
|
||
.transcript-speaker {
|
||
color: #5e698d;
|
||
font-weight: 700;
|
||
}
|
||
.transcript-bubble {
|
||
display: block;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 14px 18px;
|
||
border-radius: 16px;
|
||
background: #ffffff;
|
||
border: 1px solid rgba(234, 238, 248, 1);
|
||
box-shadow: 0 12px 28px rgba(137, 149, 193, 0.08);
|
||
color: #3f496a;
|
||
line-height: 1.86;
|
||
white-space: pre-wrap;
|
||
}
|
||
`}</style>
|
||
<PageHeader
|
||
title={meeting.title || "实时识别中"}
|
||
subtitle={`会议编号 #${meeting.id} · ${dayjs(meeting.meetingTime).format("YYYY-MM-DD HH:mm")}`}
|
||
extra={<Badge color={statusColor} text={statusText} />}
|
||
/>
|
||
|
||
<div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
|
||
{!sessionDraft ? (
|
||
<Card bordered={false} style={{ borderRadius: 18 }}>
|
||
<Alert
|
||
type="warning"
|
||
showIcon
|
||
message="缺少实时识别启动配置"
|
||
description="这个会议的实时识别配置没有保存在当前浏览器中，请返回创建页重新进入。"
|
||
action={<Button size="small" onClick={() => navigate("/meeting-live-create")}>返回创建页</Button>}
|
||
/>
|
||
</Card>
|
||
) : (
|
||
<Row gutter={16} style={{ height: "100%" }}>
|
||
<Col xs={24} xl={7} style={{ height: "100%" }}>
|
||
<Card
|
||
bordered={false}
|
||
style={{ height: "100%", borderRadius: 18, boxShadow: "0 8px 22px rgba(15,23,42,0.05)" }}
|
||
bodyStyle={{ height: "100%", padding: 16, display: "flex", flexDirection: "column" }}
|
||
>
|
||
<Space direction="vertical" size={16} style={{ width: "100%" }}>
|
||
<div style={{ padding: 14, borderRadius: 16, background: "linear-gradient(135deg, #0f172a 0%, #1e40af 60%, #60a5fa 100%)", color: "#fff" }}>
|
||
<Space direction="vertical" size={8}>
|
||
<Tag color="blue" style={{ width: "fit-content", margin: 0 }}>LIVE SESSION</Tag>
|
||
<Title level={4} style={{ color: "#fff", margin: 0 }}>会中实时识别</Title>
|
||
<Text style={{ color: "rgba(255,255,255,0.82)" }}>会中页面只保留控制区和实时转写流。</Text>
|
||
</Space>
|
||
</div>
|
||
|
||
<Space style={{ width: "100%" }}>
|
||
<Button type="primary" icon={<PlayCircleOutlined />} disabled={recording || connecting || finishing || pausing || hasRemoteActiveConnection} loading={connecting} onClick={() => void handleStart()} style={{ flex: 1, height: 42 }}>
|
||
{sessionStatus?.status === "ACTIVE" && hasRemoteActiveConnection ? "连接占用中" : sessionStatus?.status === "PAUSED_EMPTY" || sessionStatus?.status === "PAUSED_RESUMABLE" ? "继续识别" : "开始识别"}
|
||
</Button>
|
||
<Button icon={<PauseCircleOutlined />} disabled={(!recording && !connecting) || finishing || pausing} loading={pausing} onClick={() => void handlePause()} style={{ flex: 1, height: 42 }}>
|
||
暂停识别
|
||
</Button>
|
||
<Button danger icon={<PauseCircleOutlined />} disabled={(!recording && !connecting && !sessionStatus?.hasTranscript) || finishing || pausing} loading={finishing} onClick={() => void handleStop(true)} style={{ flex: 1, height: 42 }}>
|
||
结束会议
|
||
</Button>
|
||
</Space>
|
||
|
||
<Row gutter={[12, 12]}>
|
||
<Col span={12}><Statistic title="已识别片段" value={finalTranscriptCount} /></Col>
|
||
<Col span={12}><Statistic title="实时字数" value={totalTranscriptChars} /></Col>
|
||
<Col span={12}><Statistic title="已录时长" value={formatClock(elapsedSeconds)} prefix={<ClockCircleOutlined />} /></Col>
|
||
<Col span={12}><Statistic title="说话人区分" value={sessionDraft.useSpkId ? "开启" : "关闭"} /></Col>
|
||
</Row>
|
||
</Space>
|
||
<div style={{ marginTop: 12, padding: 14, borderRadius: 14, background: "#fafcff", border: "1px solid #edf2ff" }}>
|
||
<Space direction="vertical" size={10} style={{ width: "100%" }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">ASR 模型</Text><Text strong>{sessionDraft.asrModelName}</Text></div>
|
||
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">总结模型</Text><Text strong>{sessionDraft.summaryModelName}</Text></div>
|
||
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">识别模式</Text><Text strong>{sessionDraft.mode}</Text></div>
|
||
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">热词数量</Text><Text strong>{sessionDraft.hotwords.length}</Text></div>
|
||
<div>
|
||
<Text type="secondary">麦克风输入</Text>
|
||
<div style={{ marginTop: 8, height: 10, borderRadius: 999, background: "#e2e8f0", overflow: "hidden" }}>
|
||
<div style={{ width: `${audioLevel}%`, height: "100%", background: "linear-gradient(90deg, #38bdf8, #2563eb)" }} />
|
||
</div>
|
||
</div>
|
||
</Space>
|
||
</div>
|
||
|
||
<div style={{ marginTop: "auto" }}>
|
||
<Alert type="info" showIcon message="异常关闭保护" description="最终转录会实时写入会议；页面关闭时会优先尝试暂停会议。当前还没有转录内容时，结束会议会被拦截并保留空会话。" />
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col xs={24} xl={17} style={{ height: "100%" }}>
|
||
<Card bordered={false} style={{ borderRadius: 18, boxShadow: "0 8px 22px rgba(15,23,42,0.05)", height: "100%" }} bodyStyle={{ padding: 0, height: "100%", display: "flex", flexDirection: "column" }}>
|
||
<div style={{ padding: "16px 20px", borderBottom: "1px solid #f0f0f0", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexShrink: 0 }}>
|
||
<div>
|
||
<Title level={4} style={{ margin: 0 }}>实时转写流</Title>
|
||
<Text type="secondary">优先展示最终片段，流式草稿保留在底部作为当前正在识别的内容。</Text>
|
||
</div>
|
||
<Space wrap>
|
||
<Tag icon={<SoundOutlined />} color={recording ? "processing" : sessionStatus?.status === "ACTIVE" && hasRemoteActiveConnection ? "processing" : sessionStatus?.status === "PAUSED_RESUMABLE" || sessionStatus?.status === "PAUSED_EMPTY" ? "warning" : "default"}>{recording ? "采集中" : connecting ? "连接中" : sessionStatus?.status === "ACTIVE" && hasRemoteActiveConnection ? "连接占用中" : sessionStatus?.status === "PAUSED_RESUMABLE" || sessionStatus?.status === "PAUSED_EMPTY" ? "已暂停" : "待命"}</Tag>
|
||
<Tag color="blue">{sessionDraft.asrModelName}</Tag>
|
||
</Space>
|
||
</div>
|
||
|
||
<div ref={transcriptRef} style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 18, background: "linear-gradient(180deg, #f8fafc 0%, #ffffff 65%, #f8fafc 100%)" }}>
|
||
{transcripts.length === 0 && !streamingText ? (
|
||
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||
<Empty description={hasRemoteActiveConnection ? "当前会议已有活跃连接，请先关闭旧连接后再继续。" : "会议已创建，点击左侧开始识别即可进入转写。"} />
|
||
</div>
|
||
) : (
|
||
<Space direction="vertical" size={12} style={{ width: "100%" }}>
|
||
{transcripts.map((item) => (
|
||
<div key={item.id} className="live-transcript-row">
|
||
<div className="transcript-time">{formatTranscriptTime(item.startTime)}</div>
|
||
<div className="transcript-entry">
|
||
<div className="transcript-meta">
|
||
<Avatar icon={<UserOutlined />} className="transcript-avatar" />
|
||
<span className="transcript-speaker">{item.speakerName}</span>
|
||
{item.userId ? <Tag color="blue">UID: {item.userId}</Tag> : null}
|
||
<Text type="secondary">{formatTranscriptTime(item.startTime)} - {formatTranscriptTime(item.endTime)}</Text>
|
||
</div>
|
||
<div className="transcript-bubble">{item.text}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{streamingText ? (
|
||
<div className="live-transcript-row">
|
||
<div className="transcript-time">--:--</div>
|
||
<div className="transcript-entry">
|
||
<div className="transcript-meta">
|
||
<Avatar icon={<UserOutlined />} className="transcript-avatar" />
|
||
<span className="transcript-speaker">{streamingSpeaker}</span>
|
||
<Tag color="processing">流式草稿</Tag>
|
||
</div>
|
||
<div className="transcript-bubble">{streamingText}</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</Space>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default RealtimeAsrSession;
|