How to Add Screen Sharing to Your Web App

The Business Value of Screen Sharing

Screen sharing isn't just a nice-to-have feature anymore—it's becoming essential for modern web applications. Whether you're building collaboration tools, remote support systems, or virtual classrooms, adding screen sharing capabilities can dramatically increase user engagement and solve real problems for your customers.

The Technical Landscape

What's Actually Happening During Screen Sharing?

At its core, screen sharing involves:

• Capturing content from a user's screen
• Encoding that content into a streamable format
• Transmitting it over the network
• Decoding and displaying it on the recipient's screen

All of this happens in near real-time, which is why it's both impressive and technically challenging.

Implementation Approaches

1. WebRTC: The Gold Standard

WebRTC (Web Real-Time Communication) is the foundation of most modern screen sharing solutions. It's built into browsers and provides the necessary APIs for peer-to-peer communication.

Basic WebRTC Screen Sharing Implementation

async function startScreenSharing() {
  try {
    // Request screen capture from the user
    const screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: "always"
      },
      audio: false
    });
    
    // Get the video element where we'll display the stream
    const videoElement = document.getElementById('screenSharePreview');
    videoElement.srcObject = screenStream;
    
    // Listen for when the user stops sharing
    screenStream.getVideoTracks()[0].onended = () => {
      console.log('User stopped sharing screen');
      videoElement.srcObject = null;
    };
    
    return screenStream;
  } catch (err) {
    console.error('Error sharing screen:', err);
    throw err;
  }
}

2. WebRTC + Signaling Server: For Multi-User Scenarios

For screen sharing between multiple users, you'll need a signaling server to coordinate the connection.

// On the sender side
async function shareScreenWithPeer(peerConnection) {
  const screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  });
  
  // Add the screen track to the peer connection
  screenStream.getTracks().forEach(track => {
    peerConnection.addTrack(track, screenStream);
  });
  
  // Create and send an offer to the remote peer (via your signaling server)
  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);
  
  // Send the offer to the remote peer via your signaling server
  signalingServer.send(JSON.stringify({
    type: 'offer',
    sdp: peerConnection.localDescription
  }));
}

// On the receiver side
signalingServer.onmessage = async function(event) {
  const message = JSON.parse(event.data);
  
  if (message.type === 'offer') {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp));
    
    // Create and send an answer
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    
    signalingServer.send(JSON.stringify({
      type: 'answer',
      sdp: peerConnection.localDescription
    }));
  }
};

// When remote tracks arrive, display them
peerConnection.ontrack = function(event) {
  const remoteVideo = document.getElementById('remoteScreen');
  if (remoteVideo.srcObject !== event.streams[0]) {
    remoteVideo.srcObject = event.streams[0];
  }
};

Practical Implementation Strategy

Option 1: Use a Ready-Made WebRTC Service

Unless screen sharing is your core business, consider using established WebRTC services:

• Twilio Video - Enterprise-grade with excellent documentation
• Agora.io - Great for global reach with data centers worldwide
• Daily.co - Developer-friendly with simple API

Example: Using Twilio Video

// First, install the Twilio SDK
// npm install twilio-video

import Video from 'twilio-video';

// Get your token from your server
async function startScreenSharing(roomName, token) {
  try {
    // Capture the screen
    const screenTrack = await Video.createLocalVideoTrack({
      name: 'screen', // This helps identify the track later
      kind: 'video',
      video: {
        getDisplayMedia: true // Tell Twilio to use getDisplayMedia
      }
    });
    
    // Connect to the room
    const room = await Video.connect(token, {
      name: roomName,
      tracks: [screenTrack],
      video: false,
      audio: false
    });
    
    console.log('Connected to room:', room.name);
    
    // Handle the local screen preview
    const localScreenContainer = document.getElementById('local-screen');
    const screenVideoElement = screenTrack.attach();
    localScreenContainer.appendChild(screenVideoElement);
    
    // When done, you can disconnect and clean up
    return {
      room,
      screenTrack,
      cleanup: () => {
        screenTrack.stop();
        room.disconnect();
        screenVideoElement.remove();
      }
    };
  } catch (error) {
    console.error('Error sharing screen:', error);
    throw error;
  }
}

