diff --git a/.gitignore b/.gitignore index 795daa5..3fe3be3 100644 --- a/.gitignore +++ b/.gitignore @@ -61,3 +61,4 @@ frontend/public/mediapipe/wasm/ # Рабочая страница замера CPU (сессия 35), в репозиторий не идёт. frontend/bg-bench.html +frontend/bg-support.html diff --git a/frontend/src/lib/virtualBackground.ts b/frontend/src/lib/virtualBackground.ts index 1cd05fd..dbe64f8 100644 --- a/frontend/src/lib/virtualBackground.ts +++ b/frontend/src/lib/virtualBackground.ts @@ -98,21 +98,60 @@ export function resolveBackgroundUrl( } /** - * Поддерживает ли браузер сегментацию вообще. + * Поддерживает ли браузер замену фона. * - * Проверяется по наличию API конвейера обработки кадров (Insertable Streams / - * `MediaStreamTrackProcessor`) — их нет, например, в Firefox. Проверка - * СИНХРОННАЯ и намеренно не трогает саму библиотеку: она нужна до её загрузки, - * чтобы не показывать кнопку, которая всё равно не сработает, и не тянуть - * мегабайты впустую. + * Проверка СИНХРОННАЯ и намеренно не трогает саму библиотеку: решение нужно + * ДО её загрузки, чтобы не показывать кнопку, которая не сработает, и не + * тянуть мегабайты впустую. Поэтому здесь буквально повторено условие + * `supportsBackgroundProcessors()` из `@livekit/track-processors` — при + * обновлении пакета сверять с ним. + * + * ⚠️ Конвейеров у библиотеки ДВА, и требовать современный нельзя: + * - современный (`MediaStreamTrackProcessor`/`Generator`, Insertable Streams) + * есть только в Chrome и производных; + * - запасной рисует кадры в canvas и отдаёт `canvas.captureStream()` — он + * работает в Safari и Firefox. + * + * Первая версия (0.0.35) требовала именно современный конвейер — и фича + * молча отсутствовала в Safari и Firefox, хотя запасной путь там доступен. + * Условие ниже — «умеет считать сегментацию» И «есть хоть какой-то конвейер». */ export function isVirtualBackgroundSupported(): boolean { if (typeof window === 'undefined') return false - return ( - 'MediaStreamTrackProcessor' in window && - 'MediaStreamTrackGenerator' in window && - typeof OffscreenCanvas !== 'undefined' - ) + return canRunSegmentation() && hasAnyFramePipeline() +} + +/** + * Условие `BackgroundTransformer.isSupported`: чем библиотека считает маску и + * собирает кадр. WebGL2 проверяется созданием пробного контекста — иначе никак, + * но результат кэшируется на всю жизнь страницы: браузеры держат ограниченное + * число живых WebGL-контекстов, и создавать новый на каждый рендер нельзя. + */ +let segmentationSupport: boolean | null = null +function canRunSegmentation(): boolean { + if (segmentationSupport !== null) return segmentationSupport + const hasApis = + typeof OffscreenCanvas !== 'undefined' && + typeof VideoFrame !== 'undefined' && + typeof createImageBitmap !== 'undefined' + if (!hasApis) { + segmentationSupport = false + return false + } + const probe = document.createElement('canvas').getContext('webgl2') + // Пробный контекст сразу отпускаем — он больше не нужен, а слот в лимите + // браузера занимал бы до сборки мусора. + probe?.getExtension('WEBGL_lose_context')?.loseContext() + segmentationSupport = Boolean(probe) + return segmentationSupport +} + +/** Условие `ProcessorWrapper.isSupported`: современный конвейер ЛИБО запасной на canvas. */ +function hasAnyFramePipeline(): boolean { + const modern = 'MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window + const fallback = + typeof HTMLCanvasElement !== 'undefined' && 'captureStream' in HTMLCanvasElement.prototype + return modern || fallback } /**