Screen & Camera Recording Flow

Relevant source files

The following files were used as context for generating this wiki page:

• apps/extensions/src/content/popup/screens/capture/CaptureScreen.tsx
• apps/extensions/src/background.ts
• apps/extensions/src/content/recording/screens/desktopCaptureScreen/DesktopCaptureScreen.tsx
• apps/extensions/src/content/recording/screens/cameraOnlyScreen/CameraOnlyScreen.tsx
• apps/portal/hooks/useReactMediaRecorder.ts
• apps/extensions/src/content/panel/hooks/useManageVideoData.ts
• apps/extensions/src/manifest.json
• apps/extensions/src/content/popup/Main.tsx

The Screen & Camera Recording feature is a core part of the Ever Rec Chrome Extension, enabling users to capture video from their screen, a specific browser tab, or their webcam. This system is designed to handle the entire recording lifecycle, from initiation and device selection in the extension popup to the final processing and uploading of the recorded video.

The flow involves multiple components of the extension working in concert: the popup UI for user interaction, a background service worker for coordination and state management, and dedicated recording pages for managing media streams. Once a recording is complete, it is passed to a panel page for editing, saving, and sharing.

1. Architecture Overview

The recording flow is orchestrated by the background script (background.ts) and involves several key parts of the extension. The user initiates a recording from the popup, which sends a message to the background script. The background script then opens a dedicated recording window (desktop-capture.html or camera-only.html) where the actual media capture occurs using the useReactMediaRecorder hook.

This diagram shows the high-level interaction between the main components during a recording session.

2. Permissions and Setup

For the recording functionality to work, the extension requires several permissions which are declared in the manifest.json file.

Permission	Purpose
desktopCapture	Allows capturing content of the screen, individual windows, or tabs.
tabCapture	Provides the ability to capture the visible area of a tab.
storage	Used to save user settings and recording state across sessions.
scripting	Needed to inject content scripts into tabs for controlling UI elements.
activeTab	Grants access to the currently active tab.
tabs	Allows the extension to query and interact with browser tabs.

Sources: apps/extensions/src/manifest.json:14-22

3. Recording Initiation

The recording process begins in the extension's popup, specifically within the CaptureScreen component.

Sources: apps/extensions/src/content/popup/screens/capture/CaptureScreen.tsx

3.1. User Configuration

The user is presented with several options to configure the recording:

1. Recording Type:
   • Tab: Records the content of the current active tab. Handled by tabPartVideo.
   • Desktop: Records the entire screen or a specific application window. Handled by fullScreenVideo.
   • Camera Only: Records video solely from the user's webcam. Handled by cameraOnlyVideo.
2. Audio/Video Devices: Dropdowns allow selection of the desired microphone and camera.
3. Additional Settings: Toggles for countdown timer, flip camera, and microphone mute state.

When a recording type is selected, a videoType value (tabScreen, fullScreen, or cameraOnly) is saved to local storage.

Sources: apps/extensions/src/content/popup/screens/capture/CaptureScreen.tsx:227-253

3.2. Starting the Recording

The recordVideo function orchestrates the start of the recording.

The background.ts script listens for the AppMessagesEnum.startVideo message. Upon receiving it, it reads the videoType from storage and creates a new popup window pointing to the appropriate recording screen.

• fullScreen or tabScreen -> desktop-capture.html
• cameraOnly -> camera-only.html

Sources: apps/extensions/src/background.ts:286-324

4. Media Capture and Recording State

The actual recording is handled by the component loaded in the new window (DesktopCaptureScreen or CameraOnlyScreen) and the useReactMediaRecorder hook.

4.1. useReactMediaRecorder Hook

This hook is a wrapper around the browser's MediaRecorder API. Its primary responsibilities include:

• Acquiring Media Streams: Uses navigator.mediaDevices.getDisplayMedia (for screen) or navigator.mediaDevices.getUserMedia (for camera/mic).
• Managing State: Tracks the recording status (idle, recording, paused, stopped).
• Handling Data: Listens for the ondataavailable event to collect recorded data into an array of Blob chunks.
• Stopping: On stopRecording(), it finalizes the recording, creates a single Blob from the chunks, and invokes an onStop callback with the blob URL and duration. It uses fix-webm-duration to correct metadata issues in the final video file.

This state diagram illustrates the lifecycle managed by the hook.

4.2. Recording Screens

The DesktopCaptureScreen and CameraOnlyScreen components use the useReactMediaRecorder hook to manage the recording.

In their initialSettings function, they:

1. Retrieve recording settings (mic, camera, etc.) from storage.
2. Create the appropriate MediaStream (createDesktopMediaStream, createTabMediaStream, or a camera stream).
3. Pass this stream to useReactMediaRecorder via the customMediaStreamProp.
4. The hook's useEffect for customMediaStreamStatus then calls startRecording().

These screens also render the video preview and action footer with controls for pausing, resuming, and stopping the recording.

Sources: apps/extensions/src/content/recording/screens/desktopCaptureScreen/DesktopCaptureScreen.tsx:135-182, apps/extensions/src/content/recording/screens/cameraOnlyScreen/CameraOnlyScreen.tsx:68-93

5. Stopping and Finalizing the Video

When the user stops the recording, a finalization process is triggered.

1. onStop Callback: The onStop callback provided to useReactMediaRecorder (e.g., onStopScreenshare in DesktopCaptureScreen) is executed. It receives the blob URLs and duration.
2. Message to Background: The recording screen sends an AppMessagesEnum.stopVideo message to background.ts, containing the blobUrls and videoDuration.
3. Open Editor Panel: background.ts receives the message and calls setVideoFile. This function creates a new tab with the video editor panel (video.html).
4. Data Transfer: The video data (blobUrls, videoDuration, videoTitle) is passed to the new panel tab when it's ready.

Sources: apps/extensions/src/content/recording/screens/desktopCaptureScreen/DesktopCaptureScreen.tsx:80-84, apps/extensions/src/background.ts:279-284, 403-433

5.1. Video Processing and Upload

The video editor panel uses the useManageVideoData hook to handle the final steps.

This diagram shows the flow within the useManageVideoData hook. It transforms the blob URLs back into Blobs, corrects the video duration metadata, and then uploads the final video file to the appropriate service.

Sources: apps/extensions/src/content/panel/hooks/useManageVideoData.ts:37-69

6. Summary

The screen and camera recording flow is a robust system that decouples the UI, state management, and media capture logic. The extension popup acts as the entry point, the background script serves as the central orchestrator, and dedicated recording screens handle the MediaRecorder API via the useReactMediaRecorder hook. This modular architecture allows for a clean separation of concerns, from capturing user intent to processing and uploading the final video asset.