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 w ścieżce audio stereo.

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

Podstawową ideą strumieni do wstawiania w MediaStreamTrack jest udostępnianie treści MediaStreamTrack jako kolekcji strumieni (zgodnie z definicją interfejsu WHATWG Streams API). 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 Chrome.

Przypadki użycia

Przykłady zastosowań strumieni danych do wstawiania w 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 korzysta ze źródła obiektu MediaStreamTrack i generuje strumień klatek multimediów, w tym obiektów VideoFrame lub AudioFrame). Możesz sobie wyobrazić, że jest to element track sink, który może udostępniać niekodowane ramki z ś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 otrzymuje ramki multimedialne.

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 ścieżka to ścieżka audio, fragmenty odczytane z 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 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 do writable, automatycznie wywoływana jest metoda close(), dzięki czemu jej zasoby multimedialne nie są już dostępne z poziomu 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 założeniem 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 znajdziesz na Glitch.

Skaner kodów QR działający na karcie przeglądarki na komputerze. 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. Dane są udostępniane za pomocą interfejsów VideoFrame i AudioFrame, dlatego stosuje się reguły tych interfejsów dotyczące danych z zafałszowanym źródłem. 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.

Poinformuj nas 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 znalazłeś błąd w implementacji Chromium? A może 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ż informacje o pomocy dotyczącej interfejsu API

Czy planujesz używać strumieni wstawialnych w przypadku MediaStreamTrack? Twoja publiczna pomoc pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

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.