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 de l'un de ces éléments, de le diffuser en direct via WebRTC, ou de combiner des effets ou d'autres MediaStream dans une <canvas>. En d'autres termes, captureStream() permet à MediaStream de faire des allers-retours multimédias entre des éléments de canevas, audio ou vidéo, ou vers 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é en streaming via une connexion pair WebRTC à l'élément vidéo de droite:

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

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 du contenu en direct à partir d'éléments de canevas et multimédias:

  • Enregistrer et diffuser des parties de jeu depuis un <canvas>
  • Enregistrez une vidéo avec une caméra, puis ajoutez du contenu ou des effets supplémentaires
  • Créez 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'un appareil photo, ou les deux) dans un <canvas>
  • Diffusion en direct d'une vidéo lue à partir d'un fichier
  • Utiliser un enregistrement audio ou vidéo pour un message vocal ou vidéo

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

Les petits caractères

  • Si vous tentez d'utiliser captureStream() avec un élément multimédia qui implémente la protection du contenu via des extensions multimédias chiffrées, une exception est générée.

  • 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 une sortie entre 0 et 10 FPS. Rien n'est capturé lorsque rien n'est peint sur la <canvas> et que 10 FPS sont capturés même si le <canvas> est peint à 30 FPS. Un bug pour lequel nous expliquons davantage a été signalé dans la spécification captureStream.

  • Les dimensions d'une vidéo captureStream() correspondent au <canvas> pour lequel elle a été appelée.

Démonstrations

Canevas

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 ou version ultérieure par défaut.

En savoir plus