Przechwytywanie elementu MediaStream z obszaru roboczego, elementu wideo lub elementu audio

Sam Dutton

Metoda captureStream() umożliwia przechwytywanie MediaStream z elementu <canvas>, <audio> lub <video>.

Umożliwia to nagrywanie strumienia wideo lub audio z dowolnego z tych elementów, przesyłanie go na żywo za pomocą WebRTC lub łączenie z efektami lub innymi MediaStream w <canvas>. Inaczej mówiąc, captureStream() umożliwia MediaStream przekazywanie multimediów między elementami canvas, audio lub wideo albo do elementu RTCPeerConnection lub MediaRecorder.

W poniższym przykładzie (dostępnym w próbkach WebRTC) obraz MediaStream przechwycony z elementu canvas po lewej stronie jest przesyłany strumieniowo przez połączenie równorzędne WebRTC do elementu wideo po prawej stronie:

(Poniżej znajdziesz linki do kolejnych przykładów dotyczących płótna i filmów).

Kod captureStream() jest prosty.

W przypadku <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;

W przypadku <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;
};

Ale dlaczego?

Metoda captureStream() umożliwia nagrywanie lub transmisję na żywo z elementów canvas i multimedialnych:

  • Nagrywanie i transmitowanie rozgrywki z <canvas>
  • Nagrywanie filmu z kamery, a następnie dodawanie dodatkowych treści lub efektów
  • Tworzenie efektów obrazu w obrazie z wielu filmów za pomocą <canvas>
  • Łączenie filmów i obrazów (z plików lub kamery albo z obu tych źródeł) w <canvas>
  • Transmitowanie na żywo filmu odtwarzanego z pliku
  • Używanie nagranej wiadomości audio lub wideo w przypadku poczty wideo lub głosowej

W zasadzie captureStream() umożliwia JavaScriptowi tworzenie i „wstrzykiwanie” elementów do MediaStream.

Drobny druk

  • Próba użycia captureStream() z elementem multimedialnym, który implementuje ochronę treści za pomocą Encrypted Media Extensions, spowoduje zgłoszenie wyjątku.

  • Podczas rejestrowania obrazu z <canvas> maksymalna liczba klatek na sekundę jest ustawiana po wywołaniu funkcji captureStream(). Na przykład canvas.captureStream(10) oznacza, że płótno generuje od 0 do 10 klatek na sekundę. Jeśli na <canvas> nic nie jest rysowane, nic nie jest rejestrowane, a 10 klatek na sekundę jest rejestrowane nawet wtedy, gdy na <canvas> rysowane jest 30 klatek na sekundę. W specyfikacji captureStream zgłoszono błąd, który jest szerzej omawiany.

  • Wymiary filmu captureStream() są zgodne z wymiarami urządzenia <canvas>, na którym został on wyświetlony.

Przykłady

Canvas

Wideo

Pomoc

  • Canvas captureStream(): Firefox 43 lub nowszy; Chrome 50 lub nowszy z włączoną flagą chrome://flags/#enable-experimental-web-platform-features lub Chrome 52 lub nowszy domyślnie.
  • Wideo i audiocaptureStream(): Firefox 47; Chrome 52 i nowsze z włączoną opcją chrome://flags/#enable-experimental-web-platform-features lub Chrome 53 i nowsze domyślnie.

Więcej informacji