Chrome Extension Screen Recorder for Meetings: A Developer Guide

class MeetingRecorder {
  constructor() {
    this.mediaRecorder = null;
    this.recordedChunks = [];
    this.stream = null;
    this.startTime = null;
  }

  async startRecording(options = {}) {
    const defaultOptions = {
      video: true,
      audio: true,
      systemAudio: false
    };

    const finalOptions = { ...defaultOptions, ...options };

    try {
      // Request screen capture
      const displayStream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          displaySurface: 'monitor'
        },
        audio: finalOptions.systemAudio
      });

      // Combine with microphone if requested
      if (finalOptions.audio) {
        const audioStream = await navigator.mediaDevices.getUserMedia({
          audio: {
            echoCancellation: true,
            noiseSuppression: true,
            sampleRate: 44100
          }
        });

        // Combine audio tracks
        const audioTracks = audioStream.getAudioTracks();
        displayStream.addTrack(audioTracks[0]);
      }

      this.stream = displayStream;
      this.recordedChunks = [];
      this.startTime = Date.now();

      // Set up MediaRecorder
      const mimeType = this.getSupportedMimeType();
      this.mediaRecorder = new MediaRecorder(this.stream, {
        mimeType,
        videoBitsPerSecond: 2500000 // 2.5 Mbps
      });

      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          this.recordedChunks.push(event.data);
        }
      };

      // Handle stream ending (user stops sharing)
      this.stream.getVideoTracks()[0].onended = () => {
        this.stopRecording();
      };

      this.mediaRecorder.start(1000); // Collect data every second
      return true;

    } catch (error) {
      console.error('Recording failed:', error);
      throw error;
    }
  }

  getSupportedMimeType() {
    const types = [
      'video/webm;codecs=vp9,opus',
      'video/webm;codecs=vp8,opus',
      'video/webm'
    ];

    for (const type of types) {
      if (MediaRecorder.isTypeSupported(type)) {
        return type;
      }
    }
    return 'video/webm';
  }

  stopRecording() {
    return new Promise((resolve) => {
      if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive') {
        resolve(null);
        return;
      }

      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedChunks, {
          type: this.getSupportedMimeType()
        });

        const duration = Math.round((Date.now() - this.startTime) / 1000);
        const filename = `meeting-recording-${Date.now()}.webm`;

        resolve({
          blob,
          filename,
          duration,
          startTime: this.startTime
        });
      };

      // Stop all tracks
      this.stream.getTracks().forEach(track => track.stop());
      this.mediaRecorder.stop();
    });
  }

  pauseRecording() {
    if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
      this.mediaRecorder.pause();
    }
  }

  resumeRecording() {
    if (this.mediaRecorder && this.mediaRecorder.state === 'paused') {
      this.mediaRecorder.resume();
    }
  }
}

let recorder = null;
let timerInterval = null;

document.addEventListener('DOMContentLoaded', () => {
  loadState();
  
  document.getElementById('startBtn').addEventListener('click', startRecording);
  document.getElementById('stopBtn').addEventListener('click', stopRecording);
});

async function startRecording() {
  const includeAudio = document.getElementById('includeAudio').checked;
  const includeSystem = document.getElementById('includeSystem').checked;

  try {
    // Send message to background to start recording
    const response = await chrome.runtime.sendMessage({
      action: 'startRecording',
      options: { audio: includeAudio, systemAudio: includeSystem }
    });

    if (response.success) {
      updateUI('recording');
      startTimer();
    }
  } catch (error) {
    alert('Failed to start recording: ' + error.message);
  }
}

async function stopRecording() {
  try {
    const response = await chrome.runtime.sendMessage({
      action: 'stopRecording'
    });

    if (response.success && response.file) {
      // Download the recording
      await chrome.downloads.download({
        url: response.file.url,
        filename: response.file.filename,
        saveAs: true
      });
      
      updateUI('inactive');
      stopTimer();
    }
  } catch (error) {
    alert('Failed to save recording: ' + error.message);
  }
}

function updateUI(state) {
  const status = document.getElementById('status');
  const startBtn = document.getElementById('startBtn');
  const stopBtn = document.getElementById('stopBtn');
  const timer = document.getElementById('timer');

  if (state === 'recording') {
    status.textContent = 'Recording in progress';
    status.className = 'status recording';
    startBtn.style.display = 'none';
    stopBtn.style.display = 'block';
    timer.style.display = 'block';
  } else {
    status.textContent = 'Ready to record';
    status.className = 'status inactive';
    startBtn.style.display = 'block';
    stopBtn.style.display = 'none';
    timer.style.display = 'none';
  }
}

function startTimer() {
  const timerEl = document.getElementById('timer');
  const startTime = Date.now();
  
  timerInterval = setInterval(() => {
    const elapsed = Math.floor((Date.now() - startTime) / 1000);
    const hours = Math.floor(elapsed / 3600);
    const minutes = Math.floor((elapsed % 3600) / 60);
    const seconds = elapsed % 60;
    
    timerEl.textContent = 
      String(hours).padStart(2, '0') + ':' +
      String(minutes).padStart(2, '0') + ':' +
      String(seconds).padStart(2, '0');
  }, 1000);
}

function stopTimer() {
  if (timerInterval) {
    clearInterval(timerInterval);
    timerInterval = null;
  }
}

async function loadState() {
  // Check if recording is already in progress
  const result = await chrome.storage.local.get(['recordingState']);
  if (result.recordingState === 'recording') {
    updateUI('recording');
    startTimer();
  }
}

let currentRecorder = null;

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'startRecording') {
    handleStartRecording(message.options)
      .then(result => sendResponse({ success: true, result }))
      .catch(error => sendResponse({ success: false, error: error.message }));
    return true; // Keep message channel open for async response
  }

  if (message.action === 'stopRecording') {
    handleStopRecording()
      .then(result => sendResponse({ success: true, file: result }))
      .catch(error => sendResponse({ success: false, error: error.message }));
    return true;
  }
});

async function handleStartRecording(options) {
  currentRecorder = new MeetingRecorder();
  await currentRecorder.startRecording(options);
  
  await chrome.storage.local.set({ recordingState: 'recording' });
  return { started: true };
}

async function handleStopRecording() {
  if (!currentRecorder) {
    throw new Error('No recording in progress');
  }

  const result = await currentRecorder.stopRecording();
  
  // Create object URL for download
  const url = URL.createObjectURL(result.blob);
  
  await chrome.storage.local.set({ recordingState: 'inactive' });
  currentRecorder = null;
  
  return {
    url,
    filename: result.filename
  };
}