Capturer un MediaStream à partir d'un élément canevas, vidéo ou audio

Sam Dutton

La méthode captureStream() permet de capturer un MediaStream à partir d'un élément <canvas>, <audio> ou <video>.

Cela permet d'enregistrer, de diffuser en direct via WebRTC ou de combiner un flux vidéo ou audio de l'un de ces éléments avec des effets ou d'autres MediaStream dans un <canvas>. En d'autres termes, captureStream() permet à MediaStream de transmettre des contenus multimédias entre des éléments de canevas, audio ou vidéo, ou à un RTCPeerConnection ou un MediaRecorder.

Dans la démonstration suivante (disponible dans les exemples WebRTC), un MediaStream capturé à partir d'un élément de canevas à gauche est diffusé via une connexion peer WebRTC à l'élément vidéo à droite:

(Vous trouverez des liens vers d'autres exemples de canevas et de vidéos ci-dessous.)

Le code captureStream() est simple.

Pour <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;

Pour <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;
};

Mais pourquoi ?

La méthode captureStream() permet d'enregistrer ou de diffuser en direct à partir de canevas et d'éléments multimédias:

  • Enregistrer et diffuser des parties de jeu depuis un <canvas>
  • Filmer une vidéo avec une caméra, puis ajouter du contenu ou des effets
  • Créer des effets Picture-in-picture à partir de plusieurs vidéos via un <canvas>
  • Combiner des vidéos et des images (à partir de fichiers ou d'une caméra, ou des deux) dans une <canvas>
  • Vidéo diffusée en direct à partir d'un fichier
  • Utiliser un message audio ou vidéo enregistré pour un message vocal ou vidéo

Essentiellement, captureStream() permet à JavaScript de créer et d'injecter des éléments dans un MediaStream.

Les petits caractères

  • Toute tentative d'utilisation de captureStream() avec un élément multimédia qui implémente la protection du contenu via les extensions multimédias chiffrées génère une exception.

  • Lors de la capture à partir d'un <canvas>, la fréquence d'images maximale est définie lorsque captureStream() est appelé. Par exemple, canvas.captureStream(10) signifie que le canevas génère entre 0 et 10 FPS. Rien n'est capturé lorsque rien n'est peint sur le <canvas>, et 10 FPS sont capturés même si le <canvas> est peint à 30 FPS. Un bug avec plus de discussion a été enregistré dans la spécification captureStream.

  • Les dimensions d'une vidéo captureStream() correspondent à celles de l'<canvas> sur laquelle elle a été appelée.

Démonstrations

Canevas

Vidéo

Assistance

  • Dessin captureStream(): Firefox 43 ou version ultérieure ; Chrome 50 ou version ultérieure avec chrome://flags/#enable-experimental-web-platform-features activé, ou Chrome 52 ou version ultérieure par défaut.
  • Vidéo et audio captureStream(): Firefox 47 ; Chrome 52 et versions ultérieures avec chrome://flags/#enable-experimental-web-platform-features activé, ou Chrome 53 et versions ultérieures par défaut.

En savoir plus