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

Сэм Даттон

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

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

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