Leg een MediaStream vast van een canvas-, video- of audio-element

Sam Dutton

De methode captureStream() maakt het mogelijk om een MediaStream vast te leggen van een <canvas> , <audio> of <video> -element.

Hierdoor kan een video- of audiostream van elk van deze elementen worden opgenomen, live gestreamd via WebRTC of gecombineerd met effecten of andere MediaStream in een <canvas> . Met andere woorden: captureStream() kan MediaStream media heen en weer doorgeven tussen canvas-, audio- of video-elementen - of naar een RTCPeerConnection of MediaRecorder .

In de volgende demo (beschikbaar via de WebRTC-voorbeelden ) wordt een MediaStream vastgelegd van een canvaselement aan de linkerkant gestreamd via een WebRTC-peerverbinding naar het video-element aan de rechterkant:

(Er staan ​​links naar meer canvas- en videovoorbeelden hieronder.)

De captureStream() code is eenvoudig.

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

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

Maar waarom?

De methode captureStream() maakt het mogelijk om op te nemen of live te streamen vanaf canvas en media-elementen:

  • Neem gameplay op en stream deze vanaf een <canvas>
  • Leg video vast van een camera en voeg vervolgens extra inhoud of effecten toe
  • Creëer beeld-in-beeld-effecten van meerdere video's via een <canvas>
  • Combineer video en afbeeldingen (van bestanden of een camera of beide) in een <canvas>
  • Livestreamvideo afgespeeld vanuit een bestand
  • Gebruik een opgenomen audio- of videobericht voor een video- of voicemail

In wezen zorgt captureStream() ervoor dat JavaScript dingen kan construeren en "injecteren" in een MediaStream .

De kleine lettertjes

  • Een poging om captureStream() te gebruiken met een media-element dat inhoudsbescherming implementeert via gecodeerde media-extensies zal een uitzondering opleveren.

  • Bij het vastleggen van een <canvas> wordt de maximale framesnelheid ingesteld wanneer captureStream() wordt aangeroepen. canvas.captureStream(10) betekent bijvoorbeeld dat het canvas tussen 0 en 10 fps uitvoert. Er wordt niets vastgelegd als er niets op het <canvas> wordt geschilderd, en er wordt 10 fps vastgelegd, zelfs als het <canvas> met 30 fps wordt geschilderd. Er is een bug met meer discussie over de captureStream specificatie.

  • De afmetingen van een captureStream() video komen overeen met de <canvas> waarop deze is aangeroepen.

Demo's

Canvas

Video

Steun

  • Canvas captureStream() : Firefox 43 of hoger; Chrome 50 en hoger met chrome://flags/#enable-experimental-web-platform-features ingeschakeld, of Chrome 52 en hoger standaard.
  • Video- en audio- captureStream() : Firefox 47; Chrome 52 en hoger met chrome://flags/#enable-experimental-web-platform-features ingeschakeld, of Chrome 53 en hoger standaard.

Meer informatie