Screen Capture API

The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.

API Screen Capture concepts et utilisation

L'API Screen Capture est relativement simple à utiliser. Sa seule méthode est MediaDevices.getDisplayMedia() dont le but est de demander à l'utilisateur un écran ou une portion d'écran à capturer sous la forme de MediaStream.

Pour commencer à capturer une vidéo de l'écran, il faut appeler getDisplayMedia() dans une instance de navigator.mediaDevices

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

La Promise retournée par getDisplayMedia() résout un MediaStream qui diffuse le dédia capturé.

Voir l'article Utiliser l'API Screen Capture pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.

Ajouts à l'interface actuelle

L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une méthode à l'existante interface MediaDevices .

Interface MediaDevices

MediaDevices.getDisplayMedia()
La méthode getDisplayMedia() est ajoutée à l'interface MediaDevices. Similaire à getUserMedia(), cette méthode crée une promise qui  method creates a promise qui résout un MediaStream contenant  la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées.

Ajouts aux dictionnaires actuels

L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit par d'autres spécificités.

MediaTrackConstraints

MediaTrackConstraints.cursor
Un ConstrainDOMString  indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement.
MediaTrackConstraints.displaySurface
Un ConstrainDOMString indiquant quel type de surface d'affichage doit être capturé. La valeur peut être application, browser, monitor, ou window.
MediaTrackConstraints.logicalSurface
Indique si la vidéo dans le flux représente ou non une surface d'affichage logique (c'est-à-dire une surface qui peut ne pas être entièrement visible à l'écran ou peut-être complètement hors écran). La valeur true indique qu'une surface d'affichage logique doit être capturée.

MediaTrackSettings

MediaTrackSettings.cursor
Une chaîne de caractères indiquant si la surface d'affichage en cours de capture comprend ou non le curseur de la souris et, dans l'affirmative, si elle est visible uniquement lorsque la souris est en mouvement ou si elle est toujours visible. La valeur peut être always, motion, ou never.
MediaTrackSettings.displaySurface
Une chaîne indiquant le type de surface d'affichage en cours de capture. La valeur peut êtreapplication, browser, monitor, ou window.
MediaTrackSettings.logicalSurface
Valeur booléenne valant true si la vidéo en cours de capture ne correspond pas directement à une seule zone d'affichage à l'écran.

MediaTrackSupportedConstraints

MediaTrackSupportedConstraints.cursor
Valeur booléenne valant true si l'environnement actuel supporte la contrainte MediaTrackConstraints.cursor.
MediaTrackSupportedConstraints.displaySurface
Valeur booléenne valant true si l'environnement actuel supporte la contrainte MediaTrackConstraints.displaySurface.
MediaTrackSupportedConstraints.logicalSurface
Valeur booléenne valant true si l'environnement actuel supporte la contrainte MediaTrackConstraints.logicalSurface.

Dictionnaires

Le dictionnaire suivant est difinit par l'API Screen Capture.

CursorCaptureConstraint
Un type de chaîne énuméré utilisé pour fournir la valeur de la propriété cursor aux paramètres et aux contraintes. La valeur peut être always, motion, ou never.
DisplayCaptureSurfaceType
Un type de chaîne énuméré utilisé pour identifier le type de surface d'affichage à capturer. ce type est utilisé pour la propriété displaySurface dans les objets contraints et paramètres, et a plusieurs valeurs possibles application, browser, monitor, and window.

Validation de Feature Policy

User agents qui supportent  Feature Policy (soit en utilisant les entetes HTTP Feature-Policy ou l'attribut <iframe>allow peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle display-capture:

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

La liste d’autorisations par défaut est self, ce qui permet à tout contenu du document d’utiliser Screen Capture.

Voir Utiliser Feature Policy pour une explication plus en détail sur comment est utilisé Feature Policy.

Caracteristiques

Caracteristiques Statut Commentaire
Screen Capture Version de travail Définition Initiale

Compatibilité des Navigateurs

 
Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
getDisplayMedia()Chrome Support complet 72
Support complet 72
Aucun support 70 — 72
Notes Désactivée
Notes Available as a member of Navigator instead of MediaDevices in Chrome 70 and 71.
Désactivée From version 70 until version 72 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Support complet 17
Notes
Support complet 17
Notes
Notes Available as a member of Navigator instead of MediaDevices.
Firefox Support complet 66
Support complet 66
Aucun support 33 — 66
Notes
Notes Since Firefox 33 you can capture screen data using getUserMedia(), with a video constraint called mediaSource. Prior to 52 it relied on a client-configurable whitelist.
IE Aucun support NonOpera ? Safari Aucun support NonWebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes API is available, but will always fail with NotAllowedError.
Chrome Android Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes API is available, but will always fail with NotAllowedError.
Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
Audio capture supportChrome Support complet 74
Notes
Support complet 74
Notes
Notes On Windows and Chrome OS the entire system audio can be captured, but on Linux and Mac only the audio of a tab can be captured.
Edge ? Firefox Aucun support NonIE Aucun support NonOpera ? Safari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi