Files
ChatApp/apps/desktop/src/lib/screenShareVolumes.ts
T
byGalax a5e930ac17 fix(call): volume>100% crash, picker UI freeze, native-path diagnostics
Volume crash:
- setParticipantVolume / setScreenShareVolume propagated values up to 2.0
(200%) to the per-track GainNode, but also called applyToAttachedElements
which set the raw HTMLAudioElement.volume — that property is hard-clamped
to [0, 1] and throws IndexSizeError above 1. Clip the element-path apply
at 1.0. WebAudio GainNode keeps doing the actual amplification.

Picker freeze:
- Firing ~20 captureScreenSourceThumbnail invokes in parallel caused
perceptible input freezes while each ~100KB base64 result arrived and
triggered a setState. Bounded the worker pool to 4 concurrent captures
with a queue — overall wall-clock is nearly identical and the grid stays
scrollable / clickable throughout the load.

Native-path diagnostics:
- Previous logs only fired on non-NativeCaptureUnavailable errors, so
users couldn't tell whether the native path was skipped (audio toggle
on, no sourceId) or attempted-and-failed. Added explicit info logs for
each skip reason plus an always-on warn with the underlying error when
the try block throws. Makes the next debug pass on screenshare much
quicker.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 21:50:20 +02:00

85 lines
2.9 KiB
TypeScript

// Session-only per-share audio volume. Mirror of `participantVolumes` but
// NOT persisted — when the user leaves the call or restarts the app, these
// reset to default. Intentional: the relevant trackSid is ephemeral anyway,
// and users don't expect screen-share volume to survive between sessions.
//
// Keys are participantIds (LiveKit identity). There's one screen-share per
// participant at a time in LiveKit, so keying by id keeps the API aligned
// with how the context menu surfaces the control ("Dennis's share").
const DEFAULT_VOLUME = 1;
// Matches Discord's slider range — up to 200% via the WebAudio GainNode in
// remoteAudioPipelines. HTMLMediaElement.volume only goes to 1.0, so the
// above-100% values are only meaningful on the WebAudio output path.
const MAX_VOLUME = 2;
type VolumeMap = Record<string, number>;
type Listener = (map: VolumeMap) => void;
let current: VolumeMap = {};
const listeners = new Set<Listener>();
function clamp(v: number): number {
if (!Number.isFinite(v)) return DEFAULT_VOLUME;
if (v < 0) return 0;
if (v > MAX_VOLUME) return MAX_VOLUME;
return v;
}
function notify(): void {
for (const fn of listeners) fn(current);
}
export function getScreenShareVolume(userId: string): number {
return current[userId] ?? DEFAULT_VOLUME;
}
export function setScreenShareVolume(userId: string, volume: number): void {
const next = clamp(volume);
if (next === (current[userId] ?? DEFAULT_VOLUME)) return;
current = { ...current, [userId]: next };
applyToAttachedElements(userId, next);
notify();
}
export function subscribeScreenShareVolumes(fn: Listener): () => void {
listeners.add(fn);
return () => {
listeners.delete(fn);
};
}
// Reset on call end — called from CallContext when CallState.idle triggers.
export function clearScreenShareVolumes(): void {
if (Object.keys(current).length === 0) return;
current = {};
notify();
}
// Live-apply to any <audio> element already attached for this share. The
// elements are tagged by attachTrack in CallContext with
// `data-participant="<identity>"` + `data-track-source="screenshare"` — the
// combined selector makes sure we don't retarget the mic audio for the same
// user (different track-source). HTMLMediaElement.volume caps at 1.0, so
// clip here — the WebAudio GainNode on the live pipeline handles values
// above 1.
function applyToAttachedElements(userId: string, volume: number): void {
const elVolume = Math.min(1, Math.max(0, volume));
const nodes = document.querySelectorAll<HTMLAudioElement>(
'audio[data-participant="' +
cssEscape(userId) +
'"][data-track-source="screenshare"]',
);
nodes.forEach((el) => {
el.volume = elVolume;
});
}
function cssEscape(v: string): string {
if (typeof (globalThis as { CSS?: { escape?: (s: string) => string } }).CSS
?.escape === 'function') {
return (globalThis as { CSS: { escape: (s: string) => string } }).CSS.escape(v);
}
return v.replace(/"/g, '\\"');
}