mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
490 lines
15 KiB
React
490 lines
15 KiB
React
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { fieldClass } from './constants.js';
|
|
import { useControlSystem } from '../../controls/index.js';
|
|
|
|
const MAX_UPLOAD_BYTES = 8 * 1024 * 1024;
|
|
const TARGET_SAMPLE_RATE = 16000;
|
|
const RTC_CONFIG = {
|
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
|
|
bundlePolicy: 'max-bundle',
|
|
rtcpMuxPolicy: 'require',
|
|
};
|
|
|
|
function bytesToBase64(bytes) {
|
|
let binary = '';
|
|
const chunkSize = 0x8000;
|
|
for (let i = 0; i < bytes.length; i += chunkSize) {
|
|
const chunk = bytes.subarray(i, i + chunkSize);
|
|
binary += String.fromCharCode(...chunk);
|
|
}
|
|
return btoa(binary);
|
|
}
|
|
|
|
function encodeBase64(value) {
|
|
if (typeof btoa === 'function') return btoa(value);
|
|
return '';
|
|
}
|
|
|
|
function buildAuthHeader(token) {
|
|
if (!token) return {};
|
|
const encoded = encodeBase64(`${token}:${token}`);
|
|
return encoded ? { Authorization: `Basic ${encoded}` } : {};
|
|
}
|
|
|
|
function waitForIceGatheringComplete(pc, timeoutMs = 1500) {
|
|
return new Promise((resolve) => {
|
|
if (!pc || pc.iceGatheringState === 'complete') {
|
|
resolve();
|
|
return;
|
|
}
|
|
const timer = setTimeout(() => {
|
|
pc.removeEventListener('icegatheringstatechange', onChange);
|
|
resolve();
|
|
}, timeoutMs);
|
|
function onChange() {
|
|
if (pc.iceGatheringState === 'complete') {
|
|
clearTimeout(timer);
|
|
pc.removeEventListener('icegatheringstatechange', onChange);
|
|
resolve();
|
|
}
|
|
}
|
|
pc.addEventListener('icegatheringstatechange', onChange);
|
|
});
|
|
}
|
|
|
|
function isPeerTransportReady(pc) {
|
|
if (!pc) return false;
|
|
const conn = pc.connectionState;
|
|
const ice = pc.iceConnectionState;
|
|
if (conn === 'connected') return true;
|
|
if (ice === 'connected' || ice === 'completed') return true;
|
|
return false;
|
|
}
|
|
|
|
function waitForPeerConnected(pc, timeoutMs = 10000) {
|
|
return new Promise((resolve, reject) => {
|
|
if (!pc) {
|
|
reject(new Error('Peer connection missing'));
|
|
return;
|
|
}
|
|
if (isPeerTransportReady(pc)) {
|
|
resolve();
|
|
return;
|
|
}
|
|
const timer = setTimeout(() => {
|
|
cleanup();
|
|
reject(new Error('Peer connection timeout'));
|
|
}, timeoutMs);
|
|
const onState = () => {
|
|
if (isPeerTransportReady(pc)) {
|
|
cleanup();
|
|
resolve();
|
|
} else if (
|
|
pc.connectionState === 'failed' ||
|
|
pc.connectionState === 'closed' ||
|
|
pc.iceConnectionState === 'failed'
|
|
) {
|
|
cleanup();
|
|
reject(new Error(`Peer connection ${pc.connectionState || pc.iceConnectionState}`));
|
|
}
|
|
};
|
|
function cleanup() {
|
|
clearTimeout(timer);
|
|
pc.removeEventListener('connectionstatechange', onState);
|
|
pc.removeEventListener('iceconnectionstatechange', onState);
|
|
}
|
|
pc.addEventListener('connectionstatechange', onState);
|
|
pc.addEventListener('iceconnectionstatechange', onState);
|
|
});
|
|
}
|
|
|
|
async function configureSenderForLowLatency(sender) {
|
|
if (!sender?.getParameters || !sender?.setParameters) return;
|
|
const params = sender.getParameters() || {};
|
|
const first = (params.encodings && params.encodings[0]) || {};
|
|
params.encodings = [
|
|
{
|
|
...first,
|
|
maxBitrate: 64000,
|
|
dtx: 'disabled',
|
|
},
|
|
];
|
|
try {
|
|
await sender.setParameters(params);
|
|
} catch {
|
|
// Browser support varies; keep defaults if rejected.
|
|
}
|
|
}
|
|
|
|
function waitForOutboundAudioFlow(pc, timeoutMs = 6000) {
|
|
return new Promise((resolve, reject) => {
|
|
if (!pc) {
|
|
reject(new Error('Peer connection missing'));
|
|
return;
|
|
}
|
|
const start = Date.now();
|
|
let baseline = -1;
|
|
const timer = setInterval(async () => {
|
|
if (Date.now() - start > timeoutMs) {
|
|
clearInterval(timer);
|
|
reject(new Error('WHIP connected but no outbound audio flow'));
|
|
return;
|
|
}
|
|
try {
|
|
const senders = pc.getSenders().filter((s) => s.track?.kind === 'audio');
|
|
for (const sender of senders) {
|
|
const stats = await sender.getStats();
|
|
for (const report of stats.values()) {
|
|
if (report.type !== 'outbound-rtp' || report.kind !== 'audio') continue;
|
|
const sent = Number(report.bytesSent || 0);
|
|
const packets = Number(report.packetsSent || 0);
|
|
if (baseline < 0) {
|
|
baseline = sent;
|
|
} else if (sent > baseline + 200 || packets > 5) {
|
|
clearInterval(timer);
|
|
resolve();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
} catch {
|
|
// Keep polling until timeout.
|
|
}
|
|
}, 250);
|
|
});
|
|
}
|
|
|
|
function StatusLight({ label, active, detail = '' }) {
|
|
return (
|
|
<div className="surface-muted flex items-center justify-between px-0.5 py-0.25 text-xs">
|
|
<span className="text-slate-300">{label}</span>
|
|
<span className="inline-flex items-center gap-0.5">
|
|
<span className={`h-2 w-2 rounded-full ${active ? 'bg-emerald-400' : 'bg-slate-600'}`} aria-hidden="true" />
|
|
<span className={active ? 'text-emerald-300' : 'text-slate-500'}>{detail || (active ? 'on' : 'off')}</span>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function VipAudioUploadCard({
|
|
ownRoverId = '',
|
|
audioForwardByRover = {},
|
|
playUploadedAudio,
|
|
stopUploadedAudio,
|
|
startMicWhip,
|
|
readyMicWhip,
|
|
stopMicWhip,
|
|
}) {
|
|
const { state: controlState } = useControlSystem();
|
|
const roverId = String(ownRoverId || '').trim();
|
|
const [selectedUpload, setSelectedUpload] = useState(null);
|
|
const [working, setWorking] = useState(false);
|
|
const [openMicEnabled, setOpenMicEnabled] = useState(false);
|
|
const [micState, setMicState] = useState('idle');
|
|
const [message, setMessage] = useState('');
|
|
const streamRef = useRef(null);
|
|
const audioTrackRef = useRef(null);
|
|
const whipPcRef = useRef(null);
|
|
const micActiveRef = useRef(false);
|
|
const activeRoverRef = useRef('');
|
|
const pttActive = Boolean(controlState?.mic?.pttActive);
|
|
|
|
const selectedForwardState = useMemo(
|
|
() => (roverId ? audioForwardByRover?.[roverId] || null : null),
|
|
[audioForwardByRover, roverId],
|
|
);
|
|
|
|
const pipelineConnected = Boolean(
|
|
selectedForwardState && selectedForwardState.state !== 'offline' && !selectedForwardState.error,
|
|
);
|
|
const uploadPlaying = Boolean(
|
|
selectedForwardState?.source === 'upload' && selectedForwardState?.state === 'playing',
|
|
);
|
|
const micRelayActive = Boolean(
|
|
selectedForwardState?.source === 'mic-whip' &&
|
|
(selectedForwardState?.state === 'starting' || selectedForwardState?.state === 'playing'),
|
|
);
|
|
const micTalking = Boolean(audioTrackRef.current && (openMicEnabled || pttActive));
|
|
|
|
const handleUploadPlay = async () => {
|
|
if (!roverId) {
|
|
setMessage('Take control of your rover first.');
|
|
return;
|
|
}
|
|
if (!selectedUpload) {
|
|
setMessage('Select an audio file first.');
|
|
return;
|
|
}
|
|
if (selectedUpload.size > MAX_UPLOAD_BYTES) {
|
|
setMessage(`File too large (max ${MAX_UPLOAD_BYTES} bytes).`);
|
|
return;
|
|
}
|
|
|
|
setWorking(true);
|
|
setMessage('');
|
|
try {
|
|
const buffer = await selectedUpload.arrayBuffer();
|
|
const dataBase64 = bytesToBase64(new Uint8Array(buffer));
|
|
await playUploadedAudio?.({
|
|
roverId,
|
|
name: selectedUpload.name,
|
|
mime: selectedUpload.type || '',
|
|
dataBase64,
|
|
});
|
|
setMessage('Upload playback started.');
|
|
} catch (err) {
|
|
setMessage(err?.message || 'Failed to play upload.');
|
|
} finally {
|
|
setWorking(false);
|
|
}
|
|
};
|
|
|
|
const handleUploadStop = async () => {
|
|
if (!roverId) {
|
|
setMessage('Take control of your rover first.');
|
|
return;
|
|
}
|
|
|
|
setWorking(true);
|
|
setMessage('');
|
|
try {
|
|
await stopUploadedAudio?.(roverId);
|
|
setMessage('Upload playback stopped.');
|
|
} catch (err) {
|
|
setMessage(err?.message || 'Failed to stop upload.');
|
|
} finally {
|
|
setWorking(false);
|
|
}
|
|
};
|
|
|
|
const stopMicCapture = useCallback(
|
|
async (targetRoverId) => {
|
|
const target = String(targetRoverId || activeRoverRef.current || '').trim();
|
|
micActiveRef.current = false;
|
|
setMicState('idle');
|
|
if (whipPcRef.current) {
|
|
try {
|
|
whipPcRef.current.getSenders().forEach((sender) => sender.track?.stop());
|
|
} catch {
|
|
// noop
|
|
}
|
|
try {
|
|
whipPcRef.current.close();
|
|
} catch {
|
|
// noop
|
|
}
|
|
}
|
|
whipPcRef.current = null;
|
|
if (streamRef.current) {
|
|
try {
|
|
streamRef.current.getTracks().forEach((track) => track.stop());
|
|
} catch {
|
|
// noop
|
|
}
|
|
}
|
|
streamRef.current = null;
|
|
audioTrackRef.current = null;
|
|
if (target) {
|
|
try {
|
|
await stopMicWhip?.(target);
|
|
} catch {
|
|
// noop
|
|
}
|
|
}
|
|
activeRoverRef.current = '';
|
|
},
|
|
[stopMicWhip],
|
|
);
|
|
|
|
const startWhipMic = useCallback(
|
|
async (target) => {
|
|
const startPayload = await startMicWhip?.(target);
|
|
const whipUrl = String(startPayload?.whipUrl || '').trim();
|
|
const token = String(startPayload?.token || '').trim();
|
|
if (!whipUrl || !token) {
|
|
throw new Error('WHIP endpoint unavailable');
|
|
}
|
|
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
audio: {
|
|
channelCount: 1,
|
|
sampleRate: TARGET_SAMPLE_RATE,
|
|
echoCancellation: false,
|
|
noiseSuppression: false,
|
|
autoGainControl: false,
|
|
},
|
|
});
|
|
streamRef.current = stream;
|
|
|
|
const track = stream.getAudioTracks()?.[0];
|
|
audioTrackRef.current = track || null;
|
|
if (track) {
|
|
track.enabled = Boolean(openMicEnabled || pttActive);
|
|
}
|
|
if (track?.applyConstraints) {
|
|
try {
|
|
await track.applyConstraints({
|
|
channelCount: 1,
|
|
sampleRate: TARGET_SAMPLE_RATE,
|
|
echoCancellation: false,
|
|
noiseSuppression: false,
|
|
autoGainControl: false,
|
|
});
|
|
} catch {
|
|
// noop
|
|
}
|
|
}
|
|
|
|
const pc = new RTCPeerConnection(RTC_CONFIG);
|
|
whipPcRef.current = pc;
|
|
pc.onconnectionstatechange = () => {
|
|
if (!micActiveRef.current) return;
|
|
const state = pc.connectionState;
|
|
if (state === 'connected') {
|
|
setMicState('live');
|
|
return;
|
|
}
|
|
if (state === 'failed' || state === 'disconnected' || state === 'closed') {
|
|
setMicState('error');
|
|
setMessage(`WHIP transport ${state}.`);
|
|
}
|
|
};
|
|
stream.getAudioTracks().forEach((audioTrack) => {
|
|
const sender = pc.addTrack(audioTrack, stream);
|
|
configureSenderForLowLatency(sender);
|
|
});
|
|
|
|
const offer = await pc.createOffer({ offerToReceiveAudio: false, offerToReceiveVideo: false });
|
|
await pc.setLocalDescription(offer);
|
|
await waitForIceGatheringComplete(pc, 1800);
|
|
|
|
const response = await fetch(whipUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/sdp',
|
|
...buildAuthHeader(token),
|
|
},
|
|
body: pc.localDescription?.sdp || offer.sdp,
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`WHIP request failed: ${response.status}`);
|
|
}
|
|
const answerSdp = await response.text();
|
|
await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
|
|
await waitForPeerConnected(pc, 10000);
|
|
await waitForOutboundAudioFlow(pc, 6000);
|
|
await readyMicWhip?.(target);
|
|
},
|
|
[openMicEnabled, pttActive, readyMicWhip, startMicWhip],
|
|
);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
async function syncMicState() {
|
|
if (!roverId) {
|
|
await stopMicCapture(activeRoverRef.current);
|
|
return;
|
|
}
|
|
if (micActiveRef.current && activeRoverRef.current === roverId) return;
|
|
if (!openMicEnabled && !pttActive) return;
|
|
|
|
try {
|
|
setMicState('starting');
|
|
setMessage('');
|
|
micActiveRef.current = true;
|
|
activeRoverRef.current = roverId;
|
|
await startWhipMic(roverId);
|
|
if (!cancelled) {
|
|
setMicState('live');
|
|
}
|
|
} catch (err) {
|
|
if (!cancelled) {
|
|
setMicState('error');
|
|
setMessage(err?.message || 'Failed to start mic forwarding.');
|
|
}
|
|
await stopMicCapture(roverId);
|
|
}
|
|
}
|
|
|
|
syncMicState();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [openMicEnabled, pttActive, roverId, startWhipMic, stopMicCapture]);
|
|
|
|
useEffect(() => {
|
|
const track = audioTrackRef.current;
|
|
if (!track) return;
|
|
track.enabled = Boolean(openMicEnabled || pttActive);
|
|
}, [openMicEnabled, pttActive]);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
stopMicCapture(activeRoverRef.current || roverId);
|
|
},
|
|
[roverId, stopMicCapture],
|
|
);
|
|
|
|
return (
|
|
<section className="surface h-full">
|
|
<div className="grid h-full gap-0.5 grid-rows-[auto_auto_auto_1fr_auto]">
|
|
<p className="text-sm text-slate-200 text-center">VIP Audio Forwarding</p>
|
|
|
|
<label className="mx-auto grid w-full max-w-sm gap-0.5 text-xs text-slate-300 text-center">
|
|
<span>Audio file (mp3 / wav / ogg)</span>
|
|
<input
|
|
className={`${fieldClass} text-center`}
|
|
type="file"
|
|
accept=".mp3,.wav,.ogg,audio/mpeg,audio/wav,audio/ogg"
|
|
disabled={working || !roverId}
|
|
onChange={(event) => setSelectedUpload(event.target.files?.[0] || null)}
|
|
/>
|
|
</label>
|
|
|
|
{selectedUpload ? (
|
|
<div className="surface-muted mx-auto w-full max-w-sm text-xs text-slate-300 text-center">
|
|
{selectedUpload.name} ({selectedUpload.size} bytes)
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex justify-center gap-0.5">
|
|
<button type="button" className="button-dark text-sm" disabled={working || !roverId} onClick={handleUploadPlay}>
|
|
{working ? 'Working...' : 'Play Upload'}
|
|
</button>
|
|
<button type="button" className="button-dark text-sm" disabled={working || !roverId} onClick={handleUploadStop}>
|
|
Stop
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid gap-0.5 lg:grid-cols-2">
|
|
<div className="space-y-0.5">
|
|
<p className="text-xs text-slate-300 text-center">Audio Path Status</p>
|
|
<StatusLight label="Forward pipe" active={pipelineConnected} detail={pipelineConnected ? 'connected' : 'offline'} />
|
|
<StatusLight label="Upload playing" active={uploadPlaying} detail={uploadPlaying ? 'active' : 'idle'} />
|
|
<StatusLight label="Mic relay" active={micRelayActive} detail={micRelayActive ? 'active' : 'idle'} />
|
|
</div>
|
|
|
|
<div className="space-y-0.5">
|
|
<p className="text-xs text-slate-300 text-center">Microphone</p>
|
|
<label className="surface-muted flex items-center justify-center gap-0.5 px-0.5 py-0.25 text-xs text-slate-300">
|
|
<input
|
|
type="checkbox"
|
|
checked={openMicEnabled}
|
|
disabled={!roverId}
|
|
onChange={(event) => setOpenMicEnabled(Boolean(event.target.checked))}
|
|
/>
|
|
<span>Open mic</span>
|
|
</label>
|
|
<StatusLight label="WHIP link" active={micState === 'live' || micState === 'starting'} detail={micState} />
|
|
<StatusLight label="PTT transmit" active={micTalking} detail={micTalking ? 'talking' : 'muted'} />
|
|
<div className="surface-muted text-center text-xs text-slate-400">PTT key: {controlState?.keymap?.micPtt?.[0] || 'm'} (hold)</div>
|
|
</div>
|
|
</div>
|
|
|
|
{message ? <div className="text-xs text-slate-400 text-center">{message}</div> : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|