The Complete Toolkit For Adding Screen Recording To Your Web App

// Request screen capture access with comprehensive options
async function startCapture() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: "always", // Can be "always", "never", or "motion"
        displaySurface: "monitor", // "monitor", "window", "application", or "browser"
        logicalSurface: true,
        resolution: {
          max: { width: 3840, height: 2160 }, // 4K resolution
          ideal: { width: 1920, height: 1080 } // Fallback to 1080p
        },
        frameRate: {
          ideal: 60,
          max: 120
        }
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        sampleRate: 48000,
        channelCount: 2
      },
      systemAudio: "include" // Capture system audio (requires appropriate permissions)
    });

    // Set up recording with MediaRecorder API
    const options = {
      mimeType: 'video/webm;codecs=vp9,opus', // Prefer VP9 for quality
      videoBitsPerSecond: 8000000 // 8 Mbps for high-quality recording
    };

    const mediaRecorder = new MediaRecorder(stream, options);
    handleRecorder(mediaRecorder);
  } catch (err) {
    console.error("Error starting capture: " + err);
    // Implement fallback strategies here
  }
}