GetAllScreensMedia demo

Disclaimer: this page was updated to showcase the getAllScreensMedia (from ChromeOS 114). Before ChromeOS114 we recommended to use getDisplayMediaSet, which is disabled from ChromeOS 114 on.

This demo shows the capabilities of the getAllScreensMedia API. When clicking on the Start capturing button, all attached screens will be captured and the web app listens to screen changes (add / remove). If a change happens, a new capture with the new set of screens will be requested and shown on the UI. Press the Start capturing button after reading the installation guide.

The code for this demo can be found here.

Capturing multiple screens (basic functionality from ChromeOS 105; added usage indicators in ChromeOS 107)

Multiple surfaces can be captured at once by using the new getAllScreensMedia API. Currently, getAllScreensMedia can only be used in combination with the autoSelectAllScreens attribute that allows automatic capturing of all attached screens.

Example: const screens = await navigator.mediaDevices.getAllScreensMedia();

Constraints can be applied after the streams are retrieved by using the applyConstraints function of the video track stored in each stream. Further information on constraints can be found here.

Note that the getAllScreensMedia API is only available if the GetDisplayMediaSetSelectAllScreensAllowedForUrls policy is set to the origin of the page that is using the API (e.g. for this page the value must be https://honey-quartz-fukuiraptor.glitch.me/). If the policy is not defined, the request will be rejected.

Screen metadata (from ChromeOS 107)

MediaStreamTracks acquired with getAllScreensMedia expose a screenDetailed attribute that provides metadata about the screens (c.f. specification). The window placement API can further be used to detect screen changes, like

Example (metadata for the attached screen): const screenMetadata = screens[0].getVideoTracks()[0].screenDetailed();

Demo