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

Sam Dutton

Met de captureStream() methode kunt u een MediaStream vastleggen vanuit een <canvas> -, <audio> - of <video> -element.

Hierdoor kan een video- of audiostream van elk van deze elementen worden opgenomen, live worden gestreamd via WebRTC, of ​​worden gecombineerd met effecten of andere MediaStream elementen in een <canvas> . Met andere woorden, captureStream() stelt MediaStream in staat om media heen en weer te sturen 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 vanuit een canvas-element aan de linkerkant, via een WebRTC-peerverbinding gestreamd naar het video-element aan de rechterkant:

(Hieronder vindt u links naar meer canvas- en videovoorbeelden.)

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?

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

  • Gameplay opnemen en streamen vanaf een <canvas>
  • Leg video vast vanaf een camera en voeg vervolgens extra inhoud of effecten toe
  • Maak 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 vanaf een bestand
  • Gebruik een opgenomen audio- of videoboodschap voor een video- of voicemail

In principe zorgt captureStream() ervoor dat JavaScript een MediaStream kan construeren en er 'dingen in kan injecteren'.

De kleine lettertjes

  • Als u probeert captureStream() te gebruiken met een media-element dat inhoudsbeveiliging implementeert via Encrypted Media Extensions, wordt er een uitzondering gegenereerd.

  • Bij het vastleggen van een <canvas> wordt de maximale framesnelheid ingesteld wanneer captureStream() wordt aangeroepen. canvas.captureStream(10) betekent bijvoorbeeld dat het canvas een uitvoersnelheid tussen 0 en 10 fps heeft. Er wordt niets vastgelegd wanneer 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 informatie over de captureStream specificatie.

  • De afmetingen van een captureStream() -video komen overeen met het <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 standaard Chrome 52 en hoger.
  • Video- en audio- captureStream() : Firefox 47; Chrome 52 en hoger met chrome://flags/#enable-experimental-web-platform-features ingeschakeld, of standaard Chrome 53 en hoger.

Meer informatie