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

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

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

Фон

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

Для чего нужны вставляемые потоки MediaStreamTrack?

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

Предоставление разработчикам доступа к потоку видео (или аудио) напрямую позволяет им вносить изменения непосредственно в поток. Напротив, реализация одной и той же задачи обработки видео традиционными методами требует от разработчиков использования посредников, таких как элементы <canvas>. 

Примеры использования

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

1. Гаджеты для видеоконференций, такие как «funny hats» или виртуальные фоны.
2. Обработка голоса как программные vocoders.

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

Начиная с Chrome 90, вставляемые потоки для MediaStreamTrack доступны как часть пробной версии WebCodecs origin в Chrome. Ожидается, что пробная версия origin завершится в Chrome 91 (14 июля 2021 г.). При необходимости будет продолжена отдельная пробная версия источника для вставляемых потоков для MediaStreamTrack.

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

Зарегистрируйтесь для получения пробной версии origin

1. Запросите токен для вашего источника
2. Добавьте токен на свои страницы. Это можно сделать двумя способами:Добавьте origin-trial <meta> тег в заголовок каждой страницы. Например, это может выглядеть примерно так:
   <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">Если вы можете настроить свой сервер, вы также можете добавить токен с помощью HTTP-заголовка Origin-Trial. Результирующий заголовок ответа должен выглядеть примерно так:
   Origin-Trial: TOKEN_GOES_HERE

Включение через chrome: // flags

Чтобы поэкспериментировать со вставляемыми потоками для MediaStreamTrack локально, без пробного маркера origin, включите флаг #enable-experimental-web-platform-features в chrome://flags.

Обнаружение функции

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

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

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

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

1. MediaStreamTrackProcessor, который потребляет источник объекта MediaStreamTrack и генерирует поток кадров медиа, в частности, VideoFrame или AudioFrame объекты. Вы можете думать об этом как о приемнике трека, который способен предоставлять незашифрованные кадры из трека в виде  ReadableStream. Он также открывает канал управления для сигналов, идущих в противоположном направлении.
2. Объект MediaStreamTrackGenerator, который потребляет поток кадров мультимедиа и предоставляет интерфейс MediaStreamTrack. В качестве входных данных принимает медиафреймы. Кроме того, он обеспечивает доступ к управляющим сигналам, которые генерируются приемником.

MediaStreamTrackProcessor

У объекта MediaStreamTrackProcessor есть два свойства:

1. readable: Позволяет читать кадры из MediaStreamTrack. Если дорожка является видеодорожкой, считанные фрагменты readable будут VideoFrame объектами. Если дорожка является звуковой дорожкой, считанные фрагменты readable будут AudioFrame объектами.
2. writableControl: Позволяет отправлять управляющие сигналы на трек. Сигналы управления - это объекты типа MediaStreamTrackSignal.

MediaStreamTrackGenerator

У объекта MediaStreamTrackGenerator также есть два свойства:

1. writable:  WritableStream который позволяет записывать кадры мультимедиа в файл MediaStreamTrackGenerator, который сам по себе является файлом MediaStreamTrack. Если атрибут kind это "audio", поток принимает AudioFrame объекты и не работает с любым другим типом. Если  атрибут kind это "video", поток принимает VideoFrame объекты и не работает с любым другим типом. Когда фрейм записывается writable, метод фрейма close() вызывается автоматически, так что его медиаресурсы больше не доступны из JavaScript.
2. readableControl:  ReadableStream который позволяет считывать управляющие сигналы, отправленные с любых приемников, подключенных к MediaStreamTrackGenerator. Сигналы управления - это объекты типа MediaStreamTrackSignal.

В модели MediaStream, помимо среды, которая течет от источников к стокам, есть также управляющие сигналы, которые текут в противоположном направлении (т. е. от приемников к источникам через дорожку). A MediaStreamTrackProcessor является приемником, и он позволяет отправлять управляющие сигналы на свой трек и источник через свое свойство writableControl. MediaStreamTrackGenerator- это дорожка, для которой можно реализовать настраиваемый источник, записав в его поле writable кадры мультимедиа. Такой источник может получать управляющие сигналы, отправленные приемниками, через свое свойство readableControl.

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

Основная идея состоит в том, чтобы создать следующую технологическую цепочку:

Трек платформы → Процессор → Преобразование → Генератор → Поглотители платформы

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

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);

trackGenerator.readableControl.pipeTo(trackProcessor.writableControl);

Демо

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

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

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