Метод 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() с медиа-элементом, реализующим защиту контента с помощью Encrypted Media Extensions, вызовет исключение.
  • При захвате с <canvas> максимальная частота кадров устанавливается при вызове captureStream(). Например, canvas.captureStream(10) означает, что холст выводит от 0 до 10 кадров в секунду. Ничего не захватывается, когда ничего не закрашивается на <canvas>, и захватывается 10 кадров в секунду, даже если <canvas> закрашивается со скоростью 30 кадров в секунду. В спецификации captureStream есть ошибка с дополнительным обсуждением.
  • Размеры видео captureStream() соответствуют размеру <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 и выше по умолчанию.

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

Первоначально опубликовано на сайте developers.google.com.