Flussi inseribili per MediaStreamTrack

Thomas Steiner

Data di pubblicazione: 4 maggio 2021

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 flusso multimediale, ad esempio un segnale audio associato a un determinato altoparlante, come quello sinistro o destro in una traccia audio stereo.

Che cosa sono gli stream inseribili per MediaStreamTrack?

L'idea di base alla base degli stream inseribili per MediaStreamTrack è quella di esporre i contenuti di un MediaStreamTrack come raccolta di stream (come definiti 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 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

I flussi 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

Rileva 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

I flussi 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 frame da MediaStreamTrack. Se la traccia è una traccia video, i blocchi letti da readable saranno oggetti VideoFrame. Se la traccia è una traccia audio, i segmenti 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 in 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 contaminati dall'origine. 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? O l'implementazione è diversa dalla specifica? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, istruzioni per la riproduzione e inserisci Blink>MediaStream nella casella Componenti.

Supporto per l'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 dei flussi inseribili per MediaStreamTrack è stata scritta da Harald Alvestrand e Guido Urdaneta. Questa pagina è stata rivista da Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout e François Beaufort.