replicas-computer 0.2.14 → 0.3.0

package/dist/stream-viewer.js

@@ -1,5 +1,69 @@
+// ../shared/src/type-guards.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/input-validation.ts
+var finite = (value) => typeof value === "number" && Number.isFinite(value);
+var iceServer = (value) => {
+  if (!isRecord(value)) return false;
+  return typeof value.urls === "string" && (value.username === void 0 || typeof value.username === "string") && (value.credential === void 0 || typeof value.credential === "string");
+};
+function validServerMessage(value) {
+  if (!isRecord(value) || typeof value.type !== "string") return false;
+  switch (value.type) {
+    case "ping":
+    case "pong":
+      return finite(value.sentAt);
+    case "webrtc-failed":
+      return true;
+    case "offer":
+      return typeof value.sdp === "string" && value.sdp.length < 65536;
+    case "candidate":
+      return typeof value.candidate === "string" && value.candidate.length < 1024 && typeof value.mid === "string" && value.mid.length < 16;
+    case "config":
+      return finite(value.protocolVersion) && (value.inputRace === void 0 || typeof value.inputRace === "boolean") && finite(value.width) && finite(value.height) && finite(value.fps) && typeof value.videoCodec === "string" && typeof value.audioCodec === "string" && finite(value.audioSampleRate) && finite(value.audioChannels) && isRecord(value.request) && (value.iceServers === void 0 || Array.isArray(value.iceServers) && value.iceServers.every(iceServer));
+    case "telemetry":
+      return isRecord(value.encoder) && isRecord(value.cpu) && isRecord(value.viewer);
+    default:
+      return false;
+  }
+}
+
+// ../shared/src/desktop-stream.ts
+var DEFAULT_STREAM_REQUEST = {
+  transport: "webrtc",
+  profile: "balanced",
+  adaptive: true,
+  iceTransportPolicy: "all"
+};
+function parseStreamRequest(query, defaults = DEFAULT_STREAM_REQUEST) {
+  const transport2 = query.get("transport");
+  const profile = query.get("profile");
+  const adapt = query.get("adapt");
+  const ice = query.get("ice");
+  return {
+    transport: transport2 === "webrtc" || transport2 === "websocket" ? transport2 : defaults.transport,
+    profile: profile === "text" || profile === "balanced" ? profile : defaults.profile,
+    adaptive: adapt === "0" ? false : adapt === "1" ? true : defaults.adaptive,
+    iceTransportPolicy: ice === "relay" || ice === "all" ? ice : defaults.iceTransportPolicy
+  };
+}
+var H264_PROFILES = {
+  high444: { payloadType: 99, profileLevelId: "f4001f", codec: "avc1.F4002A", label: "High 4:4:4" },
+  high: { payloadType: 96, profileLevelId: "64001f", codec: "avc1.64002A", label: "High" },
+  main: { payloadType: 97, profileLevelId: "4d001f", codec: "avc1.4D002A", label: "Main" },
+  baseline: { payloadType: 98, profileLevelId: "42e01f", codec: "avc1.42E02A", label: "Baseline" }
+};
+function h264ProfileLabel(sdpFmtpLine) {
+  const id = sdpFmtpLine.match(/profile-level-id=([0-9a-f]{6})/i)?.[1].toLowerCase();
+  const match = Object.values(H264_PROFILES).find((profile) => id?.startsWith(profile.profileLevelId.slice(0, 2)));
+  return match?.label ?? id ?? "";
+}
+var DESKTOP_TRANSPORT_MESSAGE = "replicas-desktop-transport";
+
 // src/media-protocol.ts
-var STREAM_PROTOCOL_VERSION = 1;
+var STREAM_PROTOCOL_VERSION = 3;
 var MEDIA_PACKET_HEADER_BYTES = 12;
 
 // src/stream-viewer.ts
@@ -10,12 +74,24 @@ var audioPrompt = document.querySelector("#audio-prompt");
 var diagnostics = document.querySelector("#diagnostics");
 var TrackGenerator = globalThis.MediaStreamTrackGenerator;
 if (!screen || !status || !statusText || !audioPrompt || !diagnostics) throw new Error("Desktop stream markup is incomplete");
-if (!TrackGenerator) throw new Error("This browser cannot render the desktop stream");
 var params = new URLSearchParams(location.search);
+var request = parseStreamRequest(params);
 var showDiagnostics = params.get("diagnostics") === "1";
+var view = params.get("view") === "native" ? "native" : params.get("view") === "pixel" ? "pixel" : "fit";
+document.documentElement.dataset.view = view;
 diagnostics.classList.toggle("visible", showDiagnostics);
+var webrtcFrameTimeoutMs = 6e3;
+var webrtcSkipsAfterFailure = 3;
+var pointerIntervalMs = 4;
 var socket;
 var config;
+var transport;
+var transportReason = "";
+var peer;
+var inputChannel;
+var pointerChannel;
+var webrtcDeadline;
+var webrtcSkips = 0;
 var videoTrack;
 var videoWriter;
 var videoDecoder;
@@ -27,34 +103,123 @@ var nextAudioTime = 0;
 var waitingForKeyframe = true;
 var reconnectAttempt = 0;
 var reconnectTimer;
-var pointerFrame;
+var pointerTimer;
+var pointerSettleTimer;
 var pendingPointer;
+var lastPointerSentAt = 0;
+var positionSequence = 0;
+var actionId = 0;
+var statsSequence = 0;
+var reportedStatsSequence = 0;
 var renderedFrames = 0;
+var presentedFrames = 0;
+var lastPresentedCount = 0;
+var lastFrameAt = 0;
+var lastKeyframeRequestAt = 0;
 var decodedAudioPackets = 0;
 var renderedWindowStartedAt = performance.now();
 var rtt = 0;
+var rttSentAt = 0;
+var socketRtt = 0;
+var lastSocketPingAt = 0;
+var inbound;
+var inboundAt = 0;
+var inboundHistory = [];
+var telemetry;
+var route = { path: "", codec: "", decoded: "", kbps: 0, displayedFps: 0 };
+var state = {};
+globalThis.__replicasDesktop = state;
 var showStatus = (message) => {
   statusText.textContent = message;
   status.classList.add("visible");
 };
+var describe = (error) => error instanceof Error ? error.message : String(error);
 var fitScreen = () => {
   if (!config) return;
-  const scale = Math.min(innerWidth / config.width, innerHeight / config.height);
+  const scale = view === "fit" ? Math.min(innerWidth / config.width, innerHeight / config.height) : view === "native" ? 1 : 1 / devicePixelRatio;
   screen.style.width = `${Math.floor(config.width * scale)}px`;
   screen.style.height = `${Math.floor(config.height * scale)}px`;
 };
-var send = (message) => {
+var sendSocket = (message) => {
   if (socket?.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message));
 };
+var sendInput = (message, unreliable = false) => {
+  if (message.type === "pointer" || message.type === "button" || message.type === "wheel" || message.type === "release") {
+    message = { ...message, sequence: message.sequence ?? ++positionSequence };
+    if (message.type !== "pointer") clearTimeout(pointerSettleTimer);
+    if (message.type === "release") {
+      clearTimeout(pointerTimer);
+      pointerTimer = void 0;
+      pendingPointer = void 0;
+    }
+  }
+  if (config?.inputRace && transport && (message.type === "button" || message.type === "wheel" || message.type === "key" || message.type === "release")) {
+    const ordered = socket?.readyState === WebSocket.OPEN ? socket : void 0;
+    const reliable = transport === "webrtc" && inputChannel?.readyState === "open" ? inputChannel : void 0;
+    const nextAction = actionId + 1;
+    const payload = JSON.stringify({ ...message, actionId: nextAction });
+    const deliver = (target) => {
+      if (!target) return false;
+      try {
+        target.send(payload);
+        return true;
+      } catch {
+        return false;
+      }
+    };
+    const viaSocket = deliver(ordered);
+    if (!viaSocket && !deliver(reliable)) return;
+    actionId = nextAction;
+    if (viaSocket && transport === "webrtc" && pointerChannel?.readyState === "open" && pointerChannel.bufferedAmount < 16384) {
+      deliver(pointerChannel);
+    }
+    return;
+  }
+  if (transport !== "webrtc") {
+    if (transport === "websocket") sendSocket(message);
+    return;
+  }
+  if (unreliable && pointerChannel?.readyState === "open") {
+    pointerChannel.send(JSON.stringify(message));
+    return;
+  }
+  if (!unreliable && ["pointer", "button", "wheel", "key", "release"].includes(message.type) && socket?.readyState === WebSocket.OPEN) {
+    sendSocket(message);
+    return;
+  }
+  if (inputChannel?.readyState === "open") {
+    inputChannel.send(JSON.stringify(message));
+    return;
+  }
+  if (!unreliable) sendSocket(message);
+};
+var announceTransport = () => {
+  if (window.parent === window) return;
+  window.parent.postMessage({ type: DESKTOP_TRANSPORT_MESSAGE, transport: transport ?? "connecting", reason: transportReason, path: route.path, codec: route.codec }, "*");
+};
+var closePeer = (preserveDeadline = false) => {
+  if (!preserveDeadline) {
+    clearTimeout(webrtcDeadline);
+    webrtcDeadline = void 0;
+  }
+  inputChannel = void 0;
+  pointerChannel = void 0;
+  peer?.close();
+  peer = void 0;
+  inbound = void 0;
+};
 var disconnect = () => {
   clearTimeout(reconnectTimer);
   reconnectTimer = void 0;
-  send({ type: "release" });
+  sendInput({ type: "release" });
+  closePeer();
+  transport = void 0;
   const previousSocket = socket;
   socket = void 0;
   previousSocket?.close();
 };
 var resetVideoTrack = () => {
+  if (!TrackGenerator) return;
   void videoWriter?.close().catch(() => {
   });
   videoTrack?.stop();
@@ -70,16 +235,16 @@ var decoderConfig = (next, preferHardware = false) => {
     optimizeForLatency: true,
     avc: { format: "annexb" }
   };
-  if (preferHardware) decoder.hardwareAcceleration = "prefer-hardware";
+  decoder.hardwareAcceleration = preferHardware ? "prefer-hardware" : "prefer-software";
   return decoder;
 };
