API de captura de pantalla

Conceptos y uso de la API de captura de pantalla

La API de captura de pantalla es relativamente simple de usar. Su único método es MediaDevices.getDisplayMedia(), cuyo trabajo es pedirle al usuario que seleccione una pantalla o parte de una pantalla para capturar en forma de MediaStream.

Para comenzar a capturar video desde la pantalla, llama a getDisplayMedia() en navigator.mediaDevices:

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

La Promesa devuelta por getDisplayMedia() se resuelve en un MediaStream que transmite los medios capturados.

Consulte el artículo Uso de la API de captura de pantalla para obtener una visión más detallada de cómo usar la API para capturar el contenido de la pantalla como una transmisión.

Interfaces

CaptureController

Proporciona métodos que se pueden usar para manipular aún más una sesión de captura separada de su inicio a través de MediaDevices.getDisplayMedia(). Un objeto CaptureController se asocia con una sesión de captura pasándolo a una llamada getDisplayMedia() como el valor de la propiedad controller del objeto de opciones.

Adiciones a la interfaz MediaDevices

MediaDevices.getDisplayMedia()

El método getDisplayMedia() se agrega a la interfaz MediaDevices. Similar a getUserMedia(), este método crea una promesa que se resuelve con un MediaStream que contiene el área de visualización seleccionada por el usuario, en un formato que coincida con las opciones especificadas.

Adiciones a los diccionarios existentes

La API de captura de pantalla agrega propiedades a los siguientes diccionarios definidos por otras especificaciones.

MediaTrackConstraints

MediaTrackConstraints.cursor

Un ConstrainDOMString que indica si el cursor debe incluirse o no en la transmisión de la superficie de visualización capturada, y si debe estar siempre visible o si solo debe estar visible mientras el ratón está en movimiento.

MediaTrackConstraints.displaySurface

Un ConstrainDOMString que indica qué tipo de superficie de visualización se va a capturar. El valor puede ser browser, monitor o window.

MediaTrackConstraints.logicalSurface

Indica si el video en la transmisión representa o no una superficie de visualización lógica (es decir, una que puede no ser completamente visible en la pantalla o puede estar completamente fuera de la pantalla). Un valor true indica que se va a capturar una superficie de visualización lógica.

MediaTrackConstraints.suppressLocalAudioPlayback

Controla si el audio que se reproduce en una pestaña continuará reproduciéndose desde los altavoces locales de un usuario cuando se capture la pestaña, o si se suprimirá. Un valor true indica que se suprimirá.

MediaTrackSettings

MediaTrackSettings.cursor

Una cadena que indica si la superficie de visualización que se está capturando incluye o no el cursor del mouse y, de ser así, si solo es visible mientras el mouse está en movimiento o si siempre está visible. El valor es always, motion o never.

MediaTrackSettings.displaySurface

Una cadena que indica qué tipo de superficie de visualización se está capturando actualmente. El valor puede ser browser, monitor o window.

MediaTrackSettings.logicalSurface

Un valor booleano, que es true si el video que se captura no corresponde directamente a una sola área de visualización en pantalla.

MediaTrackSettings.suppressLocalAudioPlayback

Un valor booleano, que es true si el audio que se captura no se reproduce en los altavoces locales del usuario.

MediaTrackSupportedConstraints

MediaTrackSupportedConstraints.cursor

Un valor booleano, que es true si el user agent y el dispositivo admiten la restricción MediaTrackConstraints.cursor.

MediaTrackSupportedConstraints.displaySurface

Un valor booleano, que es true si el entorno actual admite la restricción MediaTrackConstraints.displaySurface.

MediaTrackSupportedConstraints.logicalSurface

Un valor booleano, que es true si el entorno actual admite la restricción MediaTrackConstraints.logicalSurface.

MediaTrackSupportedConstraints.suppressLocalAudioPlayback

Un valor booleano, que es true si el entorno actual admite la restricción MediaTrackConstraints.suppressLocalAudioPlayback.

Validación de la política de permisos

Los User agent que admiten la Política de permisos (ya sea utilizando el HTTP Permissions-Policy o el atributo <iframe> allow) puede especificar el deseo de usar la API de captura de pantalla usando la directiva display-capture:

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

La lista de permitidos predeterminada es self, que permite que cualquier contenido dentro del mismo origen use Captura de pantalla.

Especificaciones

Compatibilidad con navegadores

api.MediaDevices.getDisplayMedia

api.CropTarget

api.RestrictionTarget

Véase también

• Uso de la API de captura de pantalla
• MediaDevices.getDisplayMedia()