HTMLMediaElement: метод captureStream()

Метод captureStream() интерфейса HTMLMediaElement возвращает объект MediaStream, который осуществляет потоковую передачу реального захвата содержимого, отображаемого в элементе медиа.

Это может использоваться, например, в качестве источника для WebRTC RTCPeerConnection.

Нет.

Объект MediaStream, который может использоваться в качестве источника аудио и/или видеоданных для других кодов обработки медиа или как источник для WebRTC.

В этом примере устанавливается обработчик событий, так что нажатие кнопки запускает захват содержимого элемента медиа с идентификатором "playback" в объект MediaStream. Затем этот поток может использоваться для других целей, например, в качестве источника потоковой передачи через WebRTC, чтобы позволить совместное использование предварительно записанных видео с другим человеком во время видеозвонка.

document.querySelector(".playAndRecord").addEventListener("click", () => {
  const playbackElement = document.getElementById("playback");
  const captureStream = playbackElement.captureStream();
  playbackElement.play();
});

См. Запись элемента медиа для более подробного примера и объяснения.

До Firefox 51, вы не могли использовать captureStream() на элементе медиа, источником которого является, в свою очередь, MediaStream (например, элемент <video>, отображающий поток, полученный через RTCPeerConnection). Начиная с Firefox 51, это работает. Это означает, что вы можете захватить поток из элемента видео и использовать MediaRecorder для его записи. Подробнее см. баг Firefox 1259788.

Однако, captureStream() все еще имеет префикс mozCaptureStream() в Firefox по уважительной причине: в текущей реализации есть некоторые особенности, на которые стоит обратить внимание:

• В настоящее время реализация Firefox работает так, как описано в спецификации, только когда источником элемента медиа является, в свою очередь, MediaStream.
• Если источником элемента медиа не является MediaStream, выходной поток этого метода не совместим со спецификацией, и если вы измените источник после запуска захвата, выходной поток захвата не может принять новые данные источника из-за этой несовместимости, поэтому новые MediaStreamTrack с нового источника MediaStream не добавляются в захваченный поток, что приводит к выходу, который не захватывает обновленный источник.
• Возврат источника к MediaStream добавляет обратно треки в поток, и он работает как ожидается.
• Вызов mozCaptureMediaStream() на элементе с MediaStream источником возвращает поток, который содержит только треки, пока элемент воспроизводит MediaStream.
• Если вы вызываете mozCaptureMediaStream() на элементе медиа без источника медиа, режим совместимости будет основан на первом добавленном источнике; например, если это MediaStream, то захват потока будет работать только с источниками MediaStream с этого момента.
• Это особое поведение будет удалено, как только поддержка источника, отличного от MediaStream будет соответствовать спецификации, и метод будет устранён от префикса. Подробнее см. баг Firefox 1259788.

• Запись элемента медиа
• API записи MediaStream
• HTMLCanvasElement.captureStream()
• MediaStream
• API WebRTC