Загрузка 0
ПОДЕЛИТЬСЯ

Мой блог

Листай вниз

Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение

Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение

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

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

Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 11
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 12
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 13
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 14
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 15
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 16
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 17
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 18
Подмена камеры и расширение возможностей в Яндекс.Телемосте через браузерное расширение — изображение 19

Перехват камеры и обработка видеопотока

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

Реклама
Текущий интерфейс управления расширением
Интерфейс настройки и управления виртуальной комнатой в актуальной версии.

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

Варианты виртуальных фонов для видеозвонка
Примеры статических и процедурных фонов, доступных в интерфейсе.

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

Маски на основе модели Face Landmarker
Пример работы масок, привязанных к опорным точкам лица.

Использование моделей MediaPipe в браузере

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

Режим анонимности и пикселизации лица в кадре
Работа функции анонимности с выделением контура лица.
  • Face Landmarker анализирует 478 опорных точек лица для фиксации масок и размытия;
  • Hand Landmarker отслеживает 21 точку на кисти рук для распознавания жестов и рисования;
  • Image Segmenter выделяет маску человека для качественного отделения от фона.

Все необходимые модели входят в состав установочного пакета расширения суммарным объемом около 20 мегабайт. Это избавляет от необходимости скачивания данных со сторонних серверов во время активного звонка. Загрузка происходит по принципу ленивой инициализации: модель активируется только в момент включения соответствующей функции.

Интерактивные эффекты: исчезновение и фоны

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

Субтитрирование и перевод речи в реальном времени
Отображение субтитров с локальным переводом в нижней части кадра.

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

Счетчик мата и слов-паразитов на видео
Интерфейс подсчета слов-паразитов и ненормативной лексики.

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

Анимированные стикеры и реакции в видеопотоке
Всплывающие анимированные стикеры с альфа-каналом.

Маски, субтитры с переводом и обработка голоса

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

Ретро карточки и быстрые заметки для созвона
Интерфейс цветных ретро-карточек поверх собственного превью.

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

01.