do it properly with the mediamtx giant publisher file that no one maintains a package of for some god forsaken reason agh

.dockerignore

@@ -5,6 +5,7 @@
 .git
 .gitignore
 **/node_modules
+webui/.cache/mediamtx/
 # Neither the legacy state directory nor the Compose-mounted replacement may
 # enter an image build. This prevents credentials and backups from becoming
 # image layers after an operator has started using either deployment layout.

.gitignore

@@ -5,6 +5,7 @@ create_2_Open_Interface_Spec.txt
 
 logs
 node_modules/
+webui/.cache/mediamtx/
 __pycache__/
 *.py[cod]
 .pio

server/src/services/chatService/textCommands.js

@@ -91,9 +91,9 @@ function createWebReplayTextCommand(socket, sendSystemMessage, replayApi) {
 
       const requester = buildRequesterLabel(socket);
       const jobId = buildReplayJobId('web-chat');
-      const attempt = replayApi.tryTriggerReplay({ by: { source: 'web-chat', requester } });
+      const attempt = replayApi.tryTriggerReplay({ jobId, by: { source: 'web-chat', requester } });
       if (!attempt.ok) {
-        await message.reply({ content: `Replay denied: cooldown active. Try again in ${Math.ceil(attempt.remainingMs / 1000)}s.` });
+        await message.reply({ content: `Replay denied: ${attempt.error}` });
         return;
       }
 

webui/package.json

@@ -4,7 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "VITE_ROVERD_URL=https://rover.otter.land vite",
+    "predev": "node scripts/prepareMediaMtx.js",
+    "dev": "VITE_ROVERD_URL=https://rovertest.otter.land vite",
+    "prebuild": "node scripts/prepareMediaMtx.js",
     "build": "vite build",
     "lint": "eslint .",
     "test": "node --test src/controls/inputs/*.test.js src/components/GamepadMappingSettings/*.test.js",

webui/scripts/prepareMediaMtx.js

@@ -0,0 +1,45 @@
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
+
+const version = '1.15.3'; // Matches the Dockerfile's default MediaMTX version.
+const baseUrl = `https://raw.githubusercontent.com/bluenviron/mediamtx/v${version}/`;
+const output = new URL('../.cache/mediamtx/publisher.js', import.meta.url);
+const moduleHash = 'e903555223f196aca86d7adce5cf4437824435291bf9b47f284aa767fffabaaa';
+const hash = (content) => createHash('sha256').update(content).digest('hex');
+
+async function download(path, checksum) {
+  const response = await fetch(`${baseUrl}${path}`, { signal: AbortSignal.timeout(30000) });
+  if (!response.ok) throw new Error(`MediaMTX download failed: ${path} (${response.status})`);
+  const content = await response.text();
+  if (hash(content) !== checksum) throw new Error(`MediaMTX checksum mismatch: ${path}`);
+  return content;
+}
+
+let cached;
+try {
+  cached = await readFile(output, 'utf8');
+} catch (error) {
+  if (error.code !== 'ENOENT') throw error;
+}
+
+if (cached && hash(cached) === moduleHash) {
+  console.info(`Using cached MediaMTX publisher v${version}`);
+} else {
+  const [source, license] = await Promise.all([
+    download('internal/servers/webrtc/publisher.js', '6b4448939b45c30507bce59acaf434e3133e6efac3bd77d7e20fb01462958509'),
+    download('LICENSE', 'ecae73b0a23185a35a1222edc0aae5245bb9739420bad0125b0c42e935301a80'),
+  ]);
+  // Keep upstream behavior and its license; only adapt the browser-global export for Vite.
+  const module = `// MediaMTX v${version} publisher client, matching the Dockerfile default.\n`
+    + `// Source: ${baseUrl}internal/servers/webrtc/publisher.js\n`
+    + '// Only modification: export the class as an ES module for Vite.\n'
+    + `/*\n${license}\n*/\n`
+    + source.replace('window.MediaMTXWebRTCPublisher = MediaMTXWebRTCPublisher;', 'export default MediaMTXWebRTCPublisher;');
+  if (hash(module) !== moduleHash) throw new Error('Generated MediaMTX module checksum mismatch');
+  await mkdir(new URL('.', output), { recursive: true });
+  // Publish the verified module atomically so an interrupted download cannot poison the cache.
+  const temporary = new URL(`${output.href}.${process.pid}.tmp`);
+  await writeFile(temporary, module);
+  await rename(temporary, output);
+  console.info(`Downloaded and verified MediaMTX publisher v${version}`);
+}

webui/src/components/PtzLiveVideo/index.jsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useVideoRequests } from '../../hooks/useVideoRequests.js';
 import { startWhepPlayback } from '../../lib/whepPlayback.js';
 import useWhepRestart from '../../hooks/useWhepRestart.js';
+import useServerUrl from '../../hooks/useServerUrl.js';
 
 export const PTZ_CAMERA_ID = 'ptz-camera';
 
@@ -23,6 +24,7 @@ export default function PtzLiveVideo({
   statusClassName = 'pointer-events-none absolute left-1 top-1 z-20 font-medium text-slate-100 text-[0.65rem]',
   fallback = null,
 }) {
+  const serverUrl = useServerUrl();
   const videoRef = useRef(null);
   const playTimerRef = useRef(null);
   const [status, setStatus] = useState('idle');
@@ -44,7 +46,7 @@ export default function PtzLiveVideo({
     if (!enabled || shouldUseFallback || !source?.url || !videoRef.current) return undefined;
     const video = videoRef.current;
     const stop = startWhepPlayback({
-      url: source.url,
+      url: serverUrl(source.url),
       token: source.token,
       video: videoRef.current,
       startMuted,
@@ -76,7 +78,7 @@ export default function PtzLiveVideo({
       video.removeEventListener('error', handleError);
       stop();
     };
-  }, [enabled, scheduleRestart, shouldUseFallback, source?.token, source?.url, startMuted]);
+  }, [enabled, scheduleRestart, shouldUseFallback, source?.token, source?.url, startMuted, serverUrl]);
 
   useEffect(() => {
     const video = videoRef.current;

webui/src/components/RoomAudioPlayer/index.jsx

@@ -5,9 +5,11 @@ import { useSettingsNamespace } from '../../settings/index.js';
 import { AUDIO_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
 import { RESTART_DELAY_MS, startWhepPlayback } from '../../lib/whepPlayback.js';
 import useWhepRestart from '../../hooks/useWhepRestart.js';
+import useServerUrl from '../../hooks/useServerUrl.js';
 
 function StreamPlayer({ id, volume }) {
   const socket = useSocket();
+  const serverUrl = useServerUrl();
   const audio = useRef(null);
   const { restartToken, scheduleRestart } = useWhepRestart();
   useEffect(() => {
@@ -22,7 +24,7 @@ function StreamPlayer({ id, volume }) {
       token = response.token;
       if (error || response.error || !response.url) { scheduleRestart(); return; }
       stop = startWhepPlayback({
-        ...response, video: audio.current, audioOnly: true,
+        ...response, url: serverUrl(response.url), video: audio.current, audioOnly: true,
         onStatus: () => {}, onError: () => {}, scheduleRestart,
       });
     });
@@ -30,7 +32,7 @@ function StreamPlayer({ id, volume }) {
       active = false; stop?.();
       if (token && socket.connected) socket.emit('roomAudio:release', { token });
     };
-  }, [id, socket, restartToken, scheduleRestart]);
+  }, [id, socket, restartToken, scheduleRestart, serverUrl]);
   useEffect(() => { if (audio.current) audio.current.volume = Math.max(0, Math.min(1, volume)); }, [volume]);
   return <audio ref={audio} autoPlay />;
 }

webui/src/components/RoverMediaPlayer/index.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { startWhepPlayback } from '../../lib/whepPlayback.js';
 import useWhepRestart from '../../hooks/useWhepRestart.js';
+import useServerUrl from '../../hooks/useServerUrl.js';
 import { useTelemetrySelector } from '../../context/TelemetryContext.jsx';
 import {
   mainBrushAudioTelemetryEqual,
@@ -130,6 +131,7 @@ export default function RoverMediaPlayer({
   pauseVideoWhenHidden = null,
 }) {
   const assignedRoverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
+  const serverUrl = useServerUrl();
   const effectiveRoverId = roverId ?? assignedRoverId;
   const mode = useSessionSelector((state) => state.session?.mode || null);
   const configuredPauseHiddenRoverVideo = useSessionSelector(
@@ -415,7 +417,7 @@ export default function RoverMediaPlayer({
     }
     const resetMuteId = setTimeout(() => setMuted(true), 0);
     const stop = startWhepPlayback({
-      url: resolvedSessionInfo.url,
+      url: serverUrl(resolvedSessionInfo.url),
       token: resolvedSessionInfo.token,
       video: videoRef.current,
       receiveAudio: !hasDedicatedAudio,
@@ -446,6 +448,7 @@ export default function RoverMediaPlayer({
     hasDedicatedAudio,
     logAudio,
     effectiveRoverId,
+    serverUrl,
   ]);
 
   useEffect(() => {
@@ -510,7 +513,7 @@ export default function RoverMediaPlayer({
       return undefined;
     }
     return startWhepPlayback({
-      url: resolvedAudioSessionInfo.url,
+      url: serverUrl(resolvedAudioSessionInfo.url),
       token: resolvedAudioSessionInfo.token,
       video: audioRef.current,
       audioOnly: true,
@@ -533,6 +536,7 @@ export default function RoverMediaPlayer({
     audioRestartToken,
     scheduleAudioRestart,
     logAudio,
+    serverUrl,
   ]);
 
   useEffect(() => {

webui/src/components/vip/VipAudioUploadCard/VipAudioUploadCardContent.jsx

@@ -1,19 +1,16 @@
 // Vip Audio Upload Card Content
 // Purpose: Defines the Vip Audio Upload Card Content module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { fieldClass } from '../constants.js';
 import { useControlSelector } from '../../../controls/index.js';
 import ControlHint from '../../ControlHint/index.jsx';
 import { useSettingsNamespace } from '../../../settings/index.js';
-import { MAX_UPLOAD_BYTES, TARGET_SAMPLE_RATE, RTC_CONFIG } from './constants.js';
-import { bytesToBase64, buildAuthHeader } from './base64.js';
-import {
-  waitForIceGatheringComplete,
-  waitForPeerConnected,
-  configureSenderForLowLatency,
-  waitForOutboundAudioFlow,
-} from './whipTransport.js';
+import { MAX_UPLOAD_BYTES, TARGET_SAMPLE_RATE } from './constants.js';
+import { bytesToBase64 } from './base64.js';
+import { waitForOutboundAudioFlow } from './whipTransport.js';
+import MediaMTXWebRTCPublisher from '../../../../.cache/mediamtx/publisher.js';
+import useServerUrl from '../../../hooks/useServerUrl.js';
 import { mergeFloatChunks, encodeWavMono16 } from './audioCodec.js';
 import StatusIndicator from './StatusIndicator.jsx';
 import KeyPill from './KeyPill.jsx';
@@ -28,6 +25,7 @@ export default function VipAudioUploadCard({
   readyMicWhip,
   stopMicWhip,
 }) {
+  const serverUrl = useServerUrl();
   const pttActive = useControlSelector((control) => Boolean(control.state.mic?.pttActive));
   const { value: vipAudio, save: saveVipAudio } = useSettingsNamespace('vipAudio', {
     openMicEnabled: false,
@@ -47,7 +45,8 @@ export default function VipAudioUploadCard({
 
   const streamRef = useRef(null);
   const audioTrackRef = useRef(null);
-  const whipPcRef = useRef(null);
+  const micAttemptRef = useRef(null);
+  const micEnabledRef = useRef(false);
   const micActiveRef = useRef(false);
   const activeRoverRef = useRef('');
 
@@ -146,19 +145,12 @@ export default function VipAudioUploadCard({
       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;
+      const publisher = micAttemptRef.current?.publisher;
+      micAttemptRef.current = null;
+      activeRoverRef.current = '';
+      publisher?.close();
+      // The upstream client stops transport retries; release its HTTP session separately.
+      if (publisher?.sessionUrl) fetch(publisher.sessionUrl, { method: 'DELETE', keepalive: true }).catch(() => {});
       if (streamRef.current) {
         try {
           streamRef.current.getTracks().forEach((track) => track.stop());
@@ -175,14 +167,15 @@ export default function VipAudioUploadCard({
           // noop
         }
       }
-      activeRoverRef.current = '';
     },
     [stopMicWhip],
   );
 
   const startWhipMic = useCallback(
-    async (target) => {
+    async (target, attempt) => {
+      const isCurrent = () => micAttemptRef.current === attempt && activeRoverRef.current === target;
       const startPayload = await startMicWhip?.(target);
+      if (!isCurrent()) return;
       const whipUrl = String(startPayload?.whipUrl || '').trim();
       const token = String(startPayload?.token || '').trim();
       if (!whipUrl || !token) {
@@ -198,12 +191,16 @@ export default function VipAudioUploadCard({
           autoGainControl: false,
         },
       });
+      if (!isCurrent()) {
+        stream.getTracks().forEach((track) => track.stop());
+        return;
+      }
       streamRef.current = stream;
 
       const track = stream.getAudioTracks()?.[0];
       audioTrackRef.current = track || null;
       if (track) {
-        track.enabled = Boolean(openMicEnabled || pttActive);
+        track.enabled = micEnabledRef.current;
       }
       if (track?.applyConstraints) {
         try {
@@ -219,47 +216,42 @@ export default function VipAudioUploadCard({
         }
       }
 
-      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),
+      if (!isCurrent()) return;
+      attempt.publisher = new MediaMTXWebRTCPublisher({
+        url: serverUrl(whipUrl),
+        user: token,
+        pass: token,
+        stream,
+        audioCodec: 'opus',
+        audioBitrate: 64,
+        audioVoice: true,
+        onConnected: async () => {
+          if (!isCurrent()) return;
+          const pc = attempt.publisher.pc;
+          try {
+            // Report ready only after audio is flowing, including on transport reconnection.
+            await waitForOutboundAudioFlow(pc);
+            if (!isCurrent() || attempt.publisher.pc !== pc) return;
+            await readyMicWhip?.(target);
+            if (!isCurrent() || attempt.publisher.pc !== pc) return;
+            setMicState('live');
+            setMessage('');
+          } catch (error) {
+            if (!isCurrent() || attempt.publisher.pc !== pc) return;
+            await stopMicCapture(target);
+            if (micAttemptRef.current) return;
+            setMicState('error');
+            setMessage(error.message || 'Failed to start mic forwarding.');
+          }
+        },
+        onError: (message) => {
+          if (!isCurrent()) return;
+          setMicState('starting');
+          setMessage(message);
         },
-        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],
+    [readyMicWhip, startMicWhip, stopMicCapture, serverUrl],
   );
 
   const teardownClipPipeline = useCallback(async () => {
@@ -410,8 +402,6 @@ export default function VipAudioUploadCard({
   }, [ensureClipPipeline, roverId]);
 
   useEffect(() => {
-    let cancelled = false;
-
     async function syncLiveMic() {
       if (clipMode) {
         await stopMicCapture(activeRoverRef.current || roverId);
@@ -425,34 +415,31 @@ export default function VipAudioUploadCard({
       if (micActiveRef.current && activeRoverRef.current === roverId) return;
       if (!openMicEnabled && !pttActive) return;
 
+      const attempt = {};
+      micAttemptRef.current = attempt;
       try {
         setMicState('starting');
         setMessage('');
         micActiveRef.current = true;
         activeRoverRef.current = roverId;
-        await startWhipMic(roverId);
-        if (!cancelled) {
-          setMicState('live');
-        }
+        await startWhipMic(roverId, attempt);
       } catch (err) {
-        if (!cancelled) {
+        if (micAttemptRef.current === attempt) {
+          await stopMicCapture(roverId);
+          if (micAttemptRef.current) return;
           setMicState('error');
           setMessage(err?.message || 'Failed to start mic forwarding.');
         }
-        await stopMicCapture(roverId);
       }
     }
 
     syncLiveMic();
-    return () => {
-      cancelled = true;
-    };
   }, [clipMode, openMicEnabled, pttActive, roverId, startWhipMic, stopMicCapture]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    micEnabledRef.current = Boolean(!clipMode && (openMicEnabled || pttActive));
     const track = audioTrackRef.current;
-    if (!track) return;
-    track.enabled = Boolean(!clipMode && (openMicEnabled || pttActive));
+    if (track) track.enabled = micEnabledRef.current;
   }, [clipMode, openMicEnabled, pttActive]);
 
   useEffect(() => {

webui/src/components/vip/VipAudioUploadCard/base64.js

@@ -10,14 +10,3 @@ export function bytesToBase64(bytes) {
   }
   return btoa(binary);
 }
-
-function encodeBase64(value) {
-  if (typeof btoa === 'function') return btoa(value);
-  return '';
-}
-
-export function buildAuthHeader(token) {
-  if (!token) return {};
-  const encoded = encodeBase64(`${token}:${token}`);
-  return encoded ? { Authorization: `Basic ${encoded}` } : {};
-}

webui/src/components/vip/VipAudioUploadCard/constants.js

@@ -3,8 +3,3 @@
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 export const MAX_UPLOAD_BYTES = 8 * 1024 * 1024;
 export const TARGET_SAMPLE_RATE = 16000;
-export const RTC_CONFIG = {
-  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
-  bundlePolicy: 'max-bundle',
-  rtcpMuxPolicy: 'require',
-};

webui/src/components/vip/VipAudioUploadCard/whipTransport.js

@@ -1,91 +1,6 @@
 // whip Transport
 // Purpose: Defines the whip Transport module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
-export 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;
-}
-
-export 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);
-  });
-}
-
-export 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.
-  }
-}
-
 export function waitForOutboundAudioFlow(pc, timeoutMs = 6000) {
   return new Promise((resolve, reject) => {
     if (!pc) {

webui/src/hooks/useServerUrl.js

@@ -0,0 +1,8 @@
+import { useCallback } from 'react';
+import { useSessionSelector } from '../context/SessionContext.jsx';
+
+export default function useServerUrl() {
+  const publicUrl = useSessionSelector((state) => state.session?.interInstances?.profile?.publicUrl);
+  // The UI may be served by Vite while session data comes from the actual server.
+  return useCallback((url) => new URL(url, publicUrl || window.location.origin).href, [publicUrl]);
+}

webui/src/mic/MicApp.jsx

@@ -1,16 +1,59 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSocket } from '../context/SocketContext.jsx';
 import { useSessionSelector } from '../context/SessionContext.jsx';
 import useUserIdentitySync from '../hooks/useUserIdentitySync.js';
 import { RESTART_DELAY_MS } from '../lib/whepPlayback.js';
-import { waitForIceGatheringComplete } from '../components/vip/VipAudioUploadCard/whipTransport.js';
+import { ControlSystemProvider, KeyboardInputManager, GamepadInputManager, useControlSelector } from '../controls/index.js';
+import ControlHint from '../components/ControlHint/index.jsx';
+import MediaMTXWebRTCPublisher from '../../.cache/mediamtx/publisher.js';
+import useServerUrl from '../hooks/useServerUrl.js';
 
 export default function MicApp() {
+  return (
+    <ControlSystemProvider>
+      <KeyboardInputManager />
+      <GamepadInputManager />
+      <MicPage />
+    </ControlSystemProvider>
+  );
+}
+
+function MicPage() {
   const socket = useSocket();
+  const serverUrl = useServerUrl();
   const connected = useSessionSelector((state) => state.connected);
   const local = useSessionSelector((state) => state.session?.isLocalNetwork);
   const enabled = useSessionSelector((state) => state.session?.features?.roomAudio);
   const [status, setStatus] = useState('Connecting…');
+  const [pttMode, setPttMode] = useState(false);
+  const available = Boolean(connected && local && enabled);
+  const pttActive = useControlSelector((control) => Boolean(control.state.mic?.pttActive));
+  const [pointerHeld, setPointerHeld] = useState(false);
+  const [buttonKeyHeld, setButtonKeyHeld] = useState(false);
+  const held = available && pttMode && (pttActive || pointerHeld || buttonKeyHeld);
+  const transmitting = available && (!pttMode || held);
+  const mediaRef = useRef(null);
+  const transmittingRef = useRef(transmitting);
+  useLayoutEffect(() => {
+    transmittingRef.current = transmitting;
+    mediaRef.current?.getAudioTracks().forEach((track) => { track.enabled = transmitting; });
+  }, [transmitting]);
+  useEffect(() => {
+    // Pointer capture can outlive focus; release the page button when leaving the page.
+    function releaseButton() {
+      setPointerHeld(false);
+      setButtonKeyHeld(false);
+    }
+    function visibilityChange() {
+      if (document.hidden) releaseButton();
+    }
+    window.addEventListener('blur', releaseButton);
+    document.addEventListener('visibilitychange', visibilityChange);
+    return () => {
+      window.removeEventListener('blur', releaseButton);
+      document.removeEventListener('visibilitychange', visibilityChange);
+    };
+  }, []);
   useUserIdentitySync();
   useEffect(() => {
     if (!connected || !local || !enabled) return undefined;
@@ -29,14 +72,12 @@ export default function MicApp() {
       const current = attempt;
       attempt = null;
       if (!current) return;
-      clearTimeout(current.timer);
-      current.abort.abort();
-      if (current.peer) {
-        current.peer.onconnectionstatechange = null;
-        current.peer.close();
-      }
-      if (current.resource) fetch(current.resource, { method: 'DELETE', headers: current.headers, keepalive: true }).catch(() => {});
+      const publisher = current.publisher;
+      publisher?.close();
+      // Upstream close stops the peer and retry timer but leaves HTTP session cleanup to us.
+      if (publisher?.sessionUrl) fetch(publisher.sessionUrl, { method: 'DELETE', keepalive: true }).catch(() => {});
     }
+
     function retry(current, message) {
       if (!isCurrent(current)) return;
       closeAttempt();
@@ -49,7 +90,7 @@ export default function MicApp() {
       // Invalidate the previous attempt before closing it. Late async results
       // and peer events must never change the new attempt's state or timers.
       closeAttempt();
-      const current = { abort: new AbortController() };
+      const current = {};
       attempt = current;
       setStatus('Starting microphone…');
       try {
@@ -61,40 +102,30 @@ export default function MicApp() {
           const captured = await navigator.mediaDevices.getUserMedia({ audio: true });
           if (!isCurrent(current)) { captured.getTracks().forEach((track) => track.stop()); return; }
           media = captured;
+          mediaRef.current = media;
+          // New capture and reconnect attempts must respect the current PTT state immediately.
+          media.getAudioTracks().forEach((track) => { track.enabled = transmittingRef.current; });
           media.getAudioTracks().forEach((track) => { track.onended = () => retry(attempt, 'Microphone disconnected. Retrying…'); });
         }
         const source = await ack('roomAudio:start');
         if (!isCurrent(current)) return;
-        current.headers = { Authorization: `Basic ${btoa(`${source.token}:${source.token}`)}` };
-        const pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
-        current.peer = pc;
-        media.getAudioTracks().forEach((track) => pc.addTrack(track, media));
-        pc.onconnectionstatechange = () => {
-          if (!isCurrent(current)) return;
-          if (pc.connectionState === 'connected') {
-            clearTimeout(current.timer);
-            setStatus('Microphone live');
-          }
-          if (['failed', 'disconnected', 'closed'].includes(pc.connectionState)) retry(current, 'Connection lost. Retrying…');
-        };
-        await pc.setLocalDescription(await pc.createOffer());
-        if (!isCurrent(current)) return;
-        await waitForIceGatheringComplete(pc);
-        if (!isCurrent(current)) return;
-        const response = await fetch(source.url, { method: 'POST', headers: { ...current.headers, 'Content-Type': 'application/sdp' }, body: pc.localDescription.sdp, signal: AbortSignal.any([current.abort.signal, AbortSignal.timeout(10000)]) });
-        if (!response.ok) throw new Error(`Microphone connection failed (${response.status})`);
-        const location = response.headers.get('Location');
-        current.resource = location ? new URL(location, new URL(source.url, window.location.href)).href : null;
-        if (!isCurrent(current)) {
-          if (current.resource) fetch(current.resource, { method: 'DELETE', headers: current.headers, keepalive: true }).catch(() => {});
-          return;
-        }
-        const sdp = await response.text();
-        if (!isCurrent(current)) return;
-        await pc.setRemoteDescription({ type: 'answer', sdp });
-        if (!isCurrent(current)) return;
-        // A negotiation can hang without reaching a terminal peer state.
-        if (pc.connectionState !== 'connected') current.timer = setTimeout(() => retry(current, 'Connection timed out. Retrying…'), 10000);
+        setStatus('Connecting audio…');
+        current.publisher = new MediaMTXWebRTCPublisher({
+          url: serverUrl(source.url),
+          user: source.token,
+          pass: source.token,
+          stream: media,
+          audioCodec: 'opus',
+          audioBitrate: 64,
+          audioVoice: true,
+          onConnected: () => {
+            if (isCurrent(current)) setStatus('Microphone live');
+          },
+          // The publisher owns transport retries; restarting it here would create competing loops.
+          onError: (message) => {
+            if (isCurrent(current)) setStatus(message);
+          },
+        });
       } catch (error) { retry(current, `${error.message}. Retrying…`); }
     }
     start();
@@ -103,9 +134,59 @@ export default function MicApp() {
       clearTimeout(retryTimer);
       closeAttempt();
       media?.getTracks().forEach((track) => { track.onended = null; track.stop(); });
+      mediaRef.current = null;
       if (socket.connected) socket.emit('roomAudio:stop', {});
     };
-  }, [socket, connected, local, enabled]);
+  }, [socket, connected, local, enabled, serverUrl]);
   const message = !connected ? 'Connecting…' : local === false ? 'This page is available to local visitors only.' : !enabled ? 'Room audio is disabled.' : status;
-  return <main className="min-h-screen bg-neutral-950 p-4 text-slate-200"><div className="panel mx-auto max-w-md p-4"><h1 className="text-lg font-semibold">Room microphone</h1><p className="mt-2 text-sm">{message}</p></div></main>;
+  return (
+    <main className="min-h-screen bg-neutral-950 p-4 text-slate-200">
+      <div className="panel mx-auto max-w-md p-4">
+        <h1 className="text-lg font-semibold">Room microphone</h1>
+        <p className="mt-2 text-sm" role="status">{message}</p>
+        <div className="mt-4 grid grid-cols-2 gap-2" role="group" aria-label="Microphone mode">
+          {[false, true].map((ptt) => (
+            <button key={String(ptt)} type="button" aria-pressed={pttMode === ptt}
+              className={`button-dark w-full ${pttMode === ptt ? 'bg-emerald-500 text-white hover:bg-emerald-500' : ''}`}
+              onClick={() => {
+                setPointerHeld(false);
+                setButtonKeyHeld(false);
+                setPttMode(ptt);
+              }}>
+              {ptt ? 'Push to talk' : 'Open mic'}
+            </button>
+          ))}
+        </div>
+        {pttMode && (
+          <>
+            <button type="button" disabled={!available} aria-pressed={held}
+              className={`button-dark mt-4 min-h-40 w-full touch-none select-none text-2xl font-semibold ${held ? 'bg-emerald-500 text-white hover:bg-emerald-500' : ''}`}
+              onPointerDown={(event) => {
+                if (event.button !== 0 || !event.isPrimary) return;
+                event.currentTarget.setPointerCapture(event.pointerId);
+                setPointerHeld(true);
+              }}
+              onPointerUp={() => setPointerHeld(false)}
+              onPointerCancel={() => setPointerHeld(false)}
+              onLostPointerCapture={() => setPointerHeld(false)}
+              onContextMenu={(event) => event.preventDefault()}
+              onKeyDown={(event) => {
+                if (event.key !== ' ' && event.key !== 'Enter') return;
+                event.preventDefault();
+                setButtonKeyHeld(true);
+              }}
+              onKeyUp={(event) => {
+                if (event.key !== ' ' && event.key !== 'Enter') return;
+                event.preventDefault();
+                setButtonKeyHeld(false);
+              }}
+              onBlur={() => setButtonKeyHeld(false)}>
+              {held ? 'Talking…' : 'Hold to talk'}
+            </button>
+            <p className="mt-2 text-center text-sm text-slate-400">Hold the button or <ControlHint actionId="micPtt" /> to talk.</p>
+          </>
+        )}
+      </div>
+    </main>
+  );
 }