Zawartość elementu MediaStreamTrack jest wyświetlana jako strumień, który może być modyfikowany lub wykorzystywany do generowania nowych treści
Wprowadzenie
W kontekście interfejsu Media Capture and Streams API interfejs MediaStreamTrack reprezentuje 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 0 lub więcej obiektów MediaStreamTrack, które reprezentują różne ścieżki audio i wideo. Każdy element MediaStreamTrack może mieć 1 lub więcej kanałów. Kanał reprezentuje najmniejszą jednostkę strumienia multimediów, np. sygnał dźwiękowy powiązany z danym głośnikiem, np. lewy lub prawy na ścieżce audio.
Co to są strumienie, które można wstawić w przypadku aplikacji MediaStreamTrack?
Podstawową ideą wstawiania strumieni z możliwością wstawiania MediaStreamTrack jest udostępnianie zawartości MediaStreamTrack jako kolekcji strumieni (zgodnie z definicją w interfejsie WhatWG Streams API). Strumienie mogą być wykorzystywane
do wprowadzania nowych komponentów.
Przyznając deweloperom dostęp do strumienia wideo (lub audio) bezpośrednio, można wprowadzać zmiany bezpośrednio w strumieniu. Natomiast w przypadku realizacji tego samego zadania manipulacji filmami za pomocą tradycyjnych metod deweloperzy muszą korzystać z elementów pośrednich, takich jak elementy <canvas>. Szczegółowe informacje o tym rodzaju procesie znajdziesz w opisie na przykład film + obiekt canvas = magia.
Obsługiwane przeglądarki
Strumienie, które można wstawić w przypadku aplikacji MediaStreamTrack, są obsługiwane od Chrome 94.
Przykłady zastosowań
Przypadki użycia strumieni z możliwością wstawiania dla MediaStreamTrack obejmują między innymi:
- Gadżety do rozmów wideo, takie jak „zabawne kapelusze” czy wirtualne tła.
- funkcje przetwarzania głosu, takie jak vokodery programowe;
Jak korzystać ze strumieni z możliwością wstawienia w usłudze MediaStreamTrack
Wykrywanie funkcji
Poniżej znajdziesz opis funkcji wykrywania strumieni, które można wstawić w ramach obsługi standardu MediaStreamTrack.
if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
// Insertable streams for `MediaStreamTrack` is supported.
}
Podstawowe pojęcia
Wstawianie strumieni dla MediaStreamTrack bazuje na pojęciach zaproponowanych wcześniej przez WebCodecs i koncepcyjnie dzieli MediaStreamTrack na 2 komponenty:
MediaStreamTrackProcessor, który używa źródła obiektuMediaStreamTracki generuje strumień ramek multimediów, w szczególności obiektówVideoFramelubAudioFrame. Możesz to traktować jako ujście ścieżki, które może ujawniać niezakodowane klatki ze ścieżki jako formatReadableStream.- Element
MediaStreamTrackGenerator, który przetwarza strumień ramek multimediów i wyświetla interfejsMediaStreamTrack. Można je udostępnić do dowolnego ujścia, tak jak ścieżka zgetUserMedia(). Jako dane wejściowe przyjmuje klatki multimedialne.
MediaStreamTrackProcessor
Obiekt MediaStreamTrackProcessor ujawnia 1 właściwość: readable. Umożliwia odczytywanie ramek z interfejsu MediaStreamTrack. W przypadku ścieżki wideo fragmenty odczytywane z readable będą mieć wartość VideoFrame obiektów. Jeśli ścieżka dźwiękowa jest ścieżką dźwiękową, fragmenty odczytywane z elementu readable będą wymagały AudioFrame obiektów.
MediaStreamTrackGenerator
Obiekt MediaStreamTrackGenerator ujawnia też 1 właściwość – writable, czyli WritableStream, która umożliwia zapisywanie ramek multimediów w obiekcie MediaStreamTrackGenerator, która sama jest MediaStreamTrack. Jeśli atrybut kind to "audio", strumień akceptuje obiekty AudioFrame, a w przypadku każdego innego typu występuje błąd. Jeśli rodzaj to "video", strumień akceptuje obiekty VideoFrame i kończy się niepowodzeniem w przypadku każdego innego typu. Po zapisaniu ramki w interfejsie writable jej metoda close() jest wywoływana automatycznie, dzięki czemu jej zasoby multimedialne nie są już dostępne z poziomu JavaScriptu.
MediaStreamTrackGenerator to ścieżka, w której przypadku można zaimplementować niestandardowe źródło, wpisując ramki multimediów w polu writable.
Wszystko w jednym miejscu
Podstawowym założeniem jest utworzenie łańcucha przetwarzania w taki sposób:
Ścieżka platformy → Procesor → Przekształcenie → Generator → Ujścia platformy
Przykład poniżej przedstawia ciąg aplikacji do skanowania kodów kreskowych, która wyróżnia wykryty kod kreskowy w strumieniu wideo 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;
Pokaz
Prezentację skanera kodów QR powyżej znajdziesz w sekcji powyżej na komputerze lub urządzeniu mobilnym. Przytrzymaj kod QR przed aparatem, a aplikacja go wykryje i podświetli. Kod źródłowy aplikacji możesz zobaczyć w Glitch.
Bezpieczeństwo i prywatność
Bezpieczeństwo tego interfejsu API bazuje na istniejących mechanizmach na platformie internetowej. Ponieważ dane są udostępniane za pomocą interfejsów VideoFrame i AudioFrame, w tych interfejsach obowiązują reguły postępowania z danymi pochodzącymi z domeny. Na przykład z powodu ograniczeń dostępu do tych zasobów nie można uzyskać dostępu do danych z zasobów z innych domen (np. nie można uzyskać dostępu do pikseli obrazu lub elementu wideo z innych domen). Dostęp do danych multimedialnych z kamer, mikrofonów lub ekranów
wymaga autoryzacji użytkownika. Dane multimediów udostępniane przez ten interfejs API są już dostępne w innych interfejsach API.
Prześlij opinię
Zespół Chromium chce poznać Twoją opinię na temat korzystania ze strumieni, które można wstawić w przypadku MediaStreamTrack.
Opowiedz nam o projekcie interfejsu API
Czy interfejs API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, które potrzebujesz do realizacji swojego pomysłu? Czy masz jakieś pytania lub uwagi na temat modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi do istniejącego problemu.
Zgłoś problem z implementacją
Czy wystąpił 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 i proste instrukcje odtwarzania, a następnie wpisz Blink>MediaStream w polu Komponenty.
Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.
Pokaż obsługę interfejsu API
Czy zamierzasz używać strumieni, które można wstawić w aplikacji MediaStreamTrack? Twoje publiczne wsparcie pomaga zespołowi Chromium w określaniu priorytetów funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.
Wyślij tweeta na adres @ChromiumDev, używając hashtagu #InsertableStreams, i daj nam znać, gdzie i w jaki sposób go używasz.
Przydatne linki
Podziękowania
Strumienie, które można wstawić do specyfikacji MediaStreamTrack, napisali Harald Alvestrand i Guido Urdaneta.
Ten artykuł napisali Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout i François Beaufort. Baner powitalny od Chrisa Montgomery w filmie Unsplash.