From e53d3bcb98c81898212178ed436a52c42e2e8e6a Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Tue, 24 Mar 2026 01:14:47 +0100
Subject: [PATCH] fix: switch backup codec to VP8@30fps, dim H.264 pill with
 warning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Backup codec changed from H.264 (OpenH264, slow) to VP8 (libvpx,
  fast) — same encoder family as VP9, lower dual-encode overhead
- Backup capped at 30fps with proportional bitrate to keep CPU
  overhead low during SIMULCAST dual-encoding
- H.264 pill visually dimmed with amber warning when selected
---
 .../voice/ScreenShareSettingsPopover.tsx       |  8 ++++++--
 packages/web/src/utils/screenShare.ts          | 18 +++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx b/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
index c514a3a3..d5690065 100644
--- a/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
+++ b/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
@@ -193,7 +193,11 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
               <button
                 key={c.value}
                 onClick={() => setConfig({ codec: c.value })}
-                className={`${pillBase} ${config.codec === c.value ? pillSelected : pillUnselected}`}
+                className={`${pillBase} ${
+                  config.codec === c.value
+                    ? (c.value === 'h264' ? 'bg-accent-amber/60 text-white' : pillSelected)
+                    : (c.value === 'h264' ? 'bg-surface-elevated/50 text-txt-tertiary hover:bg-interactive-hover' : pillUnselected)
+                }`}
               >
                 {c.label}
               </button>
@@ -201,7 +205,7 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
           </div>
           {config.codec !== 'vp9' && (
             <div className="text-[10px] text-accent-amber/80 mt-1">
-              VP9 is recommended for most setups
+              Not recommended — uses slower software encoder
             </div>
           )}
         </div>
diff --git a/packages/web/src/utils/screenShare.ts b/packages/web/src/utils/screenShare.ts
index e75d6f3d..170f936e 100644
--- a/packages/web/src/utils/screenShare.ts
+++ b/packages/web/src/utils/screenShare.ts
@@ -27,7 +27,7 @@ export interface ScreenShareBuildResult {
     videoCodec: 'vp9' | 'h264';
     videoEncoding: { maxBitrate: number; maxFramerate: number };
     simulcast: false;
-    backupCodec?: { codec: 'h264'; encoding: { maxBitrate: number; maxFramerate: number } };
+    backupCodec?: { codec: 'vp8' | 'h264'; encoding: { maxBitrate: number; maxFramerate: number } };
     backupCodecPolicy?: BackupCodecPolicy;
   };
   overdrive: OverdriveOptions;
@@ -131,12 +131,16 @@ export function buildScreenShareOptions(config: ScreenShareConfig): ScreenShareB
   const bps = clampedKbps * 1000;
   const minBps = Math.round(bps * 0.25);
 
-  // VP9: better quality per bit, software-encoded (CPU). Best for text/static content.
-  // H.264: hardware-encoded via NVENC/QSV/VCE (zero CPU). Universal browser support.
-  // When VP9 is primary, H.264 SIMULCAST backup handles Safari/incompatible viewers.
-  // When H.264 is primary, no backup needed — universally supported.
+  // VP9: better quality per bit via libvpx (software, CPU).
+  // H.264: OpenH264 software encoder in Electron/Chrome (NOT hardware NVENC).
+  // When VP9 is primary, VP8 SIMULCAST backup (also libvpx, lightweight) handles
+  // incompatible viewers (Safari). Backup capped at 30fps to minimize dual-encode overhead.
   const useVp9 = config.codec !== 'h264';
 
+  // Backup encoding: cap at 30fps and proportional bitrate to keep CPU overhead low
+  const backupFps = Math.min(fps, 30);
+  const backupBps = Math.round(bps * (backupFps / fps));
+
   return {
     capture: { width: captureWidth, height: captureHeight, frameRate: fps },
     publish: {
@@ -145,8 +149,8 @@ export function buildScreenShareOptions(config: ScreenShareConfig): ScreenShareB
       simulcast: false,
       ...(useVp9 ? {
         backupCodec: {
-          codec: 'h264' as const,
-          encoding: { maxBitrate: bps, maxFramerate: fps },
+          codec: 'vp8' as const,
+          encoding: { maxBitrate: backupBps, maxFramerate: backupFps },
         },
         backupCodecPolicy: BackupCodecPolicy.SIMULCAST,
       } : {}),