Enable HEVC over WebRTC

Author: DjDeveloperr

client/src/app/AppShell.tsx

@@ -1249,10 +1249,6 @@ export function AppShell() {
     }
     const udid = selectedSimulator.udid;
     setVideoCodec(codec);
-    if (codec === "hevc" && streamTransportMode !== "webtransport") {
-      setStreamTransportMode("webtransport");
-      setStreamSettingsRevision((current) => current + 1);
-    }
     void (async () => {
       codecSwitchInFlightRef.current = true;
       setStreamPaused(true);

client/src/features/stream/streamWorkerClient.ts

@@ -173,6 +173,11 @@ class WebRtcStreamClient implements StreamClientBackend {
       const transceiver = peerConnection.addTransceiver("video", {
         direction: "recvonly",
       });
+      const health = await fetchHealth();
+      if (generation !== this.connectGeneration) {
+        return;
+      }
+      configureReceiverCodecPreferences(transceiver, health.videoCodec);
       configureLowLatencyReceiver(transceiver.receiver);
       const controlChannel = peerConnection.createDataChannel(
         WEBRTC_CONTROL_CHANNEL_LABEL,
@@ -608,6 +613,44 @@ function configureLowLatencyReceiver(receiver: RTCRtpReceiver) {
   }
 }
 
+function configureReceiverCodecPreferences(
+  transceiver: RTCRtpTransceiver,
+  videoCodec?: string | null,
+) {
+  if (!transceiver.setCodecPreferences) {
+    return;
+  }
+  const preferredMimeType = preferredWebRtcMimeType(videoCodec);
+  if (!preferredMimeType) {
+    return;
+  }
+  const capabilities = RTCRtpReceiver.getCapabilities("video");
+  const codecs = capabilities?.codecs ?? [];
+  const preferred = codecs.filter(
+    (codec) => codec.mimeType.toLowerCase() === preferredMimeType,
+  );
+  if (preferred.length === 0) {
+    return;
+  }
+  transceiver.setCodecPreferences([
+    ...preferred,
+    ...codecs.filter(
+      (codec) => codec.mimeType.toLowerCase() !== preferredMimeType,
+    ),
+  ]);
+}
+
+function preferredWebRtcMimeType(videoCodec?: string | null): string | null {
+  const normalized = videoCodec?.toLowerCase();
+  if (normalized === "hevc") {
+    return "video/h265";
+  }
+  if (normalized === "h264" || normalized === "h264-software") {
+    return "video/h264";
+  }
+  return null;
+}
+
 export function initialStreamTransportMode(): StreamTransportMode {
   if (typeof window === "undefined") {
     return "auto";

docs/guide/architecture.md

@@ -54,7 +54,7 @@ Inside the bridge:
 
 ### `client/` — React browser UI
 
-The React app served at `/` is a thin shell that calls the REST API and consumes live video over WebTransport by default. It automatically selects WebRTC media for `h264-software`, forces HEVC back to WebTransport, and exposes runtime codec and transport controls in the simulator menu. URLs can still seed a transport with `?transport=webtransport` or `?transport=webrtc`.
+The React app served at `/` is a thin shell that calls the REST API and consumes live video over WebTransport by default. It automatically selects WebRTC media for `h264-software`, supports WebRTC media for H.264 and HEVC when selected, and exposes runtime codec and transport controls in the simulator menu. URLs can still seed a transport with `?transport=webtransport` or `?transport=webrtc`.
 
 Layout under `client/src/`: