Потоки со вставкой для API MediaStreamTrack

API потоков со вставкой для MediaStreamTrack предоставляет метод добавления новых компонентов в MediaStreamTrack.

При обработке видео или аудио иногда необходимо вставлять дополнительные элементы или обрабатывать поток иными способами. Например, приложение может содержать две дорожки, которые нужно объединить, такие как карта погоды и видео с презентатором, объясняющим эту карту. Или вы можете обработать дорожку, чтобы размыть фоны, удалить фоновый шум или добавить другие элементы (например, добавить смешные шляпы людям и так далее). Этот API предоставляет способ сделать это, предоставляя прямой доступ к потоку, что позволяет его манипулировать.

MediaStreamTrackGenerator

Создаёт WritableStream, который выступает в роли источника MediaStreamTrack.

MediaStreamTrackProcessor

Потребляет источник объекта MediaStreamTrack и генерирует поток кадров медиа.

Следующий пример взят из статьи Потоки со вставкой для MediaStreamTrack и демонстрирует приложение для сканирования штрих-кодов, которое выделяет штрих-код в потоке видео. Это преобразует доступ к потоку через MediaStreamTrackProcessor.readable.

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