Захват MediaStream из холста, видео или аудио элемента

Сэм Даттон

Метод captureStream() позволяет захватывать MediaStream из элемента <canvas> , <audio> или <video> .

Это позволяет записывать видео- или аудиопоток из любого из этих элементов, транслировать его в реальном времени через WebRTC или комбинировать с эффектами или другими MediaStream в <canvas> . Другими словами, captureStream() позволяет MediaStream передавать мультимедиа туда и обратно между элементами холста, аудио или видео — или в RTCPeerConnection или MediaRecorder .

В следующей демонстрации (доступной в примерах WebRTC ) поток MediaStream , полученный из элемента холста слева, передается через одноранговое соединение WebRTC на видеоэлемент справа:

(Ниже приведены ссылки на дополнительные примеры холстов и видео.)

Код captureStream() прост.

Для <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;
};

Но почему?

Метод captureStream() позволяет записывать или транслировать потоки с холста и медиа-элементов:

  • Записывайте и транслируйте игровой процесс с <canvas>
  • Захватывайте видео с камеры, затем добавляйте дополнительный контент или эффекты.
  • Создавайте эффекты «картинка в картинке» из нескольких видео с помощью <canvas>
  • Объедините видео и изображения (из файлов, камеры или того и другого) в <canvas>
  • Видео в реальном времени, воспроизводимое из файла
  • Используйте записанное аудио- или видеосообщение для видео- или голосовой почты.

По сути, captureStream() позволяет JavaScript создавать и «вводить данные» в MediaStream .

Мелкий шрифт

  • Попытка использовать captureStream() с медиа-элементом, реализующим защиту контента с помощью расширений зашифрованного мультимедиа, приведет к возникновению исключения.

  • При захвате из <canvas> максимальная частота кадров устанавливается при вызове captureStream() . Например, canvas.captureStream(10) означает, что холст выводит от 0 до 10 кадров в секунду. Ничего не захватывается, когда на <canvas> ничего не рисуется, и захватывается 10 кадров в секунду, даже если <canvas> рисуется со скоростью 30 кадров в секунду. Существует ошибка, связанная с дополнительным обсуждением спецификации captureStream .

  • Размеры видео captureStream() соответствуют <canvas> из которого оно было вызвано.

Демо

Холст

видео

Поддерживать

  • Canvas captureStream() : Firefox 43 или выше; Chrome 50 и более поздних версий с включенными функциями chrome://flags/#enable-experimental-web-platform-features или Chrome 52 и более поздних версий по умолчанию.
  • captureStream() : Firefox 47; Chrome 52 и более поздних версий с включенными функциями chrome://flags/#enable-experimental-web-platform-features или Chrome 53 и более поздних версий по умолчанию.

Узнать больше