Acquisire un MediaStream da un elemento canvas, video o audio

[Nome di persona]

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

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

Nella demo seguente (disponibile dagli esempi di 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 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 canvas ed elementi multimediali:

  • Registra e riproduci in streaming il gameplay da un <canvas>
  • Acquisisci video da una fotocamera, poi aggiungi altri contenuti o effetti
  • Crea effetti Picture in picture a partire da più video tramite una <canvas>
  • Combina video e immagini (da file o da una fotocamera o entrambi) in un <canvas>
  • Video in live streaming riprodotto da un file
  • Utilizza un messaggio audio o video registrato per un videomessaggio o un messaggio vocale

Essenzialmente, captureStream() abilita JavaScript per creare e "inserire elementi" 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.

  • Se scatti da <canvas>, la frequenza fotogrammi massima viene impostata quando viene chiamato captureStream(). Ad esempio, canvas.captureStream(10) significa che il canvas ha un output compreso tra 0 e 10 f/s. Non viene acquisito nulla se non viene dipinto nulla sulla <canvas> e vengono acquisiti 10 f/s anche se la <canvas> viene visualizzata a 30 f/s. Esiste un bug con ulteriori discussioni registrato nella specifica di captureStream.

  • Le dimensioni di un video captureStream() corrispondono alle <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 a 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 abilitato oppure Chrome 53 e versioni successive per impostazione predefinita.

Scopri di più