Fix licensing.

src/App.tsx

@@ -14,7 +14,6 @@ import { Provider as JotaiProvider } from "jotai";
 import { Home } from "./Home.tsx";
 import { Video } from "./Video.tsx";
 import { Version } from "./Version.tsx";
-import { Login } from "./Login.tsx";
 import "./App.css";
 
 function App() {
@@ -44,10 +43,6 @@ const router = createBrowserRouter([
     path: "/video",
     element: <Video />,
   },
-  {
-    path: "/login",
-    element: <Login />,
-  },
 ]);
 
 export default App;

src/Home.tsx

@@ -9,43 +9,25 @@
 // defined by the Mozilla Public License, v. 2.0.
 //
 import { AppNav, Footer } from "./components/AppNav.tsx";
-import { Container, Row, Col, Image, Card } from "react-bootstrap";
+import { Container, Row, Col, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
+import { createQueryAtom } from "./utils/query.ts";
 import { DiagnosticsCard } from "./components/DiagnosticsCard.tsx";
 
-const statusStringQuery = async () => {
-  const resp = await fetch("api/status");
-  if (!resp.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-const statusStringQueryAtom = atomWithQuery(() => ({
-  queryKey: ["status_string"],
-  queryFn: statusStringQuery,
-  refetchInterval: 500, // 0.5s
-}));
-const statusStringAtom = atom((get) => {
-  const response = get(statusStringQueryAtom);
-  if (response.isPending || response.isError || !response.data.status) {
+const identityStringQueryAtom = createQueryAtom("api/identity", {
+  refetchInterval: 500,
+});
+const identityStringAtom = atom((get) => {
+  const response = get(identityStringQueryAtom);
+  if (response.isPending || response.isError) {
     return "N/A";
   }
   return response.data.message;
 });
 
-const uptimeQuery = async () => {
-  const resp = await fetch("api/uptime");
-  if (!resp.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-const uptimeQueryAtom = atomWithQuery(() => ({
-  queryKey: ["uptime"],
-  queryFn: uptimeQuery,
-  refetchInterval: 1000, // 1s
-}));
+const uptimeQueryAtom = createQueryAtom("api/uptime", {
+  refetchInterval: 1000,
+});
 const uptimeAtom = atom((get) => {
   const response = get(uptimeQueryAtom);
   if (response.isPending || response.isError) {
@@ -54,16 +36,14 @@ const uptimeAtom = atom((get) => {
   return response.data.uptime.toFixed(1);
 });
 
-function StatusCard() {
-  const statusString = useAtomValue(statusStringAtom);
+function IdentityCard() {
+  const identityString = useAtomValue(identityStringAtom);
   return (
-    <Card className="padded">
-      <Row>
-        <p>Status:</p>
-      </Row>
-      <Row>
-        <p>{statusString}</p>
-      </Row>
+    <Card className="padded h-100">
+      <Card.Title>Identity</Card.Title>
+      <Card.Body>
+        <div style={{ whiteSpace: "pre-line" }}>{identityString}</div>
+      </Card.Body>
     </Card>
   );
 }
@@ -71,13 +51,11 @@ function StatusCard() {
 function UptimeCard() {
   const uptime = useAtomValue(uptimeAtom);
   return (
-    <Card className="padded">
-      <Row>
-        <p>Uptime:</p>
-      </Row>
-      <Row>
+    <Card className="padded h-100">
+      <Card.Title>Uptime</Card.Title>
+      <Card.Body>
         <p>{uptime}s</p>
-      </Row>
+      </Card.Body>
     </Card>
   );
 }
@@ -92,7 +70,7 @@ export function Home() {
             <UptimeCard />
           </Col>
           <Col>
-            <StatusCard />
+            <IdentityCard />
           </Col>
         </Row>
         <Row className="vert-padded">

src/Login.tsx

@@ -1,57 +0,0 @@
-//
-// Copyright 2026 James Pace
-//
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at https://mozilla.org/MPL/2.0/.
-//
-// This Source Code Form is "Incompatible With Secondary Licenses", as
-// defined by the Mozilla Public License, v. 2.0.
-//
-import { Container, Row, Col, Card, Button, Form } from "react-bootstrap";
-import { atom, useAtomValue } from "jotai";
-import { useNavigate } from "react-router-dom";
-
-export function Login() {
-  return (
-    <div>
-      <Container className="vert-padded">
-        <LoginForm />
-      </Container>
-    </div>
-  );
-}
-
-function LoginForm() {
-  const navigate = useNavigate();
-
-  const onSubmit = async (event) => {
-    event.preventDefault();
-
-    console.log(event.target);
-    const formEntries = new FormData(event.target);
-    const formData = Object.fromEntries(formEntries);
-    console.log(formData);
-
-    const resp = await fetch("/api/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(formData),
-    });
-    if (resp.redirected) {
-      navigate("/");
-    }
-  };
-  return (
-    <Form onSubmit={onSubmit}>
-      <Form.Group controlId="passwordForm">
-        <Form.Label>Password</Form.Label>
-        <Form.Control name="password" type="password" />
-      </Form.Group>
-
-      <Button type="submit">Submit</Button>
-    </Form>
-  );
-}

src/Version.tsx

@@ -11,49 +11,62 @@
 import { AppNav, Footer } from "./components/AppNav.tsx";
 import { Container, Row, Col, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
+import { createQueryAtom } from "./utils/query.ts";
 import YAML from "yaml";
 
-const versionQueryFn = async () => {
-  const resp = await fetch("api/build_info");
-  if (!resp.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-
-const versionQueryAtom = atomWithQuery(() => ({
-  queryKey: ["version"],
-  queryFn: versionQueryFn,
-}));
-
-const versionAtom = atom((get) => {
-  const version = get(versionQueryAtom);
-  if (version.isPending) {
+const buildInfoQueryAtom = createQueryAtom("api/build_info");
+const buildInfoAtom = atom((get) => {
+  const buildInfo = get(buildInfoQueryAtom);
+  if (buildInfo.isPending) {
     return "Loading...";
   }
-  if (version.isError) {
+  if (buildInfo.isError) {
     return "Error loading!";
   }
-  if (!version.data.status) {
-    return "Can not find version";
+  if (!buildInfo.data.status) {
+    return "Can not find buildInfo";
   }
-  return YAML.stringify(version.data.message);
+  return YAML.stringify(buildInfo.data.message);
+});
+
+const versionNumberQueryAtom = createQueryAtom("api/version_number");
+const versionNumberAtom = atom((get) => {
+  const versionNumber = get(versionNumberQueryAtom);
+  if (versionNumber.isPending || versionNumber.isError) {
+    return "...";
+  }
+  if (!versionNumber.data.status) {
+    return "Can not find version number.";
+  }
+  return versionNumber.data.version;
 });
 
 export function Version() {
-  let versionText = useAtomValue(versionAtom);
+  let buildInfoText = useAtomValue(buildInfoAtom);
+  let versionText = useAtomValue(versionNumberAtom);
 
   return (
     <div>
       <AppNav />
       <Container className="vert-padded">
-        <Card className="padded">
-          <Card.Title>project.yaml</Card.Title>
-          <Card.Body>
-            <pre>{versionText}</pre>
-          </Card.Body>
-        </Card>
+        <Row>
+          <Col>
+            <Card className="padded">
+              <Card.Title>Version Number</Card.Title>
+              <Card.Body>{versionText}</Card.Body>
+            </Card>
+          </Col>
+        </Row>
+        <Row className="vert-padded">
+          <Col>
+            <Card className="padded">
+              <Card.Title>project.yaml</Card.Title>
+              <Card.Body>
+                <pre>{buildInfoText}</pre>
+              </Card.Body>
+            </Card>
+          </Col>
+        </Row>
       </Container>
       <Footer />
     </div>

src/Video.tsx

@@ -9,13 +9,68 @@
 // defined by the Mozilla Public License, v. 2.0.
 //
 import { AppNav, Footer } from "./components/AppNav.tsx";
-import { Container, Row, Col, Image, Card } from "react-bootstrap";
-import { WebRTCVideo } from "mediamtx-webrtc-react";
+import { Container, Row, Col, Card } from "react-bootstrap";
+import { MediaMtxPlayer } from "./external/MediaMtxPlayer.tsx";
+import { atom, useAtomValue, useAtom } from "jotai";
+import { createQueryAtom } from "./utils/query.ts";
+
+const tokenQueryAtom = createQueryAtom("api/mediamtx/login", { retry: true });
+const tokenAtom = atom((get) => {
+  const response = get(tokenQueryAtom);
+  if (response.isPending || response.isError) {
+    return null;
+  }
+  return response.data.token;
+});
+
+const streamsQueryAtom = createQueryAtom("api/available_streams");
+const streamsAtom = atom((get) => {
+  const response = get(streamsQueryAtom);
+  if (response.isPending || response.isError) {
+    return [];
+  }
+  return response.data.streams;
+});
+const videoDisplayPortAtom = atom((get) => {
+  const response = get(streamsQueryAtom);
+  if (response.isPending || response.isError) {
+    return null;
+  }
+  return response.data.port;
+});
+
+const selectedStreamAtom = atom("image");
+const imageStreamURIAtom = atom((get) => {
+  const port = get(videoDisplayPortAtom);
+  const selectedStream = get(selectedStreamAtom);
+  if (port === null || selectedStream === null) {
+    return null;
+  }
+  const imageStreamURI =
+    "http://" +
+    window.location.hostname +
+    ":" +
+    port +
+    "/" +
+    selectedStream +
+    "/whep";
+  return imageStreamURI;
+});
 
 export function Video() {
   const streamName = "image";
-  const imageStreamURI =
-    "http://" + window.location.hostname + ":8889/" + streamName + "/whep";
+
+  const imageStreamURI = useAtomValue(imageStreamURIAtom);
+
+  const token = useAtomValue(tokenAtom);
+
+  const availableStreams = useAtomValue(streamsAtom);
+
+  const [selectedStream, setSelectedStream] = useAtom(selectedStreamAtom);
+
+  const handleSelect = (event) => {
+    setSelectedStream(event.target.value);
+  };
 
   return (
     <div>
@@ -24,14 +79,23 @@ export function Video() {
         <Card className="padded">
           <Row>
             <Col lg={8}>
-              <WebRTCVideo
-                url={imageStreamURI}
-                controls
-                autoPlay
-                style={{ width: "100%", maxWidth: "800px" }}
-              />
+              <MediaMtxPlayer url={imageStreamURI} token={token} />
+            </Col>
+            <Col lg={4}>
+              <p>Available Streams: </p>
+              {availableStreams.map((stream, index) => (
+                <div style={{ display: "flex", gap: "8px" }}>
+                  <input
+                    type="radio"
+                    name="selected_stream"
+                    value={stream}
+                    checked={selectedStream === stream}
+                    onChange={handleSelect}
+                  />
+                  {stream}
+                </div>
+              ))}
             </Col>
-            <Col lg={4}>Showing stream: "{streamName}".</Col>
           </Row>
         </Card>
       </Container>

src/components/AppNav.tsx

@@ -16,7 +16,7 @@ export function AppNav() {
     <Navbar bg="dark" variant="dark" expand="sm" className="py-0">
       <Container className="me-auto">
         <Navbar.Brand as={Link} to="/">
-          J7s-Bridge
+          am_i_up
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="collapse-navbar-nav" />
         <Navbar.Collapse id="collapse-navbar-nav">

src/components/DiagnosticsCard.tsx

@@ -1,3 +1,13 @@
+//
+// Copyright 2026 James Pace
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+//
+// This Source Code Form is "Incompatible With Secondary Licenses", as
+// defined by the Mozilla Public License, v. 2.0.
+//
 import React, { useState } from "react";
 import { Button, ListGroup, Collapse } from "react-bootstrap";
 import {
@@ -8,20 +18,11 @@ import {
 } from "react-bootstrap-icons";
 import { Container, Row, Col, Table, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
+import { createQueryAtom } from "../utils/query.ts";
 
-const diagQueryFn = async () => {
-  const resp = await fetch("api/diagnostics");
-  if (!resp.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return resp.json();
-};
-
-const diagQueryAtom = atomWithQuery(() => ({
-  queryKey: ["diagnostics"],
-  queryFn: diagQueryFn,
-}));
+const diagQueryAtom = createQueryAtom("api/diagnostics", {
+  refetchInterval: 1000,
+});
 
 const diagAtom = atom((get) => {
   const diag = get(diagQueryAtom);
@@ -80,11 +81,15 @@ function LevelIndicator(props: Any) {
   return <CircleFill color="grey" />;
 }
 
-function MessageText(props: Any) {
+function TitleText(props: Any) {
   if (props.message === "") {
-    return <div></div>;
+    return <p>{props.name}</p>;
   }
-  return <div>Message: {props.message}</div>;
+  return (
+    <p>
+      {props.name}: {props.message}
+    </p>
+  );
 }
 
 function ValuesTable(props: Any) {
@@ -112,13 +117,9 @@ function ValuesTable(props: Any) {
 
 function StatusContent(props: Any) {
   const status = props.status;
-  console.log(status);
   return (
     <div>
-      <p>{status.name}</p>
-      <p>
-        <MessageText message={status.message} />
-      </p>
+      <TitleText name={status.name} message={status.message} />
       <p>
         <ValuesTable values={status.values} />
       </p>

src/external/MediaMtxPlayer.tsx

@@ -0,0 +1,78 @@
+// From Gemini.
+import React, { useEffect, useRef, useState } from "react";
+import "./reader.js";
+
+interface MediaMTXPlayerProps {
+  url: string;
+  user?: string;
+  pass?: string;
+  token?: string;
+}
+
+export const MediaMtxPlayer: React.FC<MediaMTXPlayerProps> = ({
+  url,
+  user,
+  pass,
+  token,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let reader: any = null;
+
+    if (videoRef.current && url) {
+      reader = new MediaMTXWebRTCReader({
+        url,
+        user,
+        pass,
+        token,
+        onError: (err: any) => {
+          console.error("MediaMTX WebRTC Error:", err);
+          setError(err);
+        },
+        onTrack: (evt: RTCTrackEvent) => {
+          if (videoRef.current && evt.streams[0]) {
+            videoRef.current.srcObject = evt.streams[0];
+          }
+        },
+        onDataChannel: (evt: RTCDataChannelEvent) => {
+          console.log("Data channel opened:", evt.channel);
+        },
+      });
+    }
+
+    // Cleanup when component unmounts or URL changes
+    return () => {
+      if (reader && typeof reader.close === "function") {
+        reader.close();
+      }
+      if (videoRef.current) {
+        videoRef.current.srcObject = null;
+      }
+    };
+  }, [url, user, pass, token]);
+
+  return (
+    <div style={{ position: "relative", width: "100%", maxWidth: "720px" }}>
+      {error && (
+        <div style={{ color: "red", marginBottom: "8px" }}>
+          Error getting video.
+        </div>
+      )}
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        muted
+        controls
+        style={{
+          width: "100%",
+          maxWidth: "720px",
+          height: "auto",
+          backgroundColor: "#000",
+        }}
+      />
+    </div>
+  );
+};

src/external/reader.js

@@ -0,0 +1,676 @@
+"use strict";
+
+/**
+ * @callback OnError
+ * @param {string} err - error.
+ */
+
+/**
+ * @callback OnTrack
+ * @param {RTCTrackEvent} evt - track event.
+ */
+
+/**
+ * @callback OnDataChannel
+ * @param {RTCDataChannelEvent} evt - data channel event.
+ */
+
+/**
+ * @typedef Conf
+ * @type {object}
+ * @property {string} url - absolute URL of the WHEP endpoint.
+ * @property {string} user - username.
+ * @property {string} pass - password.
+ * @property {string} token - token.
+ * @property {OnError} onError - called when there's an error.
+ * @property {OnTrack} onTrack - called when there's a track available.
+ * @property {OnDataChannel} onDataChannel - called when there's a data channel available.
+ */
+
+/** WebRTC/WHEP reader. */
+class MediaMTXWebRTCReader {
+  static #RETRY_PAUSE = 2000;
+
+  #conf;
+  #state = "getting_codecs";
+  #restartTimeout = null;
+  #pc = null;
+  #offerData = null;
+  #sessionUrl = null;
+  #queuedCandidates = [];
+  #nonAdvertisedCodecs;
+
+  /**
+   * Create a MediaMTXWebRTCReader.
+   * @param {Conf} conf - configuration.
+   */
+  constructor(conf) {
+    this.#conf = conf;
+    this.#getNonAdvertisedCodecs();
+  }
+
+  /**
+   * Close the reader and all its resources.
+   */
+  close() {
+    this.#state = "closed";
+
+    if (this.#pc !== null) {
+      this.#pc.close();
+    }
+
+    if (this.#restartTimeout !== null) {
+      clearTimeout(this.#restartTimeout);
+    }
+  }
+
+  static #supportsNonAdvertisedCodec(codec, fmtp) {
+    return new Promise((resolve) => {
+      const pc = new RTCPeerConnection({ iceServers: [] });
+      const mediaType = "audio";
+      let payloadType = "";
+
+      pc.addTransceiver(mediaType, { direction: "recvonly" });
+      pc.createOffer()
+        .then((offer) => {
+          if (offer.sdp === undefined) {
+            throw new Error("SDP not present");
+          }
+          if (offer.sdp.includes(` ${codec}`)) {
+            // codec is advertised, there's no need to add it manually
+            throw new Error("already present");
+          }
+
+          const sections = offer.sdp.split(`m=${mediaType}`);
+
+          const payloadTypes = sections
+            .slice(1)
+            .map((s) => s.split("\r\n")[0].split(" ").slice(3))
+            .reduce((prev, cur) => [...prev, ...cur], []);
+          payloadType = this.#reservePayloadType(payloadTypes);
+
+          const lines = sections[1].split("\r\n");
+          lines[0] += ` ${payloadType}`;
+          lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} ${codec}`);
+          if (fmtp !== undefined) {
+            lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} ${fmtp}`);
+          }
+          sections[1] = lines.join("\r\n");
+          offer.sdp = sections.join(`m=${mediaType}`);
+          return pc.setLocalDescription(offer);
+        })
+        .then(() =>
+          pc.setRemoteDescription(
+            new RTCSessionDescription({
+              type: "answer",
+              sdp:
+                "v=0\r\n" +
+                "o=- 6539324223450680508 0 IN IP4 0.0.0.0\r\n" +
+                "s=-\r\n" +
+                "t=0 0\r\n" +
+                "a=fingerprint:sha-256 0D:9F:78:15:42:B5:4B:E6:E2:94:3E:5B:37:78:E1:4B:54:59:A3:36:3A:E5:05:EB:27:EE:8F:D2:2D:41:29:25\r\n" +
+                `m=${mediaType} 9 UDP/TLS/RTP/SAVPF ${payloadType}\r\n` +
+                "c=IN IP4 0.0.0.0\r\n" +
+                "a=ice-pwd:7c3bf4770007e7432ee4ea4d697db675\r\n" +
+                "a=ice-ufrag:29e036dc\r\n" +
+                "a=sendonly\r\n" +
+                "a=rtcp-mux\r\n" +
+                `a=rtpmap:${payloadType} ${codec}\r\n` +
+                (fmtp !== undefined ? `a=fmtp:${payloadType} ${fmtp}\r\n` : ""),
+            }),
+          ),
+        )
+        .then(() => {
+          resolve(true);
+        })
+        .catch(() => {
+          resolve(false);
+        })
+        .finally(() => {
+          pc.close();
+        });
+    });
+  }
+
+  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(sdp) {
+    const ret = {
+      iceUfrag: "",
+      icePwd: "",
+      medias: [],
+    };
+
+    for (const line of sdp.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 #reservePayloadType(payloadTypes) {
+    // everything is valid between 30 and 127, except for interval between 64 and 95
+    // https://chromium.googlesource.com/external/webrtc/+/refs/heads/master/call/payload_type.h#29
+    for (let i = 30; i <= 127; i++) {
+      if ((i <= 63 || i >= 96) && !payloadTypes.includes(i.toString())) {
+        const pl = i.toString();
+        payloadTypes.push(pl);
+        return pl;
+      }
+    }
+    throw Error("unable to find a free payload type");
+  }
+
+  static #enableStereoPcmau(payloadTypes, section) {
+    const lines = section.split("\r\n");
+
+    let payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} PCMU/8000/2`);
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} PCMA/8000/2`);
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    return lines.join("\r\n");
+  }
+
+  static #enableMultichannelOpus(payloadTypes, section) {
+    const lines = section.split("\r\n");
+
+    let payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=rtpmap:${payloadType} multiopus/48000/3`,
+    );
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,2,1;num_streams=2;coupled_streams=1`,
+    );
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=rtpmap:${payloadType} multiopus/48000/4`,
+    );
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,1,2,3;num_streams=2;coupled_streams=2`,
+    );
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=rtpmap:${payloadType} multiopus/48000/5`,
+    );
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3;num_streams=3;coupled_streams=2`,
+    );
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=rtpmap:${payloadType} multiopus/48000/6`,
+    );
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2`,
+    );
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=rtpmap:${payloadType} multiopus/48000/7`,
+    );
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3,5,6;num_streams=4;coupled_streams=4`,
+    );
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=rtpmap:${payloadType} multiopus/48000/8`,
+    );
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,6,1,4,5,2,3,7;num_streams=5;coupled_streams=4`,
+    );
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    return lines.join("\r\n");
+  }
+
+  static #enableL16(payloadTypes, section) {
+    const lines = section.split("\r\n");
+
+    let payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/8000/2`);
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/16000/2`);
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    payloadType = this.#reservePayloadType(payloadTypes);
+    lines[0] += ` ${payloadType}`;
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/48000/2`);
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`);
+
+    return lines.join("\r\n");
+  }
+
+  static #enableStereoOpus(section) {
+    let opusPayloadFormat = "";
+    const 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 (!lines[i].includes("stereo")) {
+          lines[i] += ";stereo=1";
+        }
+        if (!lines[i].includes("sprop-stereo")) {
+          lines[i] += ";sprop-stereo=1";
+        }
+      }
+    }
+
+    return lines.join("\r\n");
+  }
+
+  static #editOffer(sdp, nonAdvertisedCodecs) {
+    const sections = sdp.split("m=");
+
+    const payloadTypes = sections
+      .slice(1)
+      .map((s) => s.split("\r\n")[0].split(" ").slice(3))
+      .reduce((prev, cur) => [...prev, ...cur], []);
+
+    for (let i = 1; i < sections.length; i++) {
+      if (sections[i].startsWith("audio")) {
+        sections[i] = this.#enableStereoOpus(sections[i]);
+
+        if (nonAdvertisedCodecs.includes("pcma/8000/2")) {
+          sections[i] = this.#enableStereoPcmau(payloadTypes, sections[i]);
+        }
+        if (nonAdvertisedCodecs.includes("multiopus/48000/6")) {
+          sections[i] = this.#enableMultichannelOpus(payloadTypes, sections[i]);
+        }
+        if (nonAdvertisedCodecs.includes("L16/48000/2")) {
+          sections[i] = this.#enableL16(payloadTypes, sections[i]);
+        }
+
+        break;
+      }
+    }
+
+    return sections.join("m=");
+  }
+
+  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;
+  }
+
+  /** @param {string} err */
+  #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.#restart(),
+        MediaMTXWebRTCReader.#RETRY_PAUSE,
+      );
+
+      if (this.#conf.onError !== undefined) {
+        this.#conf.onError(`${err}, retrying in some seconds`);
+      }
+    } else if (this.#state === "getting_codecs") {
+      this.#state = "failed";
+
+      if (this.#conf.onError !== undefined) {
+        this.#conf.onError(err);
+      }
+    }
+  }
+
+  #restart() {
+    this.#restartTimeout = null;
+    this.#state = "running";
+    this.#start();
+  }
+
+  #getNonAdvertisedCodecs() {
+    Promise.all(
+      [
+        ["pcma/8000/2"],
+        [
+          "multiopus/48000/6",
+          "channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2",
+        ],
+        ["L16/48000/2"],
+      ].map((c) =>
+        MediaMTXWebRTCReader.#supportsNonAdvertisedCodec(c[0], c[1]).then(
+          (r) => (r ? c[0] : false),
+        ),
+      ),
+    )
+      .then((c) => c.filter((e) => e !== false))
+      .then((codecs) => {
+        if (this.#state !== "getting_codecs") {
+          throw new Error("closed");
+        }
+
+        this.#nonAdvertisedCodecs = codecs;
+        this.#state = "running";
+        this.#start();
+      })
+      .catch((err) => {
+        this.#handleError(err.toString());
+      });
+  }
+
+  #start() {
+    this.#requestICEServers()
+      .then((iceServers) => this.#setupPeerConnection(iceServers))
+      .then((offer) => this.#sendOffer(offer))
+      .then((answer) => this.#setAnswer(answer))
+      .catch((err) => {
+        this.#handleError(err.toString());
+      });
+  }
+
+  #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) =>
+      MediaMTXWebRTCReader.#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",
+    });
+
+    const direction = "recvonly";
+    this.#pc.addTransceiver("video", { direction });
+    this.#pc.addTransceiver("audio", { direction });
+
+    // using data channels requires creating a data channel locally
+    this.#pc.createDataChannel("");
+
+    this.#pc.onicecandidate = (evt) => this.#onLocalCandidate(evt);
+    this.#pc.onconnectionstatechange = () => this.#onConnectionState();
+    this.#pc.ontrack = (evt) => this.#onTrack(evt);
+    this.#pc.ondatachannel = (evt) => this.#onDataChannel(evt);
+
+    return this.#pc.createOffer().then((offer) => {
+      offer.sdp = MediaMTXWebRTCReader.#editOffer(
+        offer.sdp,
+        this.#nonAdvertisedCodecs,
+      );
+      this.#offerData = MediaMTXWebRTCReader.#parseOffer(offer.sdp);
+
+      return this.#pc.setLocalDescription(offer).then(() => offer.sdp);
+    });
+  }
+
+  #sendOffer(offer) {
+    if (this.#state !== "running") {
+      throw new Error("closed");
+    }
+
+    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 404:
+          throw new Error("stream not found");
+        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");
+    }
+
+    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: MediaMTXWebRTCReader.#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");
+    }
+  }
+
+  #onTrack(evt) {
+    if (this.#conf.onTrack !== undefined) {
+      this.#conf.onTrack(evt);
+    }
+  }
+
+  #onDataChannel(evt) {
+    if (this.#conf.onDataChannel !== undefined) {
+      this.#conf.onDataChannel(evt);
+    }
+  }
+}
+
+window.MediaMTXWebRTCReader = MediaMTXWebRTCReader;

src/utils/query.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2026 James Pace
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+//
+// This Source Code Form is "Incompatible With Secondary Licenses", as
+// defined by the Mozilla Public License, v. 2.0.
+//
+
+import { atomWithQuery } from "jotai-tanstack-query";
+
+export async function fetchJson(url: string): Promise<any> {
+  const resp = await fetch(url);
+  if (!resp.ok) {
+    throw new Error(`Network response was not ok: ${resp.statusText}`);
+  }
+  return resp.json();
+}
+
+interface CreateQueryAtomOptions {
+  refetchInterval?: number;
+  retry?: boolean;
+}
+
+export function createQueryAtom(url: string, options?: CreateQueryAtomOptions) {
+  return atomWithQuery(() => ({
+    queryKey: [url],
+    queryFn: () => fetchJson(url),
+    ...options,
+  }));
+}