feat(room): замена фона видео на картинку — только на десктопе
Кнопка «Фон» в тулбаре комнаты и выбор фона в превью на входе: три готовые
сцены и свои картинки из профиля. Фон применяется процессором к самому
публикуемому треку (`LocalVideoTrack.setProcessor`), а НЕ пересозданием
`RoomOptions` — ссылка на них обязана оставаться стабильной, иначе
`LiveKitRoom` переподключается к комнате.
Фича только для ДЕСКТОПА, и «десктоп» определяется по возможностям устройства
(`pointer: fine` + `hover: hover` + `maxTouchPoints`), а НЕ по ширине окна:
узкое окно на десктопе — всё ещё десктоп, а широкий планшет — всё ещё планшет,
который сегментация греет. На мобильном кнопки нет вовсе, а не задизейбленной.
Ассеты сегментации отдаются СО СВОЕГО домена: библиотека по умолчанию тянет
wasm с jsdelivr, а модель с storage.googleapis.com, и в закрытом контуре фича
молча не работала бы. Модель (Apache 2.0, см. NOTICE.txt) лежит в репозитории,
wasm-рантайм (~19 МБ) копируется из node_modules плагином сборки. Сама
библиотека и модель грузятся ЛЕНИВО — только когда фон реально включают, вход
в конференцию не стал медленнее.
Три дефолтные сцены — собственные векторные рисунки (`design/backgrounds/`),
а не фотографии из интернета: у нарисованной сцены нет чужой лицензии, а
продукт расходится по инсталляциям, и проверять права на каждую копию некому.
Свои картинки — в профиле, до 10 штук, с уменьшением до 1280px и переводом в
WebP прямо в браузере перед отправкой. Удаление применённого сейчас фона
сбрасывает выбор на «без фона»: хранится ключ записи, а не URL картинки.
Смена камеры фон не теряет (`restartTrack` перезапускает процессор сам),
выключение и включение камеры — навешивает его на новый трек заново.
⚠️ Прокси dev-сервера для `/media/` — обязательно со слэшем: ключ `/media`
Vite матчит префиксом и перехватывает заодно `/mediapipe/...`, из-за чего
модель получала 404 и фон молча не включался.
This commit is contained in:
106
design/backgrounds/beach.svg
Normal file
106
design/backgrounds/beach.svg
Normal file
@@ -0,0 +1,106 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
|
||||
<title>Пляж с пальмами — дефолтный фон замены фона видео</title>
|
||||
<desc>Собственная векторная сцена VidConf. Море, песок и пальмы по краям кадра;
|
||||
центр оставлен спокойным — там находится человек.</desc>
|
||||
<defs>
|
||||
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#7fc4e8"/>
|
||||
<stop offset="0.55" stop-color="#bfe4f2"/>
|
||||
<stop offset="1" stop-color="#f2e7c9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#2a8fb5"/>
|
||||
<stop offset="0.5" stop-color="#3aa8c4"/>
|
||||
<stop offset="1" stop-color="#63c8cf"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sand" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#f0dfb8"/>
|
||||
<stop offset="1" stop-color="#d8bf90"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="trunk" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#8c6239"/>
|
||||
<stop offset="1" stop-color="#5f4126"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="sun" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0" stop-color="#fffbe8" stop-opacity="0.95"/>
|
||||
<stop offset="1" stop-color="#fff3c4" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="beachVignette" cx="0.5" cy="0.45" r="0.8">
|
||||
<stop offset="0.55" stop-color="#000000" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#1f4a5c" stop-opacity="0.26"/>
|
||||
</radialGradient>
|
||||
<filter id="seaSoft" x="-5%" y="-5%" width="110%" height="110%">
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
</filter>
|
||||
<filter id="palmSoft" x="-8%" y="-8%" width="116%" height="116%">
|
||||
<feGaussianBlur stdDeviation="7"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="1280" height="720" fill="url(#sky)"/>
|
||||
<ellipse cx="900" cy="150" rx="300" ry="230" fill="url(#sun)"/>
|
||||
|
||||
<g filter="url(#seaSoft)">
|
||||
<!-- Облака -->
|
||||
<ellipse cx="270" cy="128" rx="130" ry="34" fill="#ffffff" opacity="0.72"/>
|
||||
<ellipse cx="350" cy="112" rx="88" ry="28" fill="#ffffff" opacity="0.6"/>
|
||||
<ellipse cx="1010" cy="96" rx="112" ry="28" fill="#ffffff" opacity="0.5"/>
|
||||
|
||||
<!-- Море -->
|
||||
<rect x="0" y="352" width="1280" height="176" fill="url(#sea)"/>
|
||||
<!-- Блики на воде -->
|
||||
<g fill="#ffffff" opacity="0.4">
|
||||
<rect x="120" y="392" width="150" height="6" rx="3"/>
|
||||
<rect x="360" y="420" width="210" height="6" rx="3"/>
|
||||
<rect x="700" y="400" width="170" height="6" rx="3"/>
|
||||
<rect x="980" y="440" width="190" height="6" rx="3"/>
|
||||
<rect x="240" y="466" width="130" height="5" rx="2.5"/>
|
||||
<rect x="820" y="474" width="150" height="5" rx="2.5"/>
|
||||
</g>
|
||||
<!-- Пена у берега -->
|
||||
<path d="M0 512c180 26 360-12 540 8s360 34 740-8v36H0z" fill="#ffffff" opacity="0.75"/>
|
||||
</g>
|
||||
|
||||
<!-- Песок -->
|
||||
<rect x="0" y="530" width="1280" height="190" fill="url(#sand)"/>
|
||||
<g fill="#c9ac7c" opacity="0.45">
|
||||
<ellipse cx="300" cy="640" rx="180" ry="18"/>
|
||||
<ellipse cx="960" cy="682" rx="220" ry="20"/>
|
||||
</g>
|
||||
|
||||
<!-- Пальмы по краям кадра -->
|
||||
<g filter="url(#palmSoft)">
|
||||
<g>
|
||||
<path d="M168 704c-6-190 6-320 40-420l26 8c-30 100-40 226-34 412z" fill="url(#trunk)"/>
|
||||
<g fill="#2f7a4f">
|
||||
<path d="M234 292c-84-30-150-16-196 40 66-16 128-14 186 12z"/>
|
||||
<path d="M234 292c-58-72-124-96-196-76 62 22 116 58 164 102z"/>
|
||||
<path d="M240 288c50-72 116-98 190-82-62 26-114 62-158 108z"/>
|
||||
<path d="M242 296c86-24 154-4 198 56-66-22-128-24-186 4z"/>
|
||||
<path d="M238 282c14-78-8-140-70-176 26 66 38 128 40 184z"/>
|
||||
</g>
|
||||
<g fill="#245f3e">
|
||||
<path d="M236 300c-46 16-88 46-124 90 48-32 94-52 138-60z"/>
|
||||
<path d="M240 300c50 14 94 46 130 92-48-34-96-56-142-64z"/>
|
||||
</g>
|
||||
<circle cx="228" cy="306" r="12" fill="#7a5a30"/>
|
||||
<circle cx="252" cy="312" r="11" fill="#7a5a30"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M1136 720c10-166 2-278-26-360l-24 8c26 84 34 190 26 352z" fill="url(#trunk)"/>
|
||||
<g fill="#2f7a4f">
|
||||
<path d="M1084 352c72-30 134-20 178 30-60-16-118-14-172 8z"/>
|
||||
<path d="M1084 352c50-66 110-90 176-72-56 20-106 54-150 96z"/>
|
||||
<path d="M1080 348c-46-64-104-88-170-74 56 24 102 58 142 100z"/>
|
||||
<path d="M1078 356c-78-22-140-4-180 50 60-20 116-22 168 4z"/>
|
||||
</g>
|
||||
<g fill="#245f3e">
|
||||
<path d="M1082 360c42 14 80 42 112 82-42-30-84-48-124-56z"/>
|
||||
</g>
|
||||
<circle cx="1090" cy="364" r="11" fill="#7a5a30"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<rect width="1280" height="720" fill="url(#beachVignette)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
Reference in New Issue
Block a user