MediaStream aus einem Canvas-, Video- oder Audioelement aufnehmen

Sam Dutton

Mit der Methode captureStream() können Sie einen MediaStream aus einem <canvas>-, <audio>- oder <video>-Element erfassen.

So können Video- oder Audiostreams von jedem dieser Elemente aufgezeichnet, über WebRTC gestreamt oder mit Effekten oder anderen MediaStreams in einem <canvas> kombiniert werden. Mit captureStream() kann MediaStream Medien zwischen Canvas-, Audio- oder Videoelementen oder an eine RTCPeerConnection oder MediaRecorder übergeben.

In der folgenden Demo (verfügbar in den WebRTC-Beispielen) wird ein MediaStream, das von einem Canvas-Element auf der linken Seite erfasst wurde, über eine WebRTC-Peer-Verbindung an das Videoelement auf der rechten Seite gestreamt:

Unten finden Sie Links zu weiteren Canvas- und Videobeispielen.

Der captureStream()-Code ist einfach.

Für <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;

Für <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;
};

Aber warum?

Mit der captureStream()-Methode können Sie Canvas- und Medienelemente aufzeichnen oder live streamen:

  • Gameplay auf einem <canvas> aufzeichnen und streamen
  • Video mit einer Kamera aufnehmen und dann zusätzliche Inhalte oder Effekte hinzufügen
  • Bild-im-Bild-Effekte aus mehreren Videos über eine <canvas> erstellen
  • Videos und Bilder (aus Dateien oder einer Kamera oder aus beiden) in einem <canvas>
  • Livestreams von Videos, die von einer Datei abgespielt werden
  • Aufgenommene Audio- oder Videonachrichten für eine Video- oder Sprachnachricht verwenden

Im Grunde ermöglicht captureStream() JavaScript, Inhalte zu erstellen und in einen MediaStream einzuschleusen.

Das Kleingedruckte

  • Wenn du captureStream() mit einem Medienelement verwendest, das den Inhaltsschutz über Encrypted Media Extensions implementiert, wird eine Ausnahme ausgelöst.

  • Bei der Aufnahme von einem <canvas> wird die maximale Framerate festgelegt, wenn captureStream() aufgerufen wird. canvas.captureStream(10) bedeutet beispielsweise, dass der Canvas zwischen 0 und 10 fps ausgibt. Wenn auf der <canvas> nichts dargestellt wird, wird auch nichts erfasst. Es werden 10 fps erfasst, auch wenn die <canvas> mit 30 fps dargestellt wird. In der captureStream-Spezifikation wurde ein Fehler mit weiteren Informationen gemeldet.

  • Die Abmessungen eines captureStream()-Videos stimmen mit dem <canvas> überein, auf dem es aufgerufen wurde.

Demos

Canvas

Video

Support

  • Canvas captureStream(): Firefox 43 oder höher, Chrome 50 oder höher mit aktivierter Option „chrome://flags/#enable-experimental-web-platform-features“ oder standardmäßig Chrome 52 oder höher.
  • Video und Audio captureStream(): Firefox 47; Chrome 52 und höher mit aktivierter Option chrome://flags/#enable-experimental-web-platform-features oder Chrome 53 und höher standardmäßig

Weitere Informationen