Screen Sharing

What is Screen Sharing?

Screen sharing is a feature that enables users to broadcast the contents of their display, a specific window, or application to other participants in a video call. In WebRTC, screen sharing is implemented using the getDisplayMedia() API, which provides secure, plugin-free screen capture functionality directly in the browser.

Unlike camera video, screen sharing typically involves higher resolutions, lower frame rates, and different optimization strategies to ensure text and UI elements remain crisp and readable while managing bandwidth efficiently.

How Screen Sharing Works

The getDisplayMedia API

The navigator.mediaDevices.getDisplayMedia() method is the standard way to implement screen sharing in WebRTC applications:

const displayStream = await navigator.mediaDevices.getDisplayMedia({
  video: {
    displaySurface: 'monitor', // or 'window', 'browser'
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 10, max: 15 }
  },
  audio: true // Capture system audio if supported
});

User Selection Dialog

When getDisplayMedia() is called, the browser presents a dialog where users can choose what to share:

Entire Screen: Share all displays or a specific monitor
Application Window: Share a single application window
Browser Tab: Share a specific browser tab with audio

This user-controlled selection ensures privacy and prevents unauthorized screen capture.

Media Constraints and Optimization

Recommended Settings

For optimal screen sharing quality and performance in 2025:

Resolution: 1080p (1920x1080) is the standard for high-quality screen sharing. Higher resolutions like 4K can be used but consume significantly more bandwidth
Frame Rate: 10-15 FPS is typically sufficient for most screen sharing scenarios. Unlike camera video, screen content doesn't require 30 FPS unless sharing video playback or animations
Bitrate: 1.5-3 Mbps for 1080p screen sharing is common, though this varies based on content complexity

Codec Selection

Different codecs perform better for screen sharing versus camera video:

VP9: Excellent for screen sharing, especially for static content with text. Provides better compression for screen content than VP8
H.264: Best compatibility across platforms. Good quality with hardware acceleration. Widely supported fallback option
AV1: Superior quality and compression for screen content in Chrome 135+, but higher CPU usage without hardware support
H.265 (HEVC): Excellent quality for text and UI elements with Chrome 136+ support, but limited browser compatibility

Testing shows that for screen sharing with text-heavy content, H.264 provides the best balance of quality and CPU efficiency, while VP9 or AV1 offer better quality at lower bandwidths when CPU resources allow.

Content-Aware Optimization

Screen sharing should adapt based on content type:

Static Content (documents, slides): Lower frame rates (5-10 FPS), higher bitrate for clarity
Dynamic Content (video playback): Higher frame rates (30 FPS), requires significantly more bandwidth
Code/Text Editors: Prioritize bitrate over frame rate to maintain text readability

Audio Capture

System audio capture allows sharing both screen visuals and the audio from applications (e.g., video playback, music):

Browser Support: Chrome, Edge, and Firefox support system audio capture on most platforms
User Permission: Users must explicitly enable audio sharing in the browser dialog
Mixing: System audio and microphone audio can be combined or sent as separate tracks

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: {
    echoCancellation: false,
    noiseSuppression: false,
    sampleRate: 48000
  }
});

Security and Privacy

HTTPS Requirement

Screen sharing via getDisplayMedia() is only available on HTTPS connections or localhost. This prevents unauthorized capture from insecure origins.

User Control

WebRTC enforces several privacy protections:

Explicit Permission: Users must manually select what to share each time
Visual Indicators: Browsers display persistent indicators (often in the address bar or system tray) while screen sharing is active
Easy Termination: Users can stop sharing at any time through browser controls
No Silent Capture: Unlike some native applications, web-based screen sharing cannot capture screens without user awareness

Performance Considerations

Bandwidth Management

Screen sharing typically requires 1.5-3 Mbps for 1080p at 10 FPS. Without proper constraints, high-resolution displays (4K, 5K) can quickly overwhelm bandwidth:

Always set explicit resolution and frame rate limits
Monitor network conditions using getStats() API
Implement adaptive bitrate to reduce quality when bandwidth is limited
Consider offering quality presets (Low: 720p@5fps, Medium: 1080p@10fps, High: 1080p@15fps)

CPU Usage

Screen capture and encoding can be CPU-intensive, especially at high resolutions:

Hardware Acceleration: Use H.264 or H.265 with hardware encoders when available (Windows typically has better hardware support)
Simulcast: Send multiple quality layers so viewers with different bandwidth can receive appropriate streams
Content Hints: Use contentHint = 'detail' for screen tracks to optimize encoder settings for text clarity

const videoTrack = displayStream.getVideoTracks()[0];
videoTrack.contentHint = 'detail'; // Optimize for screen content

Browser Compatibility

As of 2025, screen sharing is well-supported across modern browsers:

Chrome/Edge: Full support including system audio capture
Firefox: Full support with excellent performance
Safari: Supported from Safari 13+ with some limitations on system audio
Mobile Browsers: Limited support. Android Chrome supports screen capture, iOS Safari has restrictions

Common Use Cases

Remote Presentations: Share slides, documents, or live demonstrations
Collaborative Work: Co-edit documents, review designs, or pair programming
Technical Support: Help users troubleshoot issues by viewing their screen
Education: Teachers share educational content, tutorials, or software demonstrations
Content Creation: Stream gaming, creative software, or video production workflows

Best Practices

Set Explicit Constraints: Always specify resolution and frame rate limits to prevent resource exhaustion
Implement Quality Controls: Allow users to adjust screen sharing quality based on their network conditions
Handle Track Ending: Listen for the 'ended' event on tracks to detect when users stop sharing via browser controls
Optimize for Content Type: Adjust settings based on whether users are sharing static content or video
Test Across Platforms: Screen sharing performance varies significantly across operating systems and browsers
Provide Clear UI: Show visual feedback when screen sharing is active and provide easy stop controls
Monitor Performance: Use getStats() to track encoding time, frame drops, and bandwidth usage