Flussi inseribili per MediaStreamTrack

Il contenuto di un MediaStreamTrack viene esposto come flusso 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 possono 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 flusso 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 dei flussi inseribili per MediaStreamTrack è quella di esporre i contenuti di un MediaStreamTrack come raccolta di flussi (come definito dall'API Streams di WHATWG). Questi stream possono essere manipolati per introdurre nuovi componenti.

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

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 della voce come i vocoder software.

Come utilizzare gli stream inseribili per MediaStreamTrack

Rilevamento delle funzionalità

Puoi rilevare le funzionalità degli stream inseribili per il supporto di MediaStreamTrack nel seguente modo.

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

Concetti principali

Gli stream inseribili per MediaStreamTrack si basano su concetti proposti in precedenza da WebCodecs e dividono 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. Puoi considerarlo come un sink di traccia in grado di esporre i frame non codificati della traccia come ReadableStream.
  • MediaStreamTrackGenerator, che utilizza 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 fotogrammi da MediaStreamTrack. Se la traccia è una traccia video, i chunk letti da readable saranno oggetti VideoFrame. Se la traccia è una traccia audio, i blocchi letti da readable saranno oggetti AudioFrame.

MediaStreamTrackGenerator

Un oggetto MediaStreamTrackGenerator espone allo stesso modo 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 riesce con qualsiasi altro tipo. Se il tipo è "video", lo stream accetta oggetti VideoFrame e genera un errore con qualsiasi altro tipo. Quando un frame viene scritto in writable, viene richiamato automaticamente il metodo close() del frame, in modo che le sue risorse multimediali non siano più accessibili da JavaScript.

Una MediaStreamTrackGenerator è una traccia per la quale è possibile implementare una sorgente personalizzata scrivendo i frame multimediali nel relativo campo writable.

Riepilogo

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

Traccia della piattaforma → Processore → Trasformazione → Generatore → Sink della piattaforma

L'esempio seguente illustra questa catena per un'applicazione di scansione di codici a barre che evidenzia il codice a barre rilevato in un flusso video live.

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 mobile o desktop. Tieni un codice QR di fronte alla fotocamera e l'app lo rileverà e lo evidenzierà. Puoi visualizzare il codice sorgente dell'applicazione su GitHub.

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 davanti 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 origine contaminata. Ad esempio, non è possibile accedere ai dati delle risorse multiorigine a causa delle restrizioni 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 di videocamere, 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 le tue esperienze con gli stream inseribili per MediaStreamTrack.

Descrivi la progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà che ti servono per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza? Invia una segnalazione relativa alle specifiche nel repository GitHub corrispondente o aggiungi i tuoi commenti a una segnalazione esistente.

Segnalare un problema relativo all'implementazione

Hai trovato un bug nell'implementazione di Chromium? L'implementazione è diversa dalla specifica? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero possibile di dettagli, istruzioni semplici per la riproduzione e inserisci Blink>MediaStream nella casella Componenti.

Mostra il tuo sostegno all'API

Hai intenzione di utilizzare gli 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 a @ChromiumDev utilizzando l'hashtag #InsertableStreams e facci sapere dove e come lo utilizzi.

Ringraziamenti

La specifica per gli stream inseribili per MediaStreamTrack è stata scritta da Harald Alvestrand e Guido Urdaneta. Questo articolo è stato rivisto da Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout e François Beaufort. Immagine promozionale di Chris Montgomery su Unsplash.