Wstawianie strumieni dla MediaStreamTrack

Treści MediaStreamTrack są udostępniane jako strumień, którym można manipulować lub którego można używać do generowania nowych treści.

Thomas Steiner

Tło

W kontekście interfejsu Media Capture and Streams API MediaStreamTrackreprezentuje on pojedynczą ścieżkę multimedialną w strumieniu. Zwykle są to ścieżki audio lub wideo, ale mogą też występować inne typy ścieżek. Obiekty MediaStream składają się z zera lub więcej obiektów MediaStreamTrack, które reprezentują różne ścieżki audio lub wideo. Każdy element MediaStreamTrack może mieć co najmniej 1 kanał. Kanał reprezentuje najmniejszą jednostkę strumienia multimediów, np. sygnał audio powiązany z danym głośnikiem (np. lewy lub prawy na stereofonicznej ścieżce audio).

Do czego służą strumień do wstawienia MediaStreamTrack?

Podstawowym założeniem w przypadku strumieni możliwych do wstawiania w przypadku obiektu MediaStreamTrack jest udostępnianie treści obiektu MediaStreamTrack jako zbioru strumieni (zgodnie z definicją za pomocą interfejsu Streams API WhatWG). Transmisje te można modyfikować, aby wprowadzać nowe komponenty.

Przyznanie deweloperom dostępu do strumienia wideo (lub audio) pozwala im wprowadzać zmiany bezpośrednio w tym strumieniu. Z drugiej strony, realizacja tego samego zadania manipulacji wideo za pomocą tradycyjnych metod wymaga od programistów korzystania z elementów pośrednich, takich jak elementy <canvas>. (szczegóły tego typu procesu znajdziesz np. w artykule wideo + canvas = magia).

Obsługa przeglądarek

Możliwość wstawiania strumieni w MediaStreamTrack jest obsługiwana od wersji 94.

Przypadki użycia

Przykłady zastosowań strumieni danych do wstawiania w przypadku MediaStreamTrack:

  • gadżety do wideokonferencji, takie jak „śmieszne czapki” czy wirtualne tła;
  • przetwarzanie głosu, np. za pomocą vocoderów;

Jak używać strumieni do wstawiania w przypadku MediaStreamTrack

Wykrywanie cech

Aby wykryć strumienie do wstawiania, które obsługuje MediaStreamTrack, wykonaj te czynności.

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

Podstawowe pojęcia

Możliwość wstawiania strumieni w przypadku MediaStreamTrack opiera się na koncepcjach zaproponowanych wcześniej przez WebCodecs i koncepcyjnie dzieli MediaStreamTrack na 2 komponenty:

  • MediaStreamTrackProcessor, który pobiera źródło obiektu MediaStreamTrack i generuje strumień ramek multimedialnych, a w szczególności obiektów VideoFrame lub AudioFrame. Można to wyobrazić sobie jako ujście ścieżki, które umożliwia ujawnianie niezakodowanych klatek ze ścieżki jako ReadableStream.
  • MediaStreamTrackGenerator, który pobiera strumień klatek multimediów i wyświetla interfejs MediaStreamTrack. Może być przekazywany do dowolnego odbiornika, tak jak ścieżka z getUserMedia(). Na wejściu przyjmuje ramki multimediów.

MediaStreamTrackProcessor

Obiekt MediaStreamTrackProcessor udostępnia jedną właściwość readable. Umożliwia odczyt ramek z MediaStreamTrack. Jeśli ścieżka jest ścieżką wideo, fragmenty odczytywane z readable będą obiektami VideoFrame. Jeśli jest to ścieżka audio, fragmenty odczytywane z elementu readable będą obiektami AudioFrame.

MediaStreamTrackGenerator

