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

Sam Dutton

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

Dzięki temu można rejestrować strumień wideo lub audio z dowolnego z tych elementów, transmitować na żywo przez WebRTC lub łączyć go z efektami i innymi elementami MediaStream w interfejsie <canvas>. Inaczej mówiąc, funkcja captureStream() umożliwia MediaStream przekazywanie multimediów tam i z powrotem między obszarami roboczymi, elementami audio i wideo, a także między elementami RTCPeerConnection i MediaRecorder.

W tej prezentacji (dostępnej w przykładach WebRTC) obiekt 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 innych przykładów materiałów na płótnie i filmów).

Kod captureStream() jest prosty.

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

<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 obszarów roboczych i elementów multimedialnych:

  • Nagrywaj i przesyłaj strumieniowo rozgrywkę z urządzenia <canvas>
  • Nagraj film z kamery, a potem dodaj więcej treści lub efektów
  • Twórz efekty obrazu w obrazie z wielu filmów za pomocą <canvas>
  • Połącz filmy i obrazy (z plików, aparatu lub obu tych elementów) w ramach <canvas>
  • Strumieniowa transmisja wideo na żywo odtwarzana z pliku
  • Używanie nagranej wiadomości audio lub wideo jako wiadomości wideo lub głosowej

Zasadniczo captureStream() umożliwia JavaScriptowi tworzenie i „wstawianie elementów” do MediaStream.

Drobnym drukiem

  • Próba użycia atrybutu captureStream() z elementem multimedialnym implementującą ochronę treści za pomocą rozszerzeń zaszyfrowanych multimediów spowoduje zgłoszenie wyjątku.

  • W przypadku przechwytywania z <canvas> maksymalna liczba klatek jest ustawiana przy wywołaniu metody captureStream(). Na przykład canvas.captureStream(10) oznacza, że obszar roboczy generuje od 0 do 10 kl./s. Nic nie zostanie zarejestrowane, jeśli na urządzeniu <canvas> nic nie zostanie malowane, a obraz 10 klatek na sekundę zostanie zarejestrowany nawet wtedy, gdy <canvas> zostanie wyrenderowany z szybkością 30 klatek na sekundę. W specyfikacji captureStream wystąpił błąd, który wymaga więcej uwagi.

  • Wymiary filmu captureStream() odpowiadają wymiarom <canvas>, przy użyciu którego został wywołany.

Przykłady

Obszar roboczy

Wideo

Pomoc

  • Canvas captureStream(): Firefox w wersji 43 lub nowszej, Chrome w wersji 50 lub nowszej z włączoną domyślnie opcją chrome://flags/#enable-experimental-web-platform-features lub Chrome w wersji 52 lub nowszej.
  • Wideo i dźwięk: captureStream() Firefox 47; Chrome 52 i nowsze wersje z włączoną domyślnie opcją chrome://flags/#enable-experimental-web-platform-features lub Chrome w wersji 53 lub nowszej.

Więcej informacji