getDisplayMedia (formally navigator.mediaDevices.getDisplayMedia) is the WebRTC API for capturing the contents of a user’s screen, application window, or browser tab. It is the companion to getUserMedia, which captures camera and microphone input.
How getDisplayMedia works
The API prompts the user to select what to share:
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true // tab audio capture, Chrome/Edge only
});
The user can choose between:
- Entire screen – captures everything on a display
- Application window – captures a specific application
- Browser tab – captures a single tab (with optional audio)
The returned MediaStream can be sent via a PeerConnection alongside or instead of a camera track.
Screen sharing characteristics
Screen content has different properties than camera video:
- High resolution – typically 1080p or higher to keep text readable
- Low frame rate – 1-15 fps since screen content changes less frequently, and the high resolution eats away from the CPU and network resources
- Text-heavy content – codecs like AV1 hse screen content coding tools that handle sharp edges and text well
- Variable bitrate – can spike during animations or video playback on screen
Related APIs
- getUserMedia – captures camera and microphone
- enumerateDevices – lists available media devices
- Screencasting – the broader concept of screen sharing in WebRTC
