MediaStream aus einem Canvas-, Video- oder Audioelement aufnehmen

Dutton

Mit der Methode captureStream() kann ein MediaStream aus einem <canvas>-, <audio>- oder <video>-Element erfasst werden.

Dadurch kann ein Video- oder Audiostream von einem dieser Elemente aufgezeichnet, live über WebRTC übertragen oder mit Effekten oder anderen MediaStreams in einer <canvas> kombiniert werden. Mit anderen Worten, captureStream() ermöglicht es MediaStream, Medien zwischen Canvas-, Audio- oder Videoelementen oder an ein RTCPeerConnection- oder MediaRecorder-Element zu übertragen.

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

Links zu weiteren Leinwand- und Videobeispielen finden Sie unten.

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 Methode captureStream() können Sie über Canvas- und Medienelemente aufzeichnen oder live streamen:

  • Spiele von einem <canvas> aufzeichnen und streamen
  • Nimm ein Video von einer Kamera auf und füge dann zusätzliche Inhalte oder Effekte hinzu
  • Mit <canvas> kannst du Bild-im-Bild-Effekte aus mehreren Videos erstellen
  • Kombiniere Videos und Bilder (aus Dateien, einer Kamera oder beidem) in einem <canvas>
  • Livestream-Video, das über eine Datei wiedergegeben wird
  • Aufgezeichnete Audio- oder Videonachrichten für ein Video oder eine Mailboxnachricht verwenden

Im Wesentlichen ermöglicht captureStream() JavaScript, Inhalte zu erstellen und in einen MediaStream einzufügen.

Das Kleingedruckte

  • Wenn Sie versuchen, captureStream() mit einem Medienelement zu verwenden, das den Inhaltsschutz über verschlüsselte Medienerweiterungen implementiert, wird eine Ausnahme ausgelöst.

  • Bei der Aufnahme mit einem <canvas> wird die maximale Framerate beim Aufruf von captureStream() festgelegt. Zum Beispiel bedeutet canvas.captureStream(10), dass der Canvas zwischen 0 und 10 fps (Bilder pro Sekunde) ausgegeben wird. Es wird nichts aufgenommen, wenn auf <canvas> nichts dargestellt wird. 10 fps werden auch dann aufgenommen, wenn <canvas> mit 30 fps dargestellt wird. In der captureStream-Spezifikation ist ein Fehler mit weiteren Informationen enthalten.

  • Die Abmessungen eines captureStream()-Videos entsprechen der <canvas>, für die es aufgerufen wurde.

Demos

Canvas

Video

Support

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

Weitere Informationen