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

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/lib/vendor/mediamtxPublisher.js

@@ -1,476 +0,0 @@
-// MediaMTX v1.15.3 publisher client, matching the Dockerfile default.
-// Source: https://raw.githubusercontent.com/bluenviron/mediamtx/v1.15.3/internal/servers/webrtc/publisher.js
-// Only modification: export the class as an ES module for Vite.
-/*
-MIT License
-
-Copyright (c) 2019 aler9
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-*/
-'use strict';
-
-/**
- * @callback OnError
- * @param {string} err - error.
- */
-
-/**
- * @callback OnConnected
- */
-
-/**
- * @typedef Conf
- * @type {object}
- * @property {string} url - absolute URL of the WHIP endpoint.
- * @property {string} user - username.
- * @property {string} pass - password.
- * @property {string} token - token.
- * @property {MediaStream} stream - stream that contains outgoing tracks.
- * @property {string} videoCodec - outgoing video codec.
- * @property {number} videoBitrate - outgoing video bitrate.
- * @property {string} audioCodec - outgoing audio bitrate.
- * @property {number} audioBitrate - outgoing audio bitrate.
- * @property {boolean} audioVoice - whether audio is voice.
- * @property {OnError} onError - called when there's an error.
- * @property {OnConnected} onConnected - called when connected.
- */
-
-/** WebRTC/WHIP publisher. */
-class MediaMTXWebRTCPublisher {
-  /**
-   * Create a MediaMTXWebRTCPublisher.
-   * @param {Conf} conf - configuration.
-   */
-  constructor(conf) {
-    this.retryPause = 2000;
-    this.conf = conf;
-    this.state = 'running';
-    this.restartTimeout = null;
-    this.pc = null;
-    this.offerData = null;
-    this.sessionUrl = null;
-    this.queuedCandidates = [];
-    this.#start();
-  }
-
-  /**
-   * Close the publisher and all its resources.
-   */
-  close = () => {
-    this.state = 'closed';
-
-    if (this.pc !== null) {
-      this.pc.close();
-    }
-
-    if (this.restartTimeout !== null) {
-      clearTimeout(this.restartTimeout);
-    }
-  };
-
-  static #unquoteCredential(v) {
-    return JSON.parse(`"${v}"`);
-  }
-
-  static #linkToIceServers(links) {
-    return (links !== null) ? links.split(', ').map((link) => {
-      const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
-      const ret = {
-        urls: [m[1]],
-      };
-
-      if (m[3] !== undefined) {
-        ret.username = this.#unquoteCredential(m[3]);
-        ret.credential = this.#unquoteCredential(m[4]);
-        ret.credentialType = 'password';
-      }
-
-      return ret;
-    }) : [];
-  }
-
-  static #parseOffer(offer) {
-    const ret = {
-      iceUfrag: '',
-      icePwd: '',
-      medias: [],
-    };
-
-    for (const line of offer.split('\r\n')) {
-      if (line.startsWith('m=')) {
-        ret.medias.push(line.slice('m='.length));
-      } else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {
-        ret.iceUfrag = line.slice('a=ice-ufrag:'.length);
-      } else if (ret.icePwd === '' && line.startsWith('a=ice-pwd:')) {
-        ret.icePwd = line.slice('a=ice-pwd:'.length);
-      }
-    }
-
-    return ret;
-  }
-
-  static #generateSdpFragment(od, candidates) {
-    const candidatesByMedia = {};
-    for (const candidate of candidates) {
-      const mid = candidate.sdpMLineIndex;
-      if (candidatesByMedia[mid] === undefined) {
-        candidatesByMedia[mid] = [];
-      }
-      candidatesByMedia[mid].push(candidate);
-    }
-
-    let frag = 'a=ice-ufrag:' + od.iceUfrag + '\r\n'
-      + 'a=ice-pwd:' + od.icePwd + '\r\n';
-
-    let mid = 0;
-
-    for (const media of od.medias) {
-      if (candidatesByMedia[mid] !== undefined) {
-        frag += 'm=' + media + '\r\n'
-          + 'a=mid:' + mid + '\r\n';
-
-        for (const candidate of candidatesByMedia[mid]) {
-          frag += 'a=' + candidate.candidate + '\r\n';
-        }
-      }
-      mid++;
-    }
-
-    return frag;
-  }
-
-  static #setCodec(section, codec) {
-    const lines = section.split('\r\n');
-    const lines2 = [];
-    const payloadFormats = [];
-
-    for (const line of lines) {
-      if (!line.startsWith('a=rtpmap:')) {
-        lines2.push(line);
-      } else {
-        if (line.toLowerCase().includes(codec)) {
-          payloadFormats.push(line.slice('a=rtpmap:'.length).split(' ')[0]);
-          lines2.push(line);
-        }
-      }
-    }
-
-    const lines3 = [];
-    let firstLine = true;
-
-    for (const line of lines2) {
-      if (firstLine) {
-        firstLine = false;
-        lines3.push(line.split(' ').slice(0, 3).concat(payloadFormats).join(' '));
-      } else if (line.startsWith('a=fmtp:')) {
-        if (payloadFormats.includes(line.slice('a=fmtp:'.length).split(' ')[0])) {
-          lines3.push(line);
-        }
-      } else if (line.startsWith('a=rtcp-fb:')) {
-        if (payloadFormats.includes(line.slice('a=rtcp-fb:'.length).split(' ')[0])) {
-          lines3.push(line);
-        }
-      } else {
-        lines3.push(line);
-      }
-    }
-
-    return lines3.join('\r\n');
-  }
-
-  static #setVideoBitrate(section, bitrate) {
-    let lines = section.split('\r\n');
-
-    for (let i = 0; i < lines.length; i++) {
-      if (lines[i].startsWith('c=')) {
-        lines = [...lines.slice(0, i+1), 'b=TIAS:' + (parseInt(bitrate) * 1024).toString(), ...lines.slice(i+1)];
-        break
-      }
-    }
-
-    return lines.join('\r\n');
-  }
-
-  static #setAudioBitrate(section, bitrate, voice) {
-    let opusPayloadFormat = '';
-    let lines = section.split('\r\n');
-
-    for (let i = 0; i < lines.length; i++) {
-      if (lines[i].startsWith('a=rtpmap:') && lines[i].toLowerCase().includes('opus/')) {
-        opusPayloadFormat = lines[i].slice('a=rtpmap:'.length).split(' ')[0];
-        break;
-      }
-    }
-
-    if (opusPayloadFormat === '') {
-      return section;
-    }
-
-    for (let i = 0; i < lines.length; i++) {
-      if (lines[i].startsWith('a=fmtp:' + opusPayloadFormat + ' ')) {
-        if (voice) {
-          lines[i] = 'a=fmtp:' + opusPayloadFormat + ' minptime=10;useinbandfec=1;maxaveragebitrate='
-            + (parseInt(bitrate) * 1024).toString();
-        } else {
-          lines[i] = 'a=fmtp:' + opusPayloadFormat + ' maxplaybackrate=48000;stereo=1;sprop-stereo=1;maxaveragebitrate='
-            + (parseInt(bitrate) * 1024).toString();
-        }
-      }
-    }
-
-    return lines.join('\r\n');
-  }
-
-  static #editOffer(sdp, videoCodec, audioCodec, audioBitrate, audioVoice) {
-    const sections = sdp.split('m=');
-
-    for (let i = 0; i < sections.length; i++) {
-      if (sections[i].startsWith('video')) {
-        sections[i] = this.#setCodec(sections[i], videoCodec);
-      } else if (sections[i].startsWith('audio')) {
-        sections[i] = this.#setAudioBitrate(this.#setCodec(sections[i], audioCodec), audioBitrate, audioVoice);
-      }
-    }
-
-    return sections.join('m=');
-  }
-
-  static #editAnswer(sdp, videoBitrate) {
-    const sections = sdp.split('m=');
-
-    for (let i = 0; i < sections.length; i++) {
-      if (sections[i].startsWith('video')) {
-        sections[i] = this.#setVideoBitrate(sections[i], videoBitrate);
-      }
-    }
-
-    return sections.join('m=');
-  }
-
-  #start() {
-    this.#requestICEServers()
-      .then((iceServers) => this.#setupPeerConnection(iceServers))
-      .then((offer) => this.#sendOffer(offer))
-      .then((answer) => this.#setAnswer(answer))
-      .catch((err) => {
-        this.#handleError(err.toString());
-      });
-  }
-
-  #handleError(err) {
-    if (this.state === 'running') {
-      if (this.pc !== null) {
-        this.pc.close();
-        this.pc = null;
-      }
-
-      this.offerData = null;
-
-      if (this.sessionUrl !== null) {
-        fetch(this.sessionUrl, {
-          method: 'DELETE',
-        });
-        this.sessionUrl = null;
-      }
-
-      this.queuedCandidates = [];
-      this.state = 'restarting';
-
-      this.restartTimeout = window.setTimeout(() => {
-        this.restartTimeout = null;
-        this.state = 'running';
-        this.#start();
-      }, this.retryPause);
-
-      if (this.conf.onError !== undefined) {
-        this.conf.onError(`${err}, retrying in some seconds`);
-      }
-    }
-  }
-
-  #authHeader() {
-    if (this.conf.user !== undefined && this.conf.user !== '') {
-      const credentials = btoa(`${this.conf.user}:${this.conf.pass}`);
-      return {'Authorization': `Basic ${credentials}`};
-    }
-    if (this.conf.token !== undefined && this.conf.token !== '') {
-      return {'Authorization': `Bearer ${this.conf.token}`};
-    }
-    return {};
-  }
-
-  #requestICEServers() {
-    return fetch(this.conf.url, {
-      method: 'OPTIONS',
-      headers: {
-        ...this.#authHeader(),
-      },
-    })
-      .then((res) => MediaMTXWebRTCPublisher.#linkToIceServers(res.headers.get('Link')));
-  }
-
-  #setupPeerConnection(iceServers) {
-    if (this.state !== 'running') {
-      throw new Error('closed');
-    }
-
-    this.pc = new RTCPeerConnection({
-      iceServers,
-      // https://webrtc.org/getting-started/unified-plan-transition-guide
-      sdpSemantics: 'unified-plan',
-    });
-
-    this.pc.onicecandidate = (evt) => this.#onLocalCandidate(evt);
-    this.pc.onconnectionstatechange = () => this.#onConnectionState();
-
-    this.conf.stream.getTracks().forEach((track) => {
-      this.pc.addTrack(track, this.conf.stream);
-    });
-
-    return this.pc.createOffer()
-      .then((offer) => {
-        this.offerData = MediaMTXWebRTCPublisher.#parseOffer(offer.sdp);
-
-        return this.pc.setLocalDescription(offer)
-          .then(() => offer.sdp);
-      });
-  }
-
-  #sendOffer(offer) {
-    if (this.state !== 'running') {
-      throw new Error('closed');
-    }
-
-    offer = MediaMTXWebRTCPublisher.#editOffer(
-      offer,
-      this.conf.videoCodec,
-      this.conf.audioCodec,
-      this.conf.audioBitrate,
-      this.conf.audioVoice);
-
-    return fetch(this.conf.url, {
-      method: 'POST',
-      headers: {
-        ...this.#authHeader(),
-        'Content-Type': 'application/sdp',
-      },
-      body: offer,
-    })
-      .then((res) => {
-        switch (res.status) {
-          case 201:
-            break;
-          case 400:
-            return res.json().then((e) => { throw new Error(e.error); });
-          default:
-            throw new Error(`bad status code ${res.status}`);
-        }
-
-        this.sessionUrl = new URL(res.headers.get('location'), this.conf.url).toString();
-
-        return res.text();
-      });
-  }
-
-  #setAnswer(answer) {
-    if (this.state !== 'running') {
-      throw new Error('closed');
-    }
-
-    answer = MediaMTXWebRTCPublisher.#editAnswer(answer, this.conf.videoBitrate);
-
-    return this.pc.setRemoteDescription(new RTCSessionDescription({
-      type: 'answer',
-      sdp: answer,
-    }))
-      .then(() => {
-        if (this.state !== 'running') {
-          return;
-        }
-
-        if (this.queuedCandidates.length !== 0) {
-          this.#sendLocalCandidates(this.queuedCandidates);
-          this.queuedCandidates = [];
-        }
-      });
-  }
-
-  #onLocalCandidate(evt) {
-    if (this.state !== 'running') {
-      return;
-    }
-
-    if (evt.candidate !== null) {
-      if (this.sessionUrl === null) {
-        this.queuedCandidates.push(evt.candidate);
-      } else {
-        this.#sendLocalCandidates([evt.candidate]);
-      }
-    }
-  }
-
-  #sendLocalCandidates(candidates) {
-    fetch(this.sessionUrl, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/trickle-ice-sdpfrag',
-        'If-Match': '*',
-      },
-      body: MediaMTXWebRTCPublisher.#generateSdpFragment(this.offerData, candidates),
-    })
-      .then((res) => {
-        switch (res.status) {
-          case 204:
-            break;
-          case 404:
-            throw new Error('stream not found');
-          default:
-            throw new Error(`bad status code ${res.status}`);
-        }
-      })
-      .catch((err) => {
-        this.#handleError(err.toString());
-      });
-  }
-
-  #onConnectionState() {
-    if (this.state !== 'running') {
-      return;
-    }
-
-    // "closed" can arrive before "failed" and without
-    // the close() method being called at all.
-    // It happens when the other peer sends a termination
-    // message like a DTLS CloseNotify.
-    if (this.pc.connectionState === 'failed'
-      || this.pc.connectionState === 'closed'
-    ) {
-      this.#handleError('peer connection closed');
-    } else if (this.pc.connectionState === 'connected') {
-      if (this.conf.onConnected !== undefined) {
-        this.conf.onConnected();
-      }
-    }
-  }
-
-}
-
-export default MediaMTXWebRTCPublisher;

webui/src/mic/MicApp.jsx

@@ -5,7 +5,8 @@ import useUserIdentitySync from '../hooks/useUserIdentitySync.js';
 import { RESTART_DELAY_MS } from '../lib/whepPlayback.js';
 import { ControlSystemProvider, KeyboardInputManager, GamepadInputManager, useControlSelector } from '../controls/index.js';
 import ControlHint from '../components/ControlHint/index.jsx';
-import MediaMTXWebRTCPublisher from '../lib/vendor/mediamtxPublisher.js';
+import MediaMTXWebRTCPublisher from '../../.cache/mediamtx/publisher.js';
+import useServerUrl from '../hooks/useServerUrl.js';
 
 export default function MicApp() {
   return (
@@ -19,6 +20,7 @@ export default function MicApp() {
 
 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);
@@ -109,7 +111,7 @@ function MicPage() {
         if (!isCurrent(current)) return;
         setStatus('Connecting audio…');
         current.publisher = new MediaMTXWebRTCPublisher({
-          url: new URL(source.url, window.location.href).href,
+          url: serverUrl(source.url),
           user: source.token,
           pass: source.token,
           stream: media,
@@ -135,7 +137,7 @@ function MicPage() {
       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">