MediaStream aus einem Canvas-, Video- oder Audioelement aufnehmen

Sam Dutton

Mit der Methode captureStream() lässt sich ein MediaStream aus einem <canvas>-, <audio>- oder <video>-Element erfassen.

So kann ein Video- oder Audiostream von einem dieser Elemente aufgezeichnet, über WebRTC live gestreamt oder mit Effekten oder anderen MediaStreams in einem <canvas> kombiniert werden. Mit captureStream() kann MediaStream Media zwischen Canvas-, Audio- oder Videoelementen oder an ein RTCPeerConnection oder MediaRecorder übergeben.

In der folgenden Demo (verfügbar unter WebRTC-Beispiele) wird ein MediaStream, das von einem Canvas-Element auf der linken Seite erfasst wurde, über eine WebRTC-Peer-Verbindung zum Video-Element auf der rechten Seite gestreamt:

Unten finden Sie Links zu weiteren Beispielen für Canvas und Videos.

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 the source 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 the source 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 Aufnahmen oder Livestreams von Canvas- und Media-Elementen erstellen:

  • Gameplay auf einem <canvas> aufzeichnen und streamen
  • Video mit einer Kamera aufnehmen und dann zusätzliche Inhalte oder Effekte hinzufügen
  • Mit einem <canvas> können Sie Bild-im-Bild-Effekte aus mehreren Videos erstellen.
  • Kombinieren Sie Videos und Bilder (aus Dateien, von einer Kamera oder beidem) in einem <canvas>.
  • Aus einer Datei abgespieltes Video live streamen
  • Aufgezeichnete Audio- oder Videonachrichten für Video- oder Sprachnachrichten verwenden

Mit captureStream() kann JavaScript im Grunde Inhalte in einen MediaStream einfügen.

Das Kleingedruckte

  • Wenn Sie versuchen, captureStream() mit einem Media-Element zu verwenden, das den Inhaltsschutz über Encrypted Media Extensions implementiert, wird eine Ausnahme ausgelöst.

  • Wenn Sie von einem <canvas> aufnehmen, wird die maximale Framerate festgelegt, wenn captureStream() aufgerufen wird. canvas.captureStream(10) bedeutet beispielsweise, dass auf dem Canvas zwischen 0 und 10 fps ausgegeben werden. Wenn nichts auf die <canvas> gezeichnet wird, wird auch nichts erfasst. Selbst wenn die <canvas> mit 30 fps gerendert wird, werden nur 10 fps erfasst. Es gibt einen Fehler mit weiteren Informationen in der captureStream-Spezifikation.

  • Die Abmessungen eines captureStream()-Videos entsprechen dem <canvas>, 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 Chrome 52 oder höher standardmäßig.
  • 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