Acquisire un MediaStream da un elemento canvas, video o audio

Sam Dutton

Il metodo captureStream() consente di acquisire un MediaStream da un elemento <canvas>, <audio> o <video>.

Ciò consente di registrare un flusso video o audio da uno qualsiasi di questi elementi, di trasmetterlo in live streaming tramite WebRTC o di combinarlo con effetti o altri MediaStream in un <canvas>. In altre parole, captureStream() consente a MediaStream di trasferire i contenuti multimediali avanti e indietro tra canvas, elementi audio o video oppure a un RTCPeerConnection o MediaRecorder.

Nella seguente demo (disponibile negli esempi WebRTC), un MediaStream acquisito da un elemento canvas a sinistra viene trasmesso in streaming tramite una connessione peer WebRTC all'elemento video a destra:

Di seguito sono riportati i link ad altri esempi di tela e video.

Il codice captureStream() è semplice.

Per <canvas>:

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

Per <video>:

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

Ma perché?

Il metodo captureStream() consente di registrare o trasmettere in live streaming da elementi di canvas e multimediali:

  • Registrare e trasmettere in streaming il gameplay da un <canvas>
  • Acquisire video da una fotocamera, quindi aggiungere altri contenuti o effetti
  • Crea effetti picture in picture da più video tramite un <canvas>
  • Combina video e immagini (da file, da una videocamera o da entrambi) in un <canvas>
  • Trasmettere in live streaming un video riprodotto da un file
  • Utilizzare un messaggio audio o video registrato per un video o un messaggio vocale

In sostanza, captureStream() consente a JavaScript di costruire e "inserire cose" in un MediaStream.

Clausole

  • Il tentativo di utilizzare captureStream() con un elemento multimediale che implementa la protezione dei contenuti tramite Encrypted Media Extensions genererà un'eccezione.

  • Quando acquisisci da un <canvas>, il frame rate massimo viene impostato quando viene chiamato captureStream(). Ad esempio, canvas.captureStream(10) significa che il canvas genera tra 0 e 10 fps. Non viene acquisito nulla quando non viene disegnato nulla sul <canvas> e vengono acquisiti 10 fps anche se il <canvas> viene disegnato a 30 fps. È stato segnalato un bug con ulteriori discussioni nella specifica captureStream.

  • Le dimensioni di un video captureStream() corrispondono a quelle del <canvas> su cui è stato chiamato.

Demo

Tela

Video

Assistenza

  • Canvas captureStream(): Firefox 43 o versioni successive; Chrome 50 e versioni successive con chrome://flags/#enable-experimental-web-platform-features abilitato oppure Chrome 52 e versioni successive per impostazione predefinita.
  • Video e audio captureStream(): Firefox 47; Chrome 52 e versioni successive con chrome://flags/#enable-experimental-web-platform-features attivato oppure Chrome 53 e versioni successive per impostazione predefinita.

Scopri di più