Flussi inseribili per MediaStreamTrack

I contenuti di un MediaStreamTrack vengono esposti come uno stream che può essere manipolato o utilizzato per generare nuovi contenuti

Thomas Steiner

Sfondo

Nel contesto dell'API Media Capture and Streams, l'interfaccia MediaStreamTrack rappresenta una singola traccia multimediale all'interno di uno stream. In genere, si tratta di tracce audio o video, ma potrebbero esistere altri tipi di tracce. Gli oggetti MediaStream sono costituiti da zero o più oggetti MediaStreamTrack, che rappresentano varie tracce audio o video. Ogni MediaStreamTrack può avere uno o più canali. Il canale rappresenta l'unità più piccola di un stream multimediale, ad esempio un segnale audio associato a un determinato altoparlante, come sinistro o destro in una traccia audio stereo.

Che cosa sono gli stream inseribili per MediaStreamTrack?

L'idea alla base degli stream inseribili per MediaStreamTrack è esporre i contenuti di un MediaStreamTrack come raccolta di stream (come definita dall'API Streams WHATWG). Questi stream possono essere manipolati per introdurre nuovi componenti.

Se concedi agli sviluppatori l'accesso diretto allo stream video (o audio), possono applicare modifiche direttamente allo stream. Al contrario, realizzare la stessa attività di manipolazione video con metodi tradizionali richiede agli sviluppatori di utilizzare intermediari come gli elementi <canvas>. Per i dettagli su questo tipo di procedura, vedi, ad esempio, video + canvas = magico.

Supporto browser

Gli stream inseribili per MediaStreamTrack sono supportati a partire da Chrome 94.

Casi d'uso

I casi d'uso per gli stream inseribili per MediaStreamTrack includono, a titolo esemplificativo:

  • Gadget per videoconferenze come "cappelli divertenti" o sfondi virtuali.
  • Elaborazione vocale, ad esempio vocoder software.

Come utilizzare gli stream inseribili per MediaStreamTrack

Rilevamento di funzionalità

Puoi rilevare gli stream inseribili per il supporto di MediaStreamTrack come segue.

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

Concetti principali

Gli stream inseribili per MediaStreamTrack si basano sui concetti proposti in precedenza da WebCodecs e suddividono concettualmente MediaStreamTrack in due componenti:

  • MediaStreamTrackProcessor, che utilizza l'origine di un oggetto MediaStreamTrack e genera un flusso di frame multimediali, in particolare oggetti VideoFrame o AudioFrame. È un sink di traccia in grado di esporre i frame non codificati della traccia come un ReadableStream.
  • MediaStreamTrackGenerator, che utilizza un flusso di frame multimediali e espone un'interfaccia MediaStreamTrack. Può essere fornito a qualsiasi sink, proprio come una traccia di getUserMedia(). Prende come input i frame multimediali.

MediaStreamTrackProcessor

Un oggetto MediaStreamTrackProcessor espone una proprietà, readable. Consente di leggere i frame da MediaStreamTrack. Se la traccia è una traccia video, i blocchi letti da readable saranno VideoFrame oggetti. Se la traccia è una traccia audio, i chunk letti da readable saranno oggetti AudioFrame.

MediaStreamTrackGenerator

Un oggetto MediaStreamTrackGenerator espone anche una proprietà, writable, che è un WritableStream che consente di scrivere frame multimediali nel MediaStreamTrackGenerator, che è a sua volta un MediaStreamTrack. Se l'attributo kind è "audio", lo stream accetta oggetti AudioFrame e non va a buon fine con qualsiasi altro tipo. Se il tipo è "video", il flusso accetta VideoFrame oggetti e ha esito negativo con qualsiasi altro tipo. Quando un frame viene scritto in writable, il metodo close() del frame viene invocato automaticamente, in modo che le relative risorse media non siano più accessibili da JavaScript.

Un MediaStreamTrackGenerator è una traccia per la quale è possibile implementare un elemento personalizzato scrivendo frame multimediali nel relativo campo writable.

Riepilogo

L'idea di base è creare una catena di elaborazione come segue:

Canale della piattaforma → Processore → Trasformazione → Generatore → Destinazioni della piattaforma

L'esempio seguente illustra questa catena per un'applicazione di scansione dei codici a barre che mette in evidenza il codice a barre rilevato in uno stream video dal vivo.

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;

Demo

Puoi vedere la demo dello scanner di codici QR della sezione precedente in azione su un browser desktop o mobile. Tieni un codice QR di fronte alla fotocamera e l'app lo rileverà e lo evidenzierà. Puoi visualizzare il codice sorgente dell'applicazione su Glitch.

Scanner di codici QR in esecuzione in una scheda del browser desktop che mostra un codice QR rilevato ed evidenziato sullo smartphone che l&#39;utente tiene di fronte alla fotocamera del laptop.

Considerazioni su sicurezza e privacy

La sicurezza di questa API si basa sui meccanismi esistenti nella piattaforma web. Poiché i dati vengono esposti utilizzando le interfacce VideoFrame e AudioFrame, si applicano le regole di queste interfacce per gestire i dati con origini compromesse. Ad esempio, non è possibile accedere ai dati delle risorse cross-origin a causa delle limitazioni esistenti per l'accesso a queste risorse (ad es. non è possibile accedere ai pixel di un elemento video o immagine cross-origin). Inoltre, l'accesso ai dati multimediali di fotocamere, microfoni o schermi è soggetto all'autorizzazione dell'utente. I dati multimediali esposti da questa API sono già disponibili tramite altre API.

Feedback

Il team di Chromium vuole conoscere la tua esperienza con gli stream inseribili per MediaStreamTrack.

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza? Invia una segnalazione relativa alle specifiche nel repository GitHub corrispondente o aggiungi il tuo parere a una segnalazione esistente.

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chromium? Oppure l'implementazione è diversa dalle specifiche? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, istruzioni semplici per la riproduzione e inserisci Blink>MediaStream nella casella Componenti. Glitch è ideale per condividere riproduzioni rapide e semplici.

Mostra il supporto per l'API

Hai intenzione di utilizzare stream inseribili per MediaStreamTrack? Il tuo supporto pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle.

Invia un tweet all'account @ChromiumDev utilizzando l'hashtag #InsertableStreams e facci sapere dove e come lo utilizzi.

Ringraziamenti

Gli stream inseribili per le specifiche MediaStreamTrack sono stati scritti da Harald Alvestrand e Guido Urdaneta. Questo articolo è stato esaminato da Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout e François Beaufort. Immagine hero di Chris Montgomery su Unsplash.