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:

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

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

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

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.

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

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.

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

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.

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

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

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

MediaTrackSupportedConstraints

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

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

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

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:

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

Enable JavaScript to view this browser compatibility table.

api.CropTarget

Enable JavaScript to view this browser compatibility table.

api.RestrictionTarget

Enable JavaScript to view this browser compatibility table.

Véase también

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