Вставляемые потоки для MediaStreamTrack

Содержимое MediaStreamTrack отображается как поток, которым можно манипулировать или использовать для создания нового контента.

Томас Штайнер

Фон

В контексте API захвата медиаданных и потоков интерфейс MediaStreamTrack представляет собой отдельную медиадорожку в потоке; обычно это аудио- или видеодорожки, но могут существовать и другие типы дорожек. Объекты MediaStream состоят из нуля или более объектов MediaStreamTrack , представляющих различные аудио- или видеодорожки. Каждый MediaStreamTrack может иметь один или несколько каналов. Канал представляет собой наименьшую единицу медиапотока, например, аудиосигнал, связанный с определённым динамиком, например, левый или правый в стереофонической аудиодорожке.

Что такое вставляемые потоки для MediaStreamTrack ?

Основная идея вставляемых потоков для MediaStreamTrack заключается в представлении содержимого MediaStreamTrack как набора потоков (согласно определению WHATWG Streams API ). Этими потоками можно манипулировать для добавления новых компонентов.

Предоставление разработчикам прямого доступа к видео- (или аудио) потоку позволяет им вносить изменения непосредственно в поток. В отличие от этого, реализация той же задачи обработки видео традиционными методами требует от разработчиков использования посредников, таких как элементы <canvas> . (Подробнее об этом процессе см., например, в статье video + canvas = magic .)

Поддержка браузеров

Вставляемые потоки для MediaStreamTrack поддерживаются начиная с Chrome 94.

Варианты использования

Примеры использования вставляемых потоков для MediaStreamTrack включают, помимо прочего:

  • Гаджеты для видеоконференций, такие как «смешные шляпы» или виртуальные фоны.
  • Обработка голоса, например, с помощью программных вокодеров .

Как использовать вставляемые потоки для MediaStreamTrack

Обнаружение особенностей

Вы можете обнаружить вставляемые потоки для поддержки MediaStreamTrack следующим образом.

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

Основные концепции

Вставляемые потоки для MediaStreamTrack основаны на концепциях, ранее предложенных WebCodecs , и концептуально разделяют MediaStreamTrack на два компонента:

  • Процессор MediaStreamTrackProcessor , который использует источник объекта MediaStreamTrack и генерирует поток медиакадров, в частности, объектов VideoFrame или AudioFrame . Его можно рассматривать как приемник треков, способный отображать некодированные кадры трека в виде ReadableStream .
  • MediaStreamTrackGenerator , который принимает поток медиа-кадров и предоставляет интерфейс MediaStreamTrack . Он может быть предоставлен любому приемнику, как и трек из getUserMedia() . Он принимает медиа-кадры в качестве входных данных.

Процессор MediaStreamTrackProcessor

Объект MediaStreamTrackProcessor предоставляет одно свойство — readable . Оно позволяет считывать кадры из MediaStreamTrack . Если дорожка видеодорожка, фрагменты, считываемые из readable , будут объектами VideoFrame . Если дорожка аудиодорожка, фрагменты, считываемые из readable , будут объектами AudioFrame .

MediaStreamTrackGenerator

Объект MediaStreamTrackGenerator также предоставляет одно свойство, writable , представляющее собой WritableStream , позволяющее записывать медиа-кадры в MediaStreamTrackGenerator , который, в свою очередь, является MediaStreamTrack . Если атрибут kind равен "audio" , поток принимает объекты AudioFrame и не может быть обработан любым другим типом. Если атрибут kind равен "video" , поток принимает объекты VideoFrame и не может быть обработан любым другим типом. При записи кадра в writable , автоматически вызывается метод close() этого кадра, поэтому его медиа-ресурсы становятся недоступны из JavaScript.

MediaStreamTrackGenerator — это дорожка, для которой можно реализовать пользовательский источник, записав медиа-кадры в ее writable поле.

Собираем все вместе

Основная идея заключается в создании следующей технологической цепочки:

Платформа-путь → Процессор → Преобразование → Генератор → Платформа-приемники

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

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

Демо

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

Сканер QR-кодов, работающий во вкладке браузера на компьютере, отображает обнаруженный и выделенный QR-код на телефоне, который пользователь держит перед камерой ноутбука.

Вопросы безопасности и конфиденциальности

Безопасность этого API основана на существующих механизмах веб-платформы. Поскольку данные предоставляются через интерфейсы VideoFrame и AudioFrame , применяются правила этих интерфейсов для обработки данных, не соответствующих источнику. Например, доступ к данным из кросс-источниковых ресурсов невозможен из-за существующих ограничений на доступ к таким ресурсам (например, невозможно получить доступ к пикселям изображения или видеоэлемента кросс-источника). Кроме того, доступ к медиаданным с камер, микрофонов или экранов требует авторизации пользователя. Медиаданные, предоставляемые этим API, уже доступны через другие API.

Обратная связь

Команда Chromium хочет узнать о вашем опыте работы со вставляемыми потоками для MediaStreamTrack .

Расскажите нам о дизайне API

Есть ли что-то в API, что работает не так, как вы ожидали? Или отсутствуют методы или свойства, необходимые для реализации вашей идеи? У вас есть вопросы или комментарии по модели безопасности? Отправьте запрос на спецификацию в соответствующий репозиторий GitHub или добавьте свои замечания к существующему запросу.

Сообщить о проблеме с реализацией

Нашли ошибку в реализации Chromium? Или реализация отличается от спецификации? Сообщите об ошибке на сайте new.crbug.com . Опишите проблему как можно подробнее, предоставьте простые инструкции по её воспроизведению и введите Blink>MediaStream в поле «Компоненты» .

Показать поддержку API

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

Отправьте твит @ChromiumDev , используя хэштег #InsertableStreams , и расскажите, где и как вы его используете.

Благодарности

Вставляемые потоки для спецификации MediaStreamTrack были написаны Харальдом Альвестрандом и Гвидо Урданетой . Эту статью рецензировали Харальд Альвестранд, Джо Медли , Бен Вагнер , Хьюб Кляйнхаут и Франсуа Бофорт . Изображение героя Криса Монтгомери на Unsplash .