Метод 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.