perf(call): screen-share hybrid — OS picker + WASAPI audio
Strip the sourceId-gated chromeMediaSource + xcap native capture paths from startScreenShare and collapse to a single setScreenShareEnabled call. Neither of the bypassed paths produced smooth frames in WebView2: chromeMediaSource: 'desktop' is an extension-only Chromium constraint and throws outside extension origins, and the xcap JPEG-over-IPC fallback couldn't sustain 30fps at 1080p on a single main-thread. setScreenShareEnabled goes through Chromium's native getDisplayMedia capture, which is the only path that gets HW-accelerated frames into the WebRTC encoder from WebView2. Audio continues via the WASAPI loopback module — getDisplayMedia can't grab system sound in WebView2 without desktop-capture entitlements Chromium reserves for extensions. The audio track's teardown chains to the ScreenShare video track's 'ended' event so the Windows stop-share overlay kills both sides in lockstep. ScreenSourcePicker is now a quality + audio chooser only; the thumbnail grid disappears because custom source IDs don't round-trip through WebView2, and a custom picker in front of the OS picker just means the user picks twice. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
byGalax
@@ -1,4 +1,4 @@
|
||||
import { memo, startTransition, useEffect, useRef, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import {
|
||||
@@ -9,21 +9,14 @@ import {
|
||||
type ScreenSharePreset,
|
||||
updateScreenShareSettings,
|
||||
} from '../lib/screenShareSettings';
|
||||
import {
|
||||
captureScreenSourceThumbnailBytes,
|
||||
listScreenSources,
|
||||
type ScreenSource,
|
||||
} from '../lib/screenSources';
|
||||
import { MonitorShareIcon, SpinnerIcon, XIcon } from './icons';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
/** Parent handles the actual share start. `sourceId` is null when the user
|
||||
* clicks "Teilen" without picking a specific source — fallback to the
|
||||
* OS-level getDisplayMedia picker. */
|
||||
/** Parent starts the actual share. The OS picker runs afterwards; the
|
||||
* dialog only gathers quality + audio settings. */
|
||||
onStart: (opts: {
|
||||
sourceId: string | null;
|
||||
preset: ScreenSharePreset;
|
||||
displaySurface: DisplaySurfaceHint;
|
||||
framerate: number | null;
|
||||
@@ -31,143 +24,32 @@ interface Props {
|
||||
}) => Promise<void>;
|
||||
}
|
||||
|
||||
// Discord-style picker. Replaces the old form-field dialog with a thumbnail
|
||||
// grid sourced from the Rust `enumerate_screen_sources` command. Clicking a
|
||||
// thumbnail stashes its Chromium-format id; the parent then attempts a
|
||||
// `chromeMediaSourceId`-constrained getUserMedia call. If WebView2 ignores
|
||||
// the constraint (it may), the fallback OS picker still runs — but at least
|
||||
// the user already saw + chose from a real preview first.
|
||||
// Quality + audio chooser shown before "Bildschirm teilen" opens the OS
|
||||
// source picker. We can't substitute sources in WebView2 — the
|
||||
// `chromeMediaSource: 'desktop'` constraint is extension-only and
|
||||
// ScreenCaptureStarting offers allow/deny, not source-injection — so a
|
||||
// custom thumbnail grid would just double-pick (user picks here, then
|
||||
// picks again in the OS dialog). Dropping the grid keeps the smooth
|
||||
// Chromium-native capture pipeline and narrows the UX to the one
|
||||
// decision that still matters at share-time: quality + audio.
|
||||
export function ScreenSourcePicker({ open, onClose, onStart }: Props) {
|
||||
const { t } = useTranslation(['app']);
|
||||
const initial = getScreenShareSettings();
|
||||
const [sources, setSources] = useState<ScreenSource[] | null>(null);
|
||||
// Thumbnails are kept in a separate state from the source list so an
|
||||
// arriving thumbnail never creates a new `ScreenSource` object for
|
||||
// unrelated cards — memo compares `thumbnailUrl` by string identity,
|
||||
// so only the one card whose URL changes rerenders.
|
||||
const [thumbnailUrls, setThumbnailUrls] = useState<Record<string, string>>({});
|
||||
// All blob URLs we've handed out this session. Revoked on picker close
|
||||
// so the native buffers they point at don't leak across opens.
|
||||
const blobUrlsRef = useRef<string[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [preset, setPreset] = useState<ScreenSharePreset>(initial.preset);
|
||||
const [includeAudio, setIncludeAudio] = useState<boolean>(initial.includeSystemAudio);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Two-phase load: (1) fast list returns names + placeholders so the grid
|
||||
// paints instantly, (2) capture thumbnails in a bounded worker-pool
|
||||
// using the binary-IPC variant. Arriving bytes are wrapped in a Blob
|
||||
// and exposed via URL.createObjectURL — no base64 on either side,
|
||||
// which is the single biggest main-thread win compared to the old
|
||||
// JSON-of-base64 flow. Combined with rAF-batched state updates, the
|
||||
// picker stays responsive even on 20+ source enumerations.
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
// Revoke blob URLs created during the last session so native
|
||||
// buffers don't linger after close.
|
||||
for (const url of blobUrlsRef.current) URL.revokeObjectURL(url);
|
||||
blobUrlsRef.current = [];
|
||||
setSources(null);
|
||||
setThumbnailUrls({});
|
||||
setSelectedId(null);
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
// Coalesce thumbnail arrivals within a single animation frame into
|
||||
// one setState — cuts re-renders from O(N) to O(frames) during the
|
||||
// initial fan-in and prevents consecutive 10-30 ms long tasks from
|
||||
// stacking in one frame.
|
||||
//
|
||||
// Previously `batch` was aliased to `pendingUrls` and then we cleared
|
||||
// pendingUrls via `delete` — which emptied batch too (same reference)
|
||||
// and every flush ended up spreading nothing into the state. Clone
|
||||
// first, then clear, so the batch keeps its entries.
|
||||
let pendingUrls: Record<string, string> = {};
|
||||
let rafScheduled = false;
|
||||
const flush = () => {
|
||||
rafScheduled = false;
|
||||
const batch = pendingUrls;
|
||||
if (Object.keys(batch).length === 0) return;
|
||||
pendingUrls = {};
|
||||
startTransition(() => {
|
||||
setThumbnailUrls((prev) => ({ ...prev, ...batch }));
|
||||
});
|
||||
};
|
||||
const queueUrl = (id: string, url: string) => {
|
||||
pendingUrls[id] = url;
|
||||
if (!rafScheduled) {
|
||||
rafScheduled = true;
|
||||
requestAnimationFrame(flush);
|
||||
}
|
||||
};
|
||||
|
||||
// Concurrency 2: Windows GDI BitBlt / PrintWindow contends for the
|
||||
// desktop compositor, so 4+ parallel captures stutter the whole Tauri
|
||||
// window. 2 in parallel keeps the compositor breathing.
|
||||
const CONCURRENCY = 2;
|
||||
void (async () => {
|
||||
const list = await listScreenSources();
|
||||
if (cancelled) return;
|
||||
setSources(list);
|
||||
const queue = [...list];
|
||||
const pickOne = (src: typeof list[number]) => {
|
||||
void (async () => {
|
||||
const blob = await captureScreenSourceThumbnailBytes(src.id);
|
||||
if (cancelled) {
|
||||
// Edge case: picker closed while this request was in flight.
|
||||
// blob may still exist; nothing holds a URL to it, so it GCs.
|
||||
return;
|
||||
}
|
||||
if (blob) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
blobUrlsRef.current.push(url);
|
||||
queueUrl(src.id, url);
|
||||
}
|
||||
const nextSrc = queue.shift();
|
||||
if (nextSrc) pickOne(nextSrc);
|
||||
})();
|
||||
};
|
||||
for (let i = 0; i < Math.min(CONCURRENCY, queue.length); i++) {
|
||||
const s = queue.shift();
|
||||
if (s) pickOne(s);
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const screens = sources?.filter((s) => s.kind === 'screen') ?? [];
|
||||
const windows = sources?.filter((s) => s.kind === 'window') ?? [];
|
||||
const hasAny = (sources?.length ?? 0) > 0;
|
||||
|
||||
async function handleStart(): Promise<void> {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
// Persist user's audio + preset choice so subsequent shares start with
|
||||
// the same prefs when they skip the picker. The picker itself stays
|
||||
// as the entry for future starts (right-click on share button also
|
||||
// opens it — see InCallPanel wiring).
|
||||
updateScreenShareSettings({ preset, includeSystemAudio: includeAudio });
|
||||
// Infer a displaySurface hint from the selection so the fallback OS
|
||||
// picker jumps to the right tab when our direct-publish path is
|
||||
// rejected by WebView2.
|
||||
const selected = sources?.find((s) => s.id === selectedId) ?? null;
|
||||
const hint: DisplaySurfaceHint =
|
||||
selected?.kind === 'screen'
|
||||
? 'monitor'
|
||||
: selected?.kind === 'window'
|
||||
? 'window'
|
||||
: null;
|
||||
await onStart({
|
||||
sourceId: selected?.id ?? null,
|
||||
preset,
|
||||
displaySurface: hint,
|
||||
displaySurface: null,
|
||||
framerate: null,
|
||||
includeAudio,
|
||||
});
|
||||
@@ -189,7 +71,7 @@ export function ScreenSourcePicker({ open, onClose, onStart }: Props) {
|
||||
>
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex max-h-[88vh] w-full max-w-[860px] flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-xl"
|
||||
className="flex w-full max-w-[420px] flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-xl"
|
||||
>
|
||||
<header className="flex items-center justify-between border-b border-line px-5 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -208,206 +90,71 @@ export function ScreenSourcePicker({ open, onClose, onStart }: Props) {
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{sources === null ? (
|
||||
<div className="flex h-40 items-center justify-center gap-2 text-sm text-fg-muted">
|
||||
<SpinnerIcon className="h-4 w-4" />
|
||||
<span>
|
||||
{t('app:call.share_loading', { defaultValue: 'Lade Quellen…' })}
|
||||
</span>
|
||||
</div>
|
||||
) : !hasAny ? (
|
||||
<div className="flex flex-col items-center gap-2 px-6 py-10 text-center text-sm text-fg-muted">
|
||||
<MonitorShareIcon className="h-6 w-6 opacity-60" />
|
||||
<span>
|
||||
{t('app:call.share_no_sources', {
|
||||
defaultValue:
|
||||
'Keine Quellen-Previews verfügbar. Klick auf „Teilen" öffnet den System-Picker.',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-5 p-5">
|
||||
{screens.length > 0 && (
|
||||
<SourceSection
|
||||
title={t('app:call.share_screens', { defaultValue: 'Bildschirme' })}
|
||||
sources={screens}
|
||||
thumbnailUrls={thumbnailUrls}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
/>
|
||||
)}
|
||||
{windows.length > 0 && (
|
||||
<SourceSection
|
||||
title={t('app:call.share_windows', { defaultValue: 'Fenster' })}
|
||||
sources={windows}
|
||||
thumbnailUrls={thumbnailUrls}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 px-5 py-5">
|
||||
<p className="text-xs text-fg-muted">
|
||||
{t('app:call.share_os_picker_hint', {
|
||||
defaultValue:
|
||||
'Nach dem Klick auf „Teilen" wählst du im System-Dialog den Bildschirm oder das Fenster aus.',
|
||||
})}
|
||||
</p>
|
||||
|
||||
<label className="flex items-center justify-between gap-3 text-xs text-fg">
|
||||
<span className="font-semibold uppercase tracking-wider text-fg-muted">
|
||||
{t('app:call.share_quality', { defaultValue: 'Qualität' })}
|
||||
</span>
|
||||
<select
|
||||
value={preset}
|
||||
onChange={(e) => setPreset(e.target.value as ScreenSharePreset)}
|
||||
className="flex-1 rounded-md border border-line bg-surface-3 px-2 py-1 text-xs text-fg focus:border-accent focus:outline-none"
|
||||
>
|
||||
{PRESET_ORDER.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{getPresetParams(p).label} · ≤ {getPresetParams(p).bitrateKbps} kbps
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex cursor-pointer items-center gap-2 text-xs text-fg">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeAudio}
|
||||
onChange={(e) => setIncludeAudio(e.target.checked)}
|
||||
className="accent-accent"
|
||||
/>
|
||||
<span>
|
||||
{t('app:call.share_system_audio', {
|
||||
defaultValue: 'System-Sound mit übertragen',
|
||||
})}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<footer className="flex flex-col gap-3 border-t border-line bg-surface-2 px-5 py-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-xs text-fg">
|
||||
<span className="font-semibold uppercase tracking-wider text-fg-muted">
|
||||
{t('app:call.share_quality', { defaultValue: 'Qualität' })}
|
||||
</span>
|
||||
<select
|
||||
value={preset}
|
||||
onChange={(e) => setPreset(e.target.value as ScreenSharePreset)}
|
||||
className="rounded-md border border-line bg-surface-3 px-2 py-1 text-xs text-fg focus:border-accent focus:outline-none"
|
||||
>
|
||||
{PRESET_ORDER.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{getPresetParams(p).label} · ≤ {getPresetParams(p).bitrateKbps} kbps
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex cursor-pointer items-center gap-2 text-xs text-fg">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeAudio}
|
||||
onChange={(e) => setIncludeAudio(e.target.checked)}
|
||||
className="accent-accent"
|
||||
/>
|
||||
<span>
|
||||
{t('app:call.share_system_audio', {
|
||||
defaultValue: 'System-Sound mit übertragen',
|
||||
})}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{error && (
|
||||
<p role="alert" className="text-xs text-rose-600 dark:text-rose-300">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg transition hover:bg-surface-2"
|
||||
>
|
||||
{t('app:friends.action_cancel', { defaultValue: 'Abbrechen' })}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleStart()}
|
||||
disabled={busy}
|
||||
className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{busy && <SpinnerIcon className="h-4 w-4" />}
|
||||
<span>
|
||||
{selectedId
|
||||
? t('app:call.share_start', { defaultValue: 'Teilen' })
|
||||
: t('app:call.share_pick_system', {
|
||||
defaultValue: 'Ohne Auswahl weiter',
|
||||
})}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer className="flex items-center justify-end gap-2 border-t border-line bg-surface-2 px-5 py-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg transition hover:bg-surface-2"
|
||||
>
|
||||
{t('app:friends.action_cancel', { defaultValue: 'Abbrechen' })}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleStart()}
|
||||
disabled={busy}
|
||||
className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{busy && <SpinnerIcon className="h-4 w-4" />}
|
||||
<span>{t('app:call.share_start', { defaultValue: 'Teilen' })}</span>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SourceSection({
|
||||
title,
|
||||
sources,
|
||||
thumbnailUrls,
|
||||
selectedId,
|
||||
onSelect,
|
||||
}: {
|
||||
title: string;
|
||||
sources: ScreenSource[];
|
||||
thumbnailUrls: Record<string, string>;
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<section>
|
||||
<h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-fg-muted">
|
||||
{title}
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3">
|
||||
{sources.map((src) => (
|
||||
<SourceCard
|
||||
key={src.id}
|
||||
source={src}
|
||||
thumbnailUrl={thumbnailUrls[src.id] ?? null}
|
||||
selected={selectedId === src.id}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Memoized so a thumbnail arriving for card B doesn't re-render card A.
|
||||
// Keeps re-render work proportional to the number of updates instead of
|
||||
// "whole grid on every update" — which was the main reason scrolling felt
|
||||
// frozen during the initial thumbnail fan-in.
|
||||
//
|
||||
// The parent passes `onSelect(id)` rather than an inline `onClick`-arrow
|
||||
// so the callback reference stays stable across renders; otherwise
|
||||
// React.memo would always see a fresh function prop and re-render every
|
||||
// card on every parent update.
|
||||
const SourceCard = memo(function SourceCard({
|
||||
source,
|
||||
thumbnailUrl,
|
||||
selected,
|
||||
onSelect,
|
||||
}: {
|
||||
source: ScreenSource;
|
||||
thumbnailUrl: string | null;
|
||||
selected: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(source.id)}
|
||||
aria-pressed={selected}
|
||||
title={source.name}
|
||||
className={
|
||||
'group flex cursor-pointer flex-col overflow-hidden rounded-lg border transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 ' +
|
||||
(selected
|
||||
? 'border-accent ring-2 ring-accent/30'
|
||||
: 'border-line hover:border-accent/70')
|
||||
}
|
||||
>
|
||||
<div className="relative aspect-video w-full overflow-hidden bg-black">
|
||||
{thumbnailUrl ? (
|
||||
// decoding="async" keeps image decode off the main-thread paint
|
||||
// step; loading="lazy" means cards outside the viewport don't
|
||||
// ask the browser to decode until the user scrolls to them. The
|
||||
// URL is a blob: URL backed by the ArrayBuffer Rust sent over
|
||||
// IPC — no base64 decode, no data-URL parse, just direct bytes
|
||||
// into the decoder.
|
||||
<img
|
||||
src={thumbnailUrl}
|
||||
alt=""
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
className="h-full w-full object-contain transition group-hover:brightness-110"
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-surface-2 to-surface-3 text-fg-muted">
|
||||
<MonitorShareIcon className="h-6 w-6 opacity-50" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="truncate px-2.5 py-1.5 text-left text-xs font-medium text-fg">
|
||||
{source.name}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user