-var configureVideo = async (next) => {
+var configureVideo = async (next, preferHardware = true) => {
   const configuration = ++videoConfiguration;
   const previousDecoder = videoDecoder;
   videoDecoder = void 0;
   activeVideoConfig = void 0;
   if (previousDecoder && previousDecoder.state !== "closed") previousDecoder.close();
-  const preferred = decoderConfig(next, true);
+  const preferred = decoderConfig(next, preferHardware);
   const support = await VideoDecoder.isConfigSupported(preferred);
   if (configuration !== videoConfiguration) return;
   const selectedConfig = support.supported && support.config ? support.config : decoderConfig(next);
@@ -92,10 +257,10 @@ var configureVideo = async (next) => {
         return;
       }
       try {
-        void writer.write(frame).catch((error) => showStatus(error instanceof Error ? error.message : String(error))).finally(() => frame.close());
+        void writer.write(frame).catch((error) => showStatus(describe(error))).finally(() => frame.close());
       } catch (error) {
         frame.close();
-        showStatus(error instanceof Error ? error.message : String(error));
+        showStatus(describe(error));
       }
     },
     error: (error) => {
@@ -103,7 +268,7 @@ var configureVideo = async (next) => {
       videoDecoder = void 0;
       waitingForKeyframe = true;
       showStatus(`recovering video: ${error.message}`);
-      if (config) void configureVideo(config).catch((reason) => showStatus(reason instanceof Error ? reason.message : String(reason)));
+      if (config) void configureVideo(config, false).catch((reason) => showStatus(describe(reason)));
     }
   });
   videoDecoder = decoder;
@@ -115,12 +280,12 @@ var enableAudio = async () => {
   audioContext ??= new AudioContext({ latencyHint: "interactive", sampleRate: config.audioSampleRate });
   await audioContext.resume();
   if (!audioDecoder || audioDecoder.state === "closed") {
-    const decoderConfig2 = {
+    const audioConfig = {
       codec: config.audioCodec,
       sampleRate: config.audioSampleRate,
       numberOfChannels: config.audioChannels
     };
-    const support = await AudioDecoder.isConfigSupported(decoderConfig2);
+    const support = await AudioDecoder.isConfigSupported(audioConfig);
     if (!support.supported) throw new Error(`Browser cannot decode ${config.audioCodec}`);
     audioDecoder = new AudioDecoder({
       output: (data) => {
@@ -141,24 +306,24 @@ var enableAudio = async () => {
         nextAudioTime += data.numberOfFrames / data.sampleRate;
         data.close();
         decodedAudioPackets += 1;
-        window.dispatchEvent(new Event("replicasdesktopaudio"));
       },
       error: () => {
         audioPrompt.hidden = false;
       }
     });
-    audioDecoder.configure(support.config ?? decoderConfig2);
+    audioDecoder.configure(support.config ?? audioConfig);
   }
   audioPrompt.hidden = true;
 };
 var handleBinary = (data) => {
   if (!config || data.byteLength <= MEDIA_PACKET_HEADER_BYTES) return;
-  const view = new DataView(data);
-  if (view.getUint8(1) !== STREAM_PROTOCOL_VERSION) return;
-  const kind = view.getUint8(0);
+  const view2 = new DataView(data);
+  if (view2.getUint8(1) !== STREAM_PROTOCOL_VERSION) return;
+  const kind = view2.getUint8(0);
   if (kind !== 1 /* VideoKey */ && kind !== 2 /* VideoDelta */ && kind !== 3 /* Audio */) return;
-  const timestamp = Number(view.getBigUint64(4));
+  const timestamp = Number(view2.getBigUint64(4));
   const payload = new Uint8Array(data, MEDIA_PACKET_HEADER_BYTES);
+  route.kbps += payload.byteLength * 8 / 1e3;
   if (kind === 3 /* Audio */) {
     if (!audioDecoder || audioDecoder.state !== "configured" || audioDecoder.decodeQueueSize > 12) return;
     audioDecoder.decode(new EncodedAudioChunk({ type: "key", timestamp, data: payload }));
@@ -181,47 +346,193 @@ var handleBinary = (data) => {
     waitingForKeyframe = true;
   }
 };
+var unlockAudio = () => {
+  if (transport !== "webrtc") {
+    enableAudio().catch(() => {
+      audioPrompt.hidden = false;
+    });
+    return;
+  }
+  screen.muted = false;
+  screen.play().then(() => {
+    audioPrompt.hidden = true;
+  }).catch(() => {
+    screen.muted = true;
+    audioPrompt.hidden = false;
+    void screen.play().catch(() => {
+    });
+  });
+};
+var useFallback = (reason, failed = false) => {
+  if (transport === "websocket" || !config) return;
+  closePeer();
+  if (failed) webrtcSkips = webrtcSkipsAfterFailure;
+  transport = "websocket";
+  transportReason = reason;
+  route = { ...route, path: "proxy", codec: config.videoCodec };
+  announceTransport();
+  if (!TrackGenerator) {
+    showStatus("This browser cannot render the desktop stream");
+    return;
+  }
+  sendSocket({ type: "fallback", reason });
+  resetVideoTrack();
+  void configureVideo(config).catch((error) => showStatus(describe(error)));
+  void screen.play().catch(() => showStatus("Click the stream to begin playback"));
+  unlockAudio();
+};
+var negotiate = async (sdp) => {
+  if (!config?.iceServers || transport === "websocket") return;
+  closePeer(true);
+  const pc = new RTCPeerConnection({ iceServers: config.iceServers, bundlePolicy: "max-bundle", iceTransportPolicy: config.request.iceTransportPolicy });
+  peer = pc;
+  pc.ontrack = (event) => {
+    if (peer !== pc) return;
+    try {
+      event.receiver.jitterBufferTarget = 0;
+    } catch {
+    }
+    try {
+      event.receiver.playoutDelayHint = 0;
+    } catch {
+    }
+    if (screen.srcObject !== event.streams[0]) screen.srcObject = event.streams[0] ?? new MediaStream([event.track]);
+    void screen.play().catch(() => {
+    });
+  };
+  pc.ondatachannel = (event) => {
+    if (peer !== pc) return;
+    if (event.channel.label === "pointer") pointerChannel = event.channel;
+    else inputChannel = event.channel;
+    event.channel.onmessage = (message) => {
+      if (typeof message.data === "string") handleServerText(message.data, false);
+    };
+  };
+  pc.onicecandidate = (event) => {
+    if (peer !== pc) return;
+    if (event.candidate?.candidate) sendSocket({ type: "candidate", candidate: event.candidate.candidate, mid: event.candidate.sdpMid ?? "0" });
+  };
+  pc.onconnectionstatechange = () => {
+    if (peer !== pc) return;
+    if (pc.connectionState === "connected") {
+      transport = "webrtc";
+      transportReason = "";
+      webrtcSkips = 0;
+      lastFrameAt = performance.now();
+      announceTransport();
+      unlockAudio();
+    } else if (pc.connectionState === "failed") {
+      if (transport === "webrtc") socket?.close();
+      else useFallback("WebRTC connection failed", true);
+    }
+  };
+  try {
+    await pc.setRemoteDescription({ type: "offer", sdp });
+    if (peer !== pc) return;
+    const answer = await pc.createAnswer();
+    if (peer !== pc) return;
+    await pc.setLocalDescription(answer);
+    if (peer !== pc || !answer.sdp) return;
+    const video = answer.sdp.split(/^m=/m).find((section) => section.startsWith("video")) ?? "";
+    if (video.startsWith("video 0 ") || !/^a=rtpmap:\d+ H264\/90000/m.test(video)) {
+      useFallback("browser cannot receive H.264 over WebRTC", true);
+      return;
+    }
+    sendSocket({ type: "answer", sdp: answer.sdp });
+  } catch (error) {
+    if (peer === pc) throw error;
+  }
+};
+var handleServerMessage = (message, viaSocket) => {
+  if (message.type === "pong") {
+    const elapsed = performance.now() - message.sentAt;
+    if ((!viaSocket || transport !== "webrtc") && message.sentAt > rttSentAt) {
+      rtt = elapsed;
+      rttSentAt = message.sentAt;
+    }
+    if (viaSocket) socketRtt = elapsed;
+    return;
+  }
+  if (message.type === "ping") {
+    sendSocket({ type: "pong", sentAt: message.sentAt });
+    return;
+  }
+  if (message.type === "telemetry") {
+    telemetry = message;
+    state.telemetry = message;
+    return;
+  }
+  if (message.type === "webrtc-failed") {
+    useFallback("Server WebRTC connection failed", true);
+    return;
+  }
+  if (message.type === "offer") {
+    void negotiate(message.sdp).catch((error) => useFallback(`negotiation failed: ${describe(error)}`, true));
+    return;
+  }
+  if (message.type === "candidate") {
+    void peer?.addIceCandidate({ candidate: message.candidate, sdpMid: message.mid }).catch(() => {
+    });
+    return;
+  }
+  if (message.type !== "config") return;
+  if (message.protocolVersion !== STREAM_PROTOCOL_VERSION) {
+    showStatus("Desktop viewer is out of date; reload the page");
+    return;
+  }
+  config = message;
+  request = message.request;
+  fitScreen();
+  if (request.transport !== "webrtc") useFallback("WebSocket transport selected");
+  else if (!message.iceServers) useFallback("server has no WebRTC");
+  else if (typeof RTCPeerConnection !== "function") useFallback("browser has no WebRTC");
+  else if (webrtcSkips > 0) {
+    webrtcSkips -= 1;
+    useFallback("recent WebRTC failure");
+  } else if (!transport) {
+    showStatus("negotiating WebRTC\u2026");
+    webrtcDeadline ??= setTimeout(() => useFallback("WebRTC did not display video in time", true), webrtcFrameTimeoutMs);
+  }
+};
+var handleServerText = (data, viaSocket) => {
+  let parsed;
+  try {
+    parsed = JSON.parse(data);
+  } catch {
+    return;
+  }
+  if (validServerMessage(parsed)) handleServerMessage(parsed, viaSocket);
+};
 var connect = () => {
   if (document.visibilityState !== "visible") return;
   clearTimeout(reconnectTimer);
+  closePeer();
+  transport = void 0;
   socket?.close();
   showStatus(reconnectAttempt ? "reconnecting\u2026" : "connecting\u2026");
-  const nextSocket = new WebSocket(`${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/stream`);
+  const query = new URLSearchParams([...params].filter(([key]) => ["transport", "profile", "adapt", "ice"].includes(key)));
+  const nextSocket = new WebSocket(`${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/stream?${query}`);
   nextSocket.binaryType = "arraybuffer";
   socket = nextSocket;
   nextSocket.addEventListener("open", () => {
     if (socket !== nextSocket) return;
+    actionId = 0;
     reconnectAttempt = 0;
-    send({ type: "theme", theme: document.documentElement.dataset.theme === "light" ? "light" : "dark" });
+    sendSocket({ type: "theme", theme: document.documentElement.dataset.theme === "light" ? "light" : "dark" });
   });
   nextSocket.addEventListener("message", (event) => {
     if (socket !== nextSocket) return;
     if (event.data instanceof ArrayBuffer) {
-      handleBinary(event.data);
-      return;
-    }
-    if (typeof event.data !== "string") return;
-    const message = JSON.parse(event.data);
-    if (message.type === "pong") {
-      rtt = performance.now() - message.sentAt;
-      return;
-    }
-    if (message.type === "ping") {
-      send({ type: "pong", sentAt: message.sentAt });
+      if (transport === "websocket") handleBinary(event.data);
       return;
     }
-    if (message.type !== "config" || message.protocolVersion !== STREAM_PROTOCOL_VERSION) return;
-    config = message;
-    fitScreen();
-    resetVideoTrack();
-    void configureVideo(message).catch((error) => showStatus(error instanceof Error ? error.message : String(error)));
-    void screen.play().catch(() => showStatus("Click the stream to begin playback"));
-    enableAudio().catch(() => {
-      audioPrompt.hidden = false;
-    });
+    if (typeof event.data === "string") handleServerText(event.data, true);
   });
   nextSocket.addEventListener("close", () => {
     if (socket !== nextSocket) return;
+    closePeer();
+    transport = void 0;
+    announceTransport();
     reconnectAttempt += 1;
     const delay = Math.min(8e3, 250 * 2 ** Math.min(reconnectAttempt, 5));
     reconnectTimer = setTimeout(connect, delay * (0.85 + Math.random() * 0.3));
@@ -236,32 +547,49 @@ var normalizedPointer = (event) => {
   };
 };
 var flushPointer = () => {
-  pointerFrame = void 0;
+  clearTimeout(pointerTimer);
+  pointerTimer = void 0;
   if (!pendingPointer) return;
-  send({ type: "pointer", ...pendingPointer });
+  const position = pendingPointer;
+  const message = { type: "pointer", ...position, sequence: ++positionSequence };
+  sendInput(message, true);
   pendingPointer = void 0;
+  lastPointerSentAt = performance.now();
+  clearTimeout(pointerSettleTimer);
+  pointerSettleTimer = setTimeout(() => sendInput(message), 60);
 };
 var frameCallback = 0;
 var observeFrame = () => {
-  frameCallback = screen.requestVideoFrameCallback(() => {
+  frameCallback = screen.requestVideoFrameCallback((_now, metadata) => {
+    const stream = screen.srcObject;
+    if (webrtcDeadline && transport === "webrtc" && stream instanceof MediaStream && peer?.getReceivers().some(({ track }) => stream.getVideoTracks().includes(track))) {
+      clearTimeout(webrtcDeadline);
+      webrtcDeadline = void 0;
+    }
     renderedFrames += 1;
+    presentedFrames += lastPresentedCount ? Math.max(0, metadata.presentedFrames - lastPresentedCount) : 1;
+    lastPresentedCount = metadata.presentedFrames;
+    lastFrameAt = performance.now();
     status.classList.remove("visible");
-    window.dispatchEvent(new Event("replicasdesktopframe"));
     observeFrame();
   });
 };
 observeFrame();
-screen.addEventListener("pointermove", (event) => {
-  pendingPointer = normalizedPointer(event);
-  pointerFrame ??= requestAnimationFrame(flushPointer);
+screen.addEventListener("play", () => {
+  lastFrameAt = performance.now();
 });
+var trackPointer = (event) => {
+  pendingPointer = normalizedPointer(event);
+  const wait = pointerIntervalMs - (performance.now() - lastPointerSentAt);
+  if (wait <= 0) flushPointer();
+  else pointerTimer ??= setTimeout(flushPointer, wait);
+};
+screen.addEventListener("pointermove", trackPointer);
 screen.addEventListener("pointerdown", (event) => {
   event.preventDefault();
   screen.focus({ preventScroll: true });
   screen.setPointerCapture(event.pointerId);
-  enableAudio().catch(() => {
-    audioPrompt.hidden = false;
-  });
+  if (screen.muted || audioContext?.state !== "running") unlockAudio();
   send({ type: "button", ...normalizedPointer(event), button: event.button, down: true });
 });
 screen.addEventListener("pointerup", (event) => {
@@ -277,9 +605,7 @@ screen.addEventListener("contextmenu", (event) => event.preventDefault());
 window.addEventListener("keydown", (event) => {
   if (!screen.matches(":focus")) return;
   event.preventDefault();
-  enableAudio().catch(() => {
-    audioPrompt.hidden = false;
-  });
+  if (screen.muted || audioContext?.state !== "running") unlockAudio();
   send({ type: "key", code: event.code, down: true, repeat: event.repeat });
 }, { capture: true });
 window.addEventListener("keyup", (event) => {
@@ -302,28 +628,154 @@ window.addEventListener("pagehide", () => {
   screen.cancelVideoFrameCallback(frameCallback);
   videoDecoder?.close();
   audioDecoder?.close();
-  audioContext?.close();
+  void audioContext?.close();
   void videoWriter?.close();
   videoTrack?.stop();
 });
-audioPrompt.addEventListener("click", () => enableAudio().catch((error) => showStatus(error instanceof Error ? error.message : String(error))));
+audioPrompt.addEventListener("click", unlockAudio);
+function send(message) {
+  flushPointer();
+  sendInput(message);
+}
+var updateDiagnostics = (stats) => {
+  const bounds = screen.getBoundingClientRect();
+  const dims = {
+    source: config ? `${config.width}\xD7${config.height}` : "",
+    decoded: route.decoded || (screen.videoWidth ? `${screen.videoWidth}\xD7${screen.videoHeight}` : ""),
+    css: `${Math.round(bounds.width)}\xD7${Math.round(bounds.height)}`,
+    physical: `${Math.round(bounds.width * devicePixelRatio)}\xD7${Math.round(bounds.height * devicePixelRatio)} @${devicePixelRatio}x`
+  };
+  Object.assign(state, { transport, transportReason, socketRttMs: socketRtt, view, route, dims, ...stats });
+  if (!showDiagnostics) return;
+  const network = stats.lossPercent === void 0 ? `${stats.decodeQueue} queued` : `${stats.lossPercent.toFixed(1)}% loss \xB7 ${(stats.playbackDroppedPercent ?? 0).toFixed(1)}% playback drops \xB7 ${stats.nacks ?? 0} nack \xB7 ${stats.freezes ?? 0} freezes \xB7 ${(stats.jitterBufferMs ?? 0).toFixed(0)} ms buffer`;
+  const encoder = telemetry?.encoder;
+  const server = telemetry?.viewer;
+  diagnostics.textContent = [
+    `${transport ?? "connecting"}${transportReason ? ` (${transportReason})` : ""} \xB7 ${route.path || "\u2014"} \xB7 ${route.codec || config?.videoCodec || ""} \xB7 ${view} view`,
+    `source ${dims.source} \xB7 decoded ${dims.decoded || "\u2014"} \xB7 css ${dims.css} \xB7 device ${dims.physical}`,
+    `${route.displayedFps.toFixed(1)} displayed/s \xB7 ${stats.videoFps.toFixed(1)} decoded/s \xB7 ${route.kbps.toFixed(0)} kbps \xB7 ${stats.rttMs.toFixed(0)} ms rtt \xB7 ${socketRtt.toFixed(0)} ms via proxy \xB7 ${network}`,
+    encoder ? `encoder ${encoder.profile} crf ${encoder.crf} \xB7 ${encoder.codecProfile} ${encoder.pixelFormat} ${encoder.color} \xB7 rung ${encoder.rung}/${encoder.rungs - 1} cap ${encoder.kbpsCap} kbps${encoder.adaptive ? "" : " pinned"} \xB7 ${encoder.fps} fps ${encoder.kbps} kbps \xB7 ${encoder.preset}` : "",
+    telemetry && server ? `server cpu: encoder ${telemetry.cpu.encoderPercent}% \xB7 stream ${telemetry.cpu.serverPercent}% \xB7 load ${telemetry.cpu.load} on ${telemetry.cpu.cores} cores \xB7 budget ${server.budgetKbps} kbps sent ${server.sentKbps} \xB7 queue ${server.queueMs} ms ${server.queuedPackets} pkt \xB7 stale ${server.staleEvents} dropped ${server.droppedFrames} \xB7 repairs ${server.repairsSent}/${server.repairsSkipped} skipped \xB7 copies ${server.duplicatesSent}${server.protecting ? " on" : ""} \xB7 remb ${server.rembKbps ?? "\u2014"}` : ""
+  ].filter(Boolean).join("\n");
+};
+var inboundOf = (kind) => (stat) => stat.type === "inbound-rtp" && "kind" in stat && stat.kind === kind;
+var reportWebRtcStats = async (pc, stats) => {
+  const entries = [...(await pc.getStats()).values()];
+  if (peer !== pc || stats.sequence !== void 0 && stats.sequence <= reportedStatsSequence) return;
+  reportedStatsSequence = stats.sequence ?? reportedStatsSequence;
+  const video = entries.find(inboundOf("video"));
+  const audio = entries.find(inboundOf("audio"));
+  const transportStats = entries.find((stat) => stat.type === "transport");
+  const pair = entries.find((stat) => stat.type === "candidate-pair" && stat.id === transportStats?.selectedCandidatePairId);
+  const candidate = (id) => entries.find((stat) => stat.id === id);
+  const codec = entries.find((stat) => stat.type === "codec" && stat.id === video?.codecId);
+  const local = candidate(pair?.localCandidateId);
+  const remote = candidate(pair?.remoteCandidateId);
+  const previousPath = route.path;
+  route.path = local && remote ? `${remote.candidateType}\u2192${local.candidateType} ${(local.relayProtocol ?? local.protocol ?? "").toLowerCase()}`.trim() : route.path;
+  route.codec = codec ? `${codec.mimeType.replace("video/", "")} ${h264ProfileLabel(codec.sdpFmtpLine ?? "")}`.trim() : route.codec;
+  if (video?.frameWidth) route.decoded = `${video.frameWidth}\xD7${video.frameHeight}`;
+  if (route.path !== previousPath) announceTransport();
+  const now = performance.now();
+  const playback = screen.getVideoPlaybackQuality?.();
+  const counters = {
+    framesDecoded: video?.framesDecoded ?? 0,
+    totalVideoFrames: playback?.totalVideoFrames ?? 0,
+    droppedVideoFrames: playback?.droppedVideoFrames ?? 0,
+    packetsLost: video?.packetsLost ?? 0,
+    packetsReceived: video?.packetsReceived ?? 0,
+    bytesReceived: video?.bytesReceived ?? 0,
+    nackCount: video?.nackCount ?? 0,
+    freezeCount: video?.freezeCount ?? 0,
+    jitterBufferDelay: video?.jitterBufferDelay ?? 0,
+    jitterBufferEmittedCount: video?.jitterBufferEmittedCount ?? 0,
+    audioPackets: audio?.packetsReceived ?? 0
+  };
+  if (!inbound) inboundHistory = [];
+  while (inboundHistory.length > 1 && inboundHistory[1].at <= now - 1e3) inboundHistory.shift();
+  const oldest = inboundHistory[0];
+  if (oldest) {
+    inbound = oldest.counters;
+    inboundAt = oldest.at;
+  }
+  if (inbound) {
+    const seconds = Math.max(1e-3, (now - inboundAt) / 1e3);
+    const lost = Math.max(0, counters.packetsLost - inbound.packetsLost);
+    const received = counters.packetsReceived - inbound.packetsReceived;
+    stats.videoPacketsPerSecond = Math.max(0, received) / seconds;
+    const emitted = counters.jitterBufferEmittedCount - inbound.jitterBufferEmittedCount;
+    stats.videoFps = (counters.framesDecoded - inbound.framesDecoded) / seconds;
+    const total = counters.totalVideoFrames - inbound.totalVideoFrames;
+    const dropped = Math.max(0, counters.droppedVideoFrames - inbound.droppedVideoFrames);
+    if (playback) stats.playbackDroppedPercent = total > 0 ? dropped * 100 / total : 0;
+    stats.audioPacketsPerSecond = (counters.audioPackets - inbound.audioPackets) / seconds;
+    stats.lossPercent = lost + received > 0 ? lost * 100 / (lost + received) : 0;
+    stats.nacks = counters.nackCount - inbound.nackCount;
+    stats.freezes = counters.freezeCount - inbound.freezeCount;
+    stats.jitterBufferMs = emitted > 0 ? (counters.jitterBufferDelay - inbound.jitterBufferDelay) * 1e3 / emitted : 0;
+    route.kbps = (counters.bytesReceived - inbound.bytesReceived) * 8 / 1e3 / seconds;
+  }
+  inbound = counters;
+  inboundAt = now;
+  inboundHistory.push({ at: now, counters });
+  if (pair?.availableIncomingBitrate) stats.availableKbps = pair.availableIncomingBitrate / 1e3;
+  sendInput({ type: "stats", ...stats }, true);
+  updateDiagnostics(stats);
+  state.framesDropped = video?.framesDropped;
+};
+var watchdogPlaybackFrames = 0;
+var watchdogPlaybackAt = 0;
+setInterval(() => {
+  if (transport !== "webrtc") return;
+  if (screen.paused && screen.srcObject instanceof MediaStream && screen.srcObject.getVideoTracks().some((track) => track.readyState === "live")) return;
+  const now = performance.now();
+  if (now - lastFrameAt >= webrtcFrameTimeoutMs) {
+    useFallback("WebRTC video stopped arriving", true);
+    return;
+  }
+  const quality = screen.getVideoPlaybackQuality();
+  const playbackFrames = quality.totalVideoFrames - quality.droppedVideoFrames;
+  if (playbackFrames !== watchdogPlaybackFrames) {
+    watchdogPlaybackFrames = playbackFrames;
+    watchdogPlaybackAt = now;
+  }
+  if (inputChannel?.readyState !== "open") return;
+  if (now - watchdogPlaybackAt < 300 || now - lastFrameAt < 300 || now - lastKeyframeRequestAt < 1e3) return;
+  lastKeyframeRequestAt = now;
+  sendInput({ type: "keyframe" });
+}, 100);
+setInterval(() => {
+  sendInput({ type: "ping", sentAt: performance.now() }, true);
+}, 250);
+var displayedWindow = { at: performance.now(), frames: 0 };
 setInterval(() => {
-  if (socket?.readyState === WebSocket.OPEN) send({ type: "ping", sentAt: performance.now() });
   const now = performance.now();
+  if (transport === "webrtc" && now - lastSocketPingAt >= 1e3) {
+    lastSocketPingAt = now;
+    sendSocket({ type: "ping", sentAt: now });
+  }
+  if (now - displayedWindow.at >= 1e3) {
+    route.displayedFps = (presentedFrames - displayedWindow.frames) * 1e3 / (now - displayedWindow.at);
+    displayedWindow = { at: now, frames: presentedFrames };
+  }
   const elapsedSeconds = (now - renderedWindowStartedAt) / 1e3;
-  const measuredFps = renderedFrames / elapsedSeconds;
-  send({
-    type: "stats",
-    videoFps: measuredFps,
+  if (transport !== "webrtc" && elapsedSeconds < 1) return;
+  const stats = {
+    sequence: ++statsSequence,
+    videoFps: renderedFrames / elapsedSeconds,
     audioPacketsPerSecond: decodedAudioPackets / elapsedSeconds,
     decodeQueue: videoDecoder?.decodeQueueSize ?? 0,
     rttMs: rtt
-  });
-  if (showDiagnostics) {
-    diagnostics.value = `${measuredFps.toFixed(1)} fps \xB7 ${rtt.toFixed(0)} ms RTT \xB7 ${videoDecoder?.decodeQueueSize ?? 0} queued`;
-  }
+  };
   renderedFrames = 0;
   decodedAudioPackets = 0;
   renderedWindowStartedAt = now;
-}, 1e3);
+  if (transport === "webrtc" && peer) void reportWebRtcStats(peer, stats).catch(() => {
+  });
+  else if (transport === "websocket") {
+    sendInput({ type: "stats", ...stats });
+    updateDiagnostics(stats);
+    route.kbps = 0;
+  }
+}, 250);
 connect();