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

Sam Dutton

Metoda captureStream() umożliwia przechwycenie wartości MediaStream z elementu <canvas>, <audio> lub <video>.

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

W tym demonstracyjnym filmie (dostępnym w próbkach WebRTC) MediaStream przechwycony z elementu kanwy po lewej stronie jest przesyłany strumieniowo przez połączenie peer-to-peer WebRTC do elementu wideo po prawej stronie:

(poniżej znajdziesz linki do kolejnych przykładów kanwy i filmów)

Kod captureStream() jest prosty.

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

Do witryn <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 kanwy i multimediów:

  • Nagrywanie i przesyłanie strumieniowe rozgrywki z urządzenia <canvas>
  • Nagraj film z aparatu, a potem dodaj dodatkowe treści lub efekty
  • Tworzenie efektów obrazu w obrazie z wielu filmów za pomocą <canvas>
  • Połącz filmy i obrazy (z plików lub z aparatu lub z obu tych źródeł) w <canvas>
  • Transmisja wideo z pliku
  • Korzystanie z nagrania audio lub wideo w celu utworzenia wiadomości wideo lub poczty głosowej

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

Drobny druk

  • Próba użycia captureStream() z elementem multimediów, który wdraża ochronę treści za pomocą zaszyfrowanych rozszerzeń multimediów, spowoduje wyjątek.

  • Podczas przechwytywania z <canvas> maksymalna liczba klatek na sekundę jest ustawiana podczas wywołania funkcji captureStream(). Na przykład canvas.captureStream(10) oznacza, że płótno wyświetla się z szybkością od 0 do 10 fps. Gdy na <canvas> nie jest malowane nic, nie jest rejestrowany żaden obraz. Gdy <canvas> jest malowany z szybkością 30 FPS, rejestrowany jest obraz z szybkością 10 FPS. W specyfikacji captureStream jest błąd, który wymaga dalszej dyskusji.

  • Wymiary filmu captureStream() muszą być zgodne z <canvas>, na którym został on wywołany.

Prezentacje

Obszar roboczy

Wideo

Pomoc

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

Więcej informacji