Flussi inseribili per MediaStreamTrack

I contenuti di MediaStreamTrack vengono esposti come stream che possono essere manipolati o utilizzati per generare nuovi contenuti

Thomas Steiner

Contesto

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 uno stream multimediale, ad esempio un segnale audio associato a un determinato altoparlante, come l'unità a destra o sinistra in una traccia audio stereo.

Che cosa sono gli stream inseribili per MediaStreamTrack?

L'idea alla base dei flussi inseribili per MediaStreamTrack è esporre il contenuto di un elemento MediaStreamTrack come raccolta di flussi (come definito dall'API Streams di WhatWG). Questi flussi possono essere manipolati per introdurre nuovi componenti.

Concedere agli sviluppatori l'accesso diretto allo stream video (o audio) consente loro di applicare le modifiche direttamente allo stream. Al contrario, per realizzare la stessa attività di manipolazione video con i metodi tradizionali, gli sviluppatori devono usare intermediari come gli elementi <canvas>. Per i dettagli di questo tipo di procedura, vedi, ad esempio, video + canvas = magic.

Supporto del browser

Gli stream inseribili per MediaStreamTrack sono supportati da Chrome 94.

casi d'uso

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

  • Gadget per videoconferenze come "cappelli divertenti" o sfondi virtuali.
  • Elaborazione dati vocali come vocoder software.

Come utilizzare gli stream inseribili per MediaStreamTrack

Rilevamento delle funzionalità

Puoi rilevare gli stream inseribili per il supporto di MediaStreamTrack nel modo seguente.

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

Concetti principali

I flussi inseribili per MediaStreamTrack si basano su concetti precedentemente proposti da WebCodecs e suddivide concettualmente MediaStreamTrack in due componenti:

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

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 oggetti VideoFrame. Se la traccia è una traccia audio, i blocchi letti da readable saranno AudioFrame oggetti.

MediaStreamTrackGenerator

Un oggetto MediaStreamTrackGenerator espone anche una proprietà, writable, che è una WritableStream che consente di scrivere frame multimediali nell'elemento MediaStreamTrackGenerator, che a sua volta è un MediaStreamTrack. Se l'attributo kind è "audio", il flusso accetta oggetti AudioFrame e ha esito negativo 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 richiamato automaticamente, per cui le risorse multimediali non sono più accessibili da JavaScript.

Un MediaStreamTrackGenerator è una traccia per cui è possibile implementare un'origine personalizzata scrivendo frame multimediali nel relativo campo writable.

Riepilogo

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

Tracciamento della piattaforma → Processore → Trasforma → Generatore → Sink di piattaforme

L'esempio seguente illustra questa catena per un'applicazione di lettura dei codici a barre che evidenzia il codice a barre rilevato in un video stream in diretta.

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 nella 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 su meccanismi esistenti nella piattaforma web. Quando i dati vengono esposti utilizzando le interfacce VideoFrame e AudioFrame, si applicano le regole di queste interfacce per gestire i dati incompatibili con l'origine. Ad esempio, non è possibile accedere ai dati delle risorse multiorigine a causa di limitazioni esistenti per l'accesso a queste risorse (ad es. non è possibile accedere ai pixel di un elemento immagine o video multiorigine). Inoltre, l'accesso ai dati multimediali da videocamere, microfoni o schermi è soggetto ad 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? Segnala un problema relativo alle specifiche nel repository GitHub corrispondente oppure aggiungi le tue opinioni su un problema esistente.

Segnala 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 e di istruzioni semplici per la riproduzione e inserisci Blink>MediaStream nella casella Componenti. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Mostra il supporto dell'API

Prevedi 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 è fondamentale supportarle.

Invia un tweet a @ChromiumDev usando l'hashtag #InsertableStreams e facci sapere dove e come lo stai usando.

Ringraziamenti

Gli stream inseribili per la specifica 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.