feat: show encoder implementation in Connection Info, VP9 recommended hint

- Connection Info now shows encoder impl (e.g. libvpx, OpenH264,
  ExternalEncoder) on send-side video tracks alongside quality
  limitation reason
- Amber warning "VP9 is recommended" when H.264 is selected
This commit is contained in:
Jannis Braun
2026-03-24 01:06:19 +01:00
parent 65a1fc1402
commit a54dd9084a
3 changed files with 15 additions and 4 deletions
@@ -93,16 +93,19 @@ function VideoTrackRow({ track }: { track: VideoTrackStat }) {
{track.codec && <span className="text-txt-tertiary ml-2">{track.codec}</span>} {track.codec && <span className="text-txt-tertiary ml-2">{track.codec}</span>}
</span> </span>
</div> </div>
{(resolution || track.fps !== null || track.qualityLimitation || track.simulcastLayer) && ( {(resolution || track.fps !== null || track.qualityLimitation || track.simulcastLayer || track.encoderImpl) && (
<div className="flex items-center justify-between pl-3"> <div className="flex items-center justify-between pl-3">
<span className="text-[11px] text-txt-tertiary"> <span className="text-[11px] text-txt-tertiary">
{resolution && `${resolution}`} {resolution && `${resolution}`}
{track.fps !== null && ` @${track.fps}`} {track.fps !== null && ` @${track.fps}`}
</span> </span>
<span className="text-[11px] text-txt-tertiary"> <span className="text-[11px] text-txt-tertiary">
{track.direction === 'send' && track.qualityLimitation && track.qualityLimitation !== 'none' {track.direction === 'send' && (() => {
? track.qualityLimitation const parts: string[] = [];
: ''} if (track.encoderImpl) parts.push(track.encoderImpl);
if (track.qualityLimitation && track.qualityLimitation !== 'none') parts.push(track.qualityLimitation);
return parts.join(' · ') || null;
})()}
{track.direction === 'recv' && track.simulcastLayer {track.direction === 'recv' && track.simulcastLayer
? track.simulcastLayer ? track.simulcastLayer
: ''} : ''}
@@ -199,6 +199,11 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
</button> </button>
))} ))}
</div> </div>
{config.codec !== 'vp9' && (
<div className="text-[10px] text-accent-amber/80 mt-1">
VP9 is recommended for most setups
</div>
)}
</div> </div>
{/* Bitrate Override */} {/* Bitrate Override */}
+3
View File
@@ -26,6 +26,7 @@ export interface VideoTrackStat {
participantName: string | null; participantName: string | null;
bitrate: number; bitrate: number;
codec: string | null; codec: string | null;
encoderImpl: string | null;
width: number | null; width: number | null;
height: number | null; height: number | null;
fps: number | null; fps: number | null;
@@ -362,6 +363,7 @@ export function useTrackStats(enabled: boolean): TrackStatsSnapshot | null {
participantName: null, participantName: null,
bitrate, bitrate,
codec, codec,
encoderImpl: report.encoderImplementation ?? null,
width, width,
height, height,
fps, fps,
@@ -493,6 +495,7 @@ export function useTrackStats(enabled: boolean): TrackStatsSnapshot | null {
participantName: identity.participantName, participantName: identity.participantName,
bitrate, bitrate,
codec, codec,
encoderImpl: null,
width, width,
height, height,
fps, fps,