API захвата экрана

API захвата экрана добавляет возможности к существующему API захвата медиа и потоков, позволяя пользователю выбрать экран или часть экрана (например, окно) для захвата в виде медиапотока. Этот поток затем может быть записан или передан другим по сети.

API захвата экрана относительно прост в использовании. Его единственный метод — MediaDevices.getDisplayMedia(), задача которого — попросить пользователя выбрать экран или часть экрана для захвата в виде MediaStream.

Для начала захвата видео с экрана вызывается getDisplayMedia() на navigator.mediaDevices:

captureStream =
  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

Возвращаемое getDisplayMedia() Promise разрешается в MediaStream, который транслирует захваченное медиа.

Для более глубокого изучения использования API для захвата содержимого экрана в виде потока ознакомьтесь со статьёй Использование API захвата экрана.

CaptureController

Предоставляет методы для дальнейшей обработки сессии захвата независимо от её инициирования с помощью MediaDevices.getDisplayMedia(). Объект CaptureController ассоциируется с сессией захвата путём передачи его в вызов getDisplayMedia() в качестве значения свойства controller объекта опций.

MediaDevices.getDisplayMedia()

Метод getDisplayMedia() добавлен к интерфейсу MediaDevices. Аналогично getUserMedia(), этот метод создаёт промис, который разрешается в MediaStream, содержащий область экрана, выбранную пользователем, в формате, соответствующем заданным опциям.

API захвата экрана добавляет свойства к следующим словарям, определённым другими спецификациями.

MediaTrackConstraints.displaySurface

Значение ConstrainDOMString, указывающее на тип поверхности отображения для захвата. Значение — одно из browser, monitor, или window.

MediaTrackConstraints.logicalSurface

Указывает, представляет ли видео в потоке логическую поверхность отображения (то есть такую, которая может быть не полностью видна на экране или может быть полностью вне экрана). Значение true указывает, что должна быть захвачена логическая поверхность отображения.

MediaTrackConstraints.suppressLocalAudioPlayback

Управляет тем, будет ли аудио, воспроизводимое в вкладке, продолжаться через локальные динамики пользователя при захвате вкладки, или будет подавлено. Значение true указывает на то, что оно будет подавлено.

MediaTrackSettings.cursor

Строка, указывающая, включает ли захватываемая в данный момент поверхность отображения курсор мыши, и если да, то виден ли он только во время движения мыши или всегда. Значение — одно из always, motion, или never.

MediaTrackSettings.displaySurface

Строка, указывающая тип поверхности отображения, который в данный момент захватывается. Значение — одно из browser, monitor, или window.

MediaTrackSettings.logicalSurface

Булево значение, которое равно true если захватываемое видео не соответствует напрямую отдельной области отображения на экране.

MediaTrackSettings.suppressLocalAudioPlayback

Булево значение, которое равно true если захватываемое аудио не воспроизводится через локальные динамики пользователя.

MediaTrackSupportedConstraints.displaySurface

Булево значение, которое равно true если текущая среда поддерживает ограничение MediaTrackConstraints.displaySurface.

MediaTrackSupportedConstraints.logicalSurface

Булево значение, которое равно true если текущая среда поддерживает ограничение MediaTrackConstraints.logicalSurface.

MediaTrackSupportedConstraints.suppressLocalAudioPlayback

Булево значение, которое равно true если текущая среда поддерживает ограничение MediaTrackConstraints.suppressLocalAudioPlayback.

Пользовательские агенты, поддерживающие Политику разрешений (либо с помощью HTTP-заголовка Permissions-Policy или атрибута <iframe> allow) могут указать желание использовать API захвата экрана с помощью директивы display-capture:

<iframe allow="display-capture" src="/some-other-document.html">…</iframe>

Список разрешенных по умолчанию — self, что позволяет любому контенту в той же области использовать API захвата экрана.

• Использование API захвата экрана
• MediaDevices.getDisplayMedia()