Obiekt MediaStreamTrackGenerator udostępnia jedną właściwość, writable, która jest WritableStream, która umożliwia zapisywanie ramek multimediów w MediaStreamTrackGenerator, który jest sam w sobie MediaStreamTrack. Jeśli atrybut kind ma wartość "audio", strumień akceptuje obiekty AudioFrame, a nie akceptuje obiektów innego typu. Jeśli rodzaj to "video", strumień akceptuje obiekty VideoFrame, a w przypadku innych typów kończy się niepowodzeniem. Gdy ramka jest zapisywana w poziomie writable, automatycznie wywoływana jest metoda close(), dzięki czemu jej zasoby multimedialne nie są już dostępne z JavaScriptu.

MediaStreamTrackGenerator to ścieżka, do której można zastosować źródło niestandardowe, zapisując ramki multimediów w polu writable.

Wszystko w jednym miejscu

Głównym pomysłem jest utworzenie łańcucha przetwarzania w ten sposób:

Platforma ścieżki → Procesor → Transformacja → Generator → Platforma odbiornika

Przykład poniżej ilustruje ten łańcuch w przypadku aplikacji skanera kodów kreskowych, która wyróżnia wykryty kod kreskowy w transmisji strumieniowej na żywo.

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;

Prezentacja

Możesz zobaczyć demonstrację skanera kodów QR z sekcji powyżej w działaniu na komputerze lub w przeglądarce mobilnej. Umieść kod QR przed obiektywem, a aplikacja wykryje go i podświetli. Kod źródłowy aplikacji możesz zobaczyć na Glitch.

Skaner kodów QR działający na karcie przeglądarki komputerowej. Pokazuje wykryty i wyróżniony kod QR na telefonie, który użytkownik trzyma przed kamerą laptopa.

Zagadnienia związane z bezpieczeństwem i prywatnością

Bezpieczeństwo tego interfejsu API zależy od istniejących mechanizmów na platformie internetowej. Ponieważ dane są udostępniane za pomocą interfejsów VideoFrame i AudioFrame, obowiązują reguły tych interfejsów dotyczące danych pochodzących z źródła. Na przykład nie można uzyskać dostępu do danych ze zasobów z innych źródeł ze względu na istniejące ograniczenia dostępu do takich zasobów (np. nie można uzyskać dostępu do pikseli obrazu lub elementu wideo z innego źródła). Dodatkowo dostęp do danych multimedialnych z kamer, mikrofonów lub ekranów jest uzależniony od autoryzacji użytkownika. Dane multimedialne udostępniane przez ten interfejs API są już dostępne za pomocą innych interfejsów API.

Prześlij opinię

Zespół Chromium chce poznać Twoje wrażenia związane z używaniem strumieni wstawianych w MediaStreamTrack.

Prześlij informacje o projektowaniu interfejsu API

Czy coś w interfejsie API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu? Czy masz pytania lub uwagi dotyczące modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi do istniejącego problemu.

Zgłaszanie problemów z implementacją

Czy wystąpił błąd związany z implementacją Chromium? Czy implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtwarzania błędu i wpisz Blink>MediaStream w polu Składniki. Glitch to świetne narzędzie do szybkiego i łatwego udostępniania informacji o powtarzających się problemach.

Pokaż wsparcie dla interfejsu API

Czy planujesz używać strumieni wstawialnych w przypadku MediaStreamTrack? Twoje publiczne wsparcie pomaga zespołowi Chromium w ustalaniu priorytetów funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest, aby ich obsługa była kluczowa.

Wyślij tweeta do @ChromiumDev, używając hashtaga #InsertableStreams i podaj, gdzie i jak go używasz.

Podziękowania

Strumienie do wstawiania w specyfikacji MediaStreamTrack zostały napisane przez Haralda Alvestranda i Guido Urdaneta. Ten artykuł został sprawdzony przez Haralda Alvestranda, Joe Medleya, Bena Wagnera, Huiba Kleinhouta i Françoisa Beauforta. Baner powitalny autorstwa Chrisa Montgomerya z Unsplash.