HTMLCanvasElement: метод captureStream()

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

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

Синтаксис

captureStream()
captureStream(frameRate)

Параметры

frameRate Необязательно: Значение с плавающей точкой двойной точности, указывающее частоту захвата каждого кадра. Если не задано, каждый раз, когда холст изменяется, будет захвачен новый кадр; если задано значение 0, кадры не будут автоматически захватываться; вместо этого они будут захватываться только при вызове метода requestFrame() возвращённого объекта.

Возвращаемое значение

Ссылка на объект MediaStream, содержащий один CanvasCaptureMediaStreamTrack.

Исключения

NotSupportedError DOMException: Выбрасывается, если значение frameRate отрицательное.
SecurityError DOMException: Растровое изображение холста не является чистого происхождения; по крайней мере, часть его содержимого загружена с другого сайта, отличного от того, откуда был загружен сам документ.

Пример

// Find the canvas element to capture
const canvasElt = document.querySelector("canvas");

// Get the stream
const stream = canvasElt.captureStream(25); // 25 FPS

// Do things to the stream
// E.g. Send it to another computer using an RTCPeerConnection
//      pc is an RTCPeerConnection created elsewhere
stream.getTracks().forEach((track) => pc.addTrack(track, stream));

Спецификации

Спецификация
Захват медиа с помощью элементов DOM # dom-htmlcanvaselement-capturestream

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`captureStream`	51	79	43	36	11	51	43	36	11	5.0	51

См. также

HTMLMediaElement.captureStream(), который позволяет захватить поток из элемента медиа.
MediaStream
API захвата медиа и потоков

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream