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>.

In questo modo, è possibile registrare uno stream video o audio di uno di questi elementi, eseguire il live streaming tramite WebRTC o combinarlo con effetti o altri MediaStream in un <canvas>. In altre parole, captureStream() consente a MediaStream di passare i contenuti multimediali da un elemento canvas, audio o video all'altro o a un RTCPeerConnection o MediaRecorder.

Nella seguente demo (disponibile nei samples 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 canvas 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 th<e sou>rce 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 th<e sou>rce 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 canvas e multimediali:

  • Registrare e trasmettere in streaming il gameplay da un <canvas>
  • Acquisisci un video da una videocamera, quindi aggiungi contenuti o effetti aggiuntivi
  • Creare effetti in modalità PiP da più video tramite un <canvas>
  • Combinare video e immagini (da file o 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 una videocassetta o un messaggio vocale

In sostanza, captureStream() consente a JavaScript di creare e "iniettare roba" in un MediaStream.

Le clausole

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

  • Quando acquisisci da un <canvas>, la frequenza frame massima viene impostata quando viene chiamato captureStream(). Ad esempio, canvas.captureStream(10) indica che la frequenza di aggiornamento del canvas è compresa tra 0 e 10 fps. Non viene acquisito nulla quando non viene visualizzato alcun elemento sul <canvas> e vengono acquisiti 10 FPS anche se il <canvas> viene visualizzato a 30 FPS. È stato registrato 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 o versioni successive con la funzionalità chrome://flags/#enable-experimental-web-platform-features abilitata oppure Chrome 52 o versioni successive per impostazione predefinita.
  • Video e audio captureStream(): Firefox 47; Chrome 52 e versioni successive con la funzionalità chrome://flags/#enable-experimental-web-platform-features abilitata oppure Chrome 53 e versioni successive per impostazione predefinita.

Scopri di più