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 un flux vidéo ou audio à partir de l'un de ces éléments, de le diffuser en direct via WebRTC ou de le combiner 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 canvas, audio ou vidéo, ou à un RTCPeerConnection ou un MediaRecorder.

Dans la démo suivante (disponible dans les exemples WebRTC), un MediaStream capturé à partir d'un élément canvas à gauche est diffusé via une connexion WebRTC peer-to-peer vers 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 the source 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 the source 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 des éléments canvas et multimédias :

  • Enregistrer et diffuser une partie 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, d'une caméra ou des deux) dans un <canvas>
  • Diffuser en direct une vidéo lue à partir d'un fichier
  • Utiliser un message audio ou vidéo enregistré pour un message vidéo ou vocal

En substance, captureStream() permet à JavaScript de construire et d'"injecter des éléments" dans un MediaStream.

Mentions légales

  • Toute tentative d'utilisation de captureStream() avec un élément multimédia qui implémente la protection du contenu via Encrypted Media Extensions 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 <canvas>, et 10 FPS sont capturés même si <canvas> est peint à 30 FPS. Un bug avec plus de détails a été signalé dans la spécification captureStream.

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

Démonstrations

Canvas

Vidéo

Assistance

  • Canvas 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