feat: add manual codec selection (VP9/H.264) to stream settings

VP9 is default — better quality per bit with H.264 SIMULCAST backup
for Safari. H.264 option available for zero-CPU hardware encoding.
Codec choice is independent of gaming/text mode, which still controls
contentHint and degradationPreference.
This commit is contained in:
Jannis Braun
2026-03-23 22:44:31 +01:00
parent e7a18bd28c
commit 894ce68194
3 changed files with 38 additions and 11 deletions
@@ -20,6 +20,11 @@ const MODES: { value: ScreenShareConfig['mode']; label: string }[] = [
{ value: 'text', label: 'Text' },
];
const CODECS: { value: ScreenShareConfig['codec']; label: string; desc: string }[] = [
{ value: 'vp9', label: 'VP9', desc: 'Less bandwidth, more CPU' },
{ value: 'h264', label: 'H.264', desc: 'Less CPU, more bandwidth' },
];
function formatBitrate(bps: number): string {
return `${(bps / 1_000_000).toFixed(bps % 1_000_000 === 0 ? 0 : 1)} Mbps`;
}
@@ -178,6 +183,27 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
</div>
</div>
{/* Codec */}
<div>
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
Codec
</div>
<div className="flex gap-1.5">
{CODECS.map((c) => (
<button
key={c.value}
onClick={() => setConfig({ codec: c.value })}
className={`${pillBase} flex-1 flex flex-col items-center gap-0.5 !py-1.5 ${config.codec === c.value ? pillSelected : pillUnselected}`}
>
<span>{c.label}</span>
<span className={`text-[9px] font-normal ${config.codec === c.value ? 'text-white/70' : 'text-txt-tertiary'}`}>
{c.desc}
</span>
</button>
))}
</div>
</div>
{/* Bitrate Override */}
<div>
<div className="flex items-center justify-between mb-1.5">