Option 2: Build Your Own WebRTC Infrastructure

If you need complete control or have specific requirements:

• Signaling Server: Build with WebSockets using Node.js/Socket.io
• STUN/TURN Servers: For NAT traversal (consider services like coturn)
• Media Server: For larger meetings (Janus, Kurento, or MediaSoup)

Basic Signaling Server with Node.js + Socket.io

// Server-side code
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

// Serve static files
app.use(express.static('public'));

// Store active rooms
const rooms = {};

io.on('connection', (socket) => {
  console.log('User connected:', socket.id);
  
  // Join a room
  socket.on('join-room', (roomId, userId) => {
    socket.join(roomId);
    
    if (!rooms[roomId]) {
      rooms[roomId] = { users: [] };
    }
    
    rooms[roomId].users.push(userId);
    
    // Notify others in the room
    socket.to(roomId).emit('user-connected', userId);
    
    // Handle WebRTC signaling
    socket.on('offer', (offer, recipientId) => {
      socket.to(roomId).emit('offer', offer, socket.id);
    });
    
    socket.on('answer', (answer, recipientId) => {
      socket.to(roomId).emit('answer', answer, socket.id);
    });
    
    socket.on('ice-candidate', (candidate, recipientId) => {
      socket.to(roomId).emit('ice-candidate', candidate, socket.id);
    });
    
    // Handle disconnection
    socket.on('disconnect', () => {
      if (rooms[roomId]) {
        rooms[roomId].users = rooms[roomId].users.filter(id => id !== userId);
        socket.to(roomId).emit('user-disconnected', userId);
        
        // Clean up empty rooms
        if (rooms[roomId].users.length === 0) {
          delete rooms[roomId];
        }
      }
    });
  });
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

UX Considerations for Screen Sharing

Key Elements for a Great Screen Sharing Experience

• Clear permissions UI: Explain what you're asking for and why
• Display options: Let users choose between entire screen, application window, or tab
• Control indicators: Always show when sharing is active (red border or icon)
• Quality controls: Allow resolution/frame rate adjustments for users with bandwidth constraints
• One-click stop sharing: Make it easy to end the session

Common Technical Challenges

1. Browser Compatibility

// Check if screen sharing is supported
function isScreenSharingSupported() {
  return navigator.mediaDevices && 
         'getDisplayMedia' in navigator.mediaDevices;
}

// Provide a fallback message if not supported
if (!isScreenSharingSupported()) {
  document.getElementById('shareButton').disabled = true;
  document.getElementById('fallbackMessage').textContent = 
    'Your browser doesn\'t support screen sharing. Please try Chrome, Edge, or Firefox.';
}

2. Network and Bandwidth Issues

// Configure WebRTC with bandwidth constraints
const offerOptions = {
  offerToReceiveAudio: false,
  offerToReceiveVideo: true
};

// Add bandwidth limitation for screen sharing
peerConnection.createOffer(offerOptions)
  .then(offer => {
    // Limit bandwidth to 1500kbps for screen sharing
    offer.sdp = offer.sdp.replace(
      /(m=video.*\r\n)/g,
      '$1b=AS:1500\r\n'
    );
    return peerConnection.setLocalDescription(offer);
  })
  .then(() => {
    // Send offer via signaling server
    signalingServer.send(JSON.stringify({
      type: 'offer',
      sdp: peerConnection.localDescription
    }));
  });

// Monitor connection quality
peerConnection.addEventListener('connectionstatechange', event => {
  if (peerConnection.connectionState === 'disconnected' ||
      peerConnection.connectionState === 'failed') {
    showReconnectionUI();
  }
});

3. Security Considerations

// Only allow screen sharing in secure contexts
if (window.isSecureContext) {
  document.getElementById('shareButton').addEventListener('click', startScreenSharing);
} else {
  document.getElementById('shareButton').disabled = true;
  console.error('Screen sharing requires HTTPS!');
  showSecurityWarning('Screen sharing is only available on secure connections (HTTPS).');
}

// Add warning about sensitive content
function startScreenSharing() {
  // Display a reminder about potentially sharing sensitive information
  if (confirm('Remember: You might share sensitive information visible on your screen. Continue?')) {
    // Proceed with screen sharing
    initiateScreenShare();
  }
}

Implementation Timeline and Resources

Typical Timeline for Adding Screen Sharing

• 1-2 days: Research and decide on approach (build vs. service)
• 2-3 days: Basic implementation with a service like Twilio
• 1-2 weeks: Custom WebRTC implementation with signaling server
• 1 week: UI/UX refinements and testing
• 1 week: Cross-browser testing and optimizations

Essential Resources

• MDN Documentation on Screen Capture API
• WebRTC samples at webrtc.github.io/samples
• Twilio's Video documentation if using their service

Testing Your Screen Sharing Implementation

Key Testing Scenarios

// Simulate different network conditions for testing
async function testBandwidthScenarios() {
  // Test cases to run
  const scenarios = [
    { name: 'Good Connection', downloadThroughput: 5000000, uploadThroughput: 1000000 },
    { name: 'Poor Connection', downloadThroughput: 500000, uploadThroughput: 100000 },
    { name: 'Very Poor Connection', downloadThroughput: 100000, uploadThroughput: 50000 }
  ];
  
  for (const scenario of scenarios) {
    console.log(`Testing scenario: ${scenario.name}`);
    
    // Chrome only: Set network conditions using Chrome DevTools Protocol
    if (navigator.webkitGetUserMedia) {
      const conditions = {
        offline: false,
        downloadThroughput: scenario.downloadThroughput,
        uploadThroughput: scenario.uploadThroughput,
        latency: 20
      };
      
      // This requires Chrome DevTools Protocol connection
      // For automated testing, you'd use tools like Puppeteer
      console.log(`Set network conditions to: `, conditions);
    }
    
    // Run your screen sharing test
    await testScreenSharing();
    
    // Allow time to observe the results
    await new Promise(resolve => setTimeout(resolve, 30000));
  }
}

async function testScreenSharing() {
  // Your screen sharing implementation
  const stream = await startScreenSharing();
  
  // Measure frame rate
  const videoTrack = stream.getVideoTracks()[0];
  const videoSettings = videoTrack.getSettings();
  console.log('Video resolution:', videoSettings.width, 'x', videoSettings.height);
  console.log('Frame rate:', videoSettings.frameRate);
  
  // You could also implement more advanced metrics collection here
}

Making the Business Decision

Build vs. Buy Decision Matrix

• Choose a service (Twilio, Agora, Daily) when:
  • You need to move quickly to market
  • You don't have WebRTC experts on your team
  • You want predictable pricing and reliability
  • Screen sharing is a supporting feature, not your core product
• Build your own when:
  • You have very specific requirements not met by existing services
  • You need complete control over the data flow
  • You have WebRTC expertise in-house
  • You're building a product where screen sharing is a core differentiator
  • Your scale makes service costs prohibitive

Wrapping Up

Adding screen sharing to your web app is now within reach for any development team. Whether you choose to leverage a service like Twilio or build your own WebRTC infrastructure, the core technologies are mature and well-documented.

For most business cases, starting with a service will get you to market faster with less risk. As your needs evolve and your usage grows, you can always revisit the build vs. buy decision with real-world data about how your users engage with the feature.

Remember that excellent screen sharing isn't just about the technology—it's about creating an intuitive experience that solves real problems for your users. Focus on clear UI, performance optimization, and graceful fallbacks, and your users will thank you with increased engagement and loyalty.