Мой блог
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение
В сети популярны браузерные инструменты, позволяющие неожиданно пропадать из кадра прямо во время трансляции по щелчку пальцев. По аналогии с подобными решениями для сторонних сервисов было создано стороннее расширение для Яндекс.Телемоста, добавляющее в видеопоток виртуальные фоны, маски, субтитры с переводом и интерактивные элементы управления прямо в браузере.
Проект реализует перехват стандартного видеопотока с веб-камеры, обработку кадров с помощью локальных моделей машинного обучения и трансляцию измененного изображения собеседникам без необходимости установки ПО у других участников.










Перехват камеры и обработка видеопотока
Платформа для видеосвязи получает видеоданные стандартным методом getUserMedia и направляет их через WebRTC. Расширение перехватывает этот вызов до того, как страница его обработает, запускает реальную камеру самостоятельно и возвращает подмененный трек, сгенерированный на базе HTML5 Canvas.

Внутри процесса видеотрек направляется на скрытый элемент видео, кадры последовательно отрисовываются на холсте, а наружу передается поток с помощью метода captureStream. Платформа считывает настройки исходного устройства и метки трека, поэтому расширение подменяет эти параметры оригинальными данными камеры, обеспечивая корректную работу трансляции.

Рендеринг графики выполняется через requestAnimationFrame с ограничением примерно до 30 кадров в секунду. Если предыдущий кадр еще не успел прорисоваться, текущий тик пропускается, что предотвращает накопление задержек на слабых ноутбуках. Обработка аудиопотока и микрофона настраивается отдельно из-за особенностей вызовов интерфейсов захвата.

Использование моделей MediaPipe в браузере
Для распознавания лиц, кистей рук и сегментации силуэтов задействованы локальные модели Google MediaPipe Tasks Vision, функционирующие на базе WebAssembly с аппаратным ускорением графического процессора:

- Face Landmarker анализирует 478 опорных точек лица для фиксации масок и размытия;
- Hand Landmarker отслеживает 21 точку на кисти рук для распознавания жестов и рисования;
- Image Segmenter выделяет маску человека для качественного отделения от фона.
Все необходимые модели входят в состав установочного пакета расширения суммарным объемом около 20 мегабайт. Это избавляет от необходимости скачивания данных со сторонних серверов во время активного звонка. Загрузка происходит по принципу ленивой инициализации: модель активируется только в момент включения соответствующей функции.
Интерактивные эффекты: исчезновение и фоны
Режим исчезновения требует предварительной фиксации пустой комнаты: система делает серию кадров, усредняет их попиксельно для подавления цифрового шума вебкамеры и сохраняет результат в локальном хранилище браузера. При активации эффекта кадр сравнивается с эталоном по цветовым каналам RGB, а специальные алгоритмы корректируют автоэкспозицию и баланс белого.

Визуальный распад изображения настраивается через процедурные маски: пиксели исчезают постепенно в зависимости от горизонтальных координат и случайных факторов, формируя эффект разрушения. Распознавание жестов для запуска триггеров обрабатывается локально по истории расстояний между пальцами на основе анализа видеопотока.

Для замены фонов применяется сегментатор, создающий мягкую альфа-маску с плавными градиентами по краям для корректного отображения волос. Помимо статических изображений, поддерживаются процедурно отрисовываемые анимированные фоны вроде मैट्रिक्स, снега или дождя, не увеличивающие размер дистрибутива.

Маски, субтитры с переводом и обработка голоса
Накладываемые маски состоят из нескольких графических слоев, координаты которых привязываются к точкам лица через аффинные преобразования. Анонимность кадра реализуется через выделение контура лица по 36 точкам с последующим применением классического размытия или уменьшением разрешающей способности пикселизации.

Распознавание речи для субтитров работает через встроенные браузерные интерфейсы Web Speech API, преобразующие аудиопоток в текст. Локальный Translator API выполняет перевод на выбранный язык прямо на устройстве пользователя. Аудиосигнал микрофона проходит через граф Web Audio с набором фильтров и линий задержки, позволяя изменять голос до неузнаваемости или накладывать звуковые эффекты.
