Trusted Tech Leader/ Case studies

Case study · SaaS platforms

Open-source screen recorder and async video platform with bring-your-own storage

A Chrome extension records screen, tab or webcam and uploads to an API that uses storage the owner chooses; a web app handles library and sharing.

Sector
Productivity and video communication
Category
SaaS platforms
Maturity
MIT-licensed open-core repository; teams and tiered plans are built in; an extension, a web app and an API with a test suite; region recording is documented as deferred

At a glance

Who it's for
Individuals and teams who want an open-source alternative to hosted screen-recording tools, with the option to keep recordings in their own storage.
Core stack
Chrome Manifest V3, Next.js, FastAPI, PostgreSQL
What sets it apart
A screen recorder and async video platform where the owner can bring their own storage, where listing and managing recordings need sign-in, viewing needs a short-lived signed playback session, and share links follow each recording's settings.
On this page

What it looks like in use

The small panel in the browser toolbar before and after a recording, and the web library where recordings are kept.

Recorder extension and library
RecorderBefore you record
Before you record: choose what to capture
This Tab
Record current tab
Full Screen
Record entire screen
Region
Coming soon
Webcam Only
Record webcam only
MicrophoneOn
Drawing toolsOptional
After you stop: the same panel afterwards
Recording uploadedDone
A share link to the recording
Copy linkView recording
Want another take?Record another
Your video library in the web app (sign-in required)
Product walkthrough
Bug report for the team
Weekly update
Untitled
Illustrative screen sample data, not client data; region recording is not built yet. Listing and managing recordings needs a signed-in account, and playback uses short-lived signed sessions.

From one click to a recording link

  1. Sam picks what to record

    He clicks the extension in his browser and chooses this tab, the whole screen or just the webcam.

  2. He talks while it records

    The microphone is on, and a small camera bubble can sit on screen while he shows his work. Drawing tools are available on the page.

  3. Stopping uploads it to his account

    The video is sent to his account and stored in his own bucket if he has connected one, otherwise in managed storage.

  4. A link to the recording is ready

    When the upload finishes, he gets a share link and can open the recording in the web app, where he can trim it or set who may watch.

  5. Every recording lives in one library

    All his videos sit in one library in the web app, which he can share with teammates.

The challenge

Hosted screen-recording tools put every video on someone else's infrastructure. Teams that record walkthroughs, demos and bug reports often want to choose where the files live, including a bucket in a specific region for data-residency reasons.

Browser extensions also face real platform limits. The browser's extension rules do not let a background script keep a recorder alive, capture APIs differ between screen and tab, and region capture has no native API.

The solution

A Chrome extension handles capture and recording and uploads as the signed-in user. The backend stores video through a pluggable storage provider (local disk by default for development, or common cloud storage and video services, including Google Drive; managed or bring-your-own) and keeps metadata in PostgreSQL.

A Next.js web app provides the library, player, editor and sharing. Access is controlled: listing and managing recordings requires a signed-in account, streaming requires a short-lived signed playback session, and recording share links follow each recording's share settings, either anyone with the link or restricted to signed-in people it is shared with. The project is explicit about trade-offs: region recording is documented as deferred with a researched approach.

For your technical teamhow it works under the hood

Recording lifecycle in the extension

Recording lifecycle in the extensionState diagram of the extension recording lifecycle. A recording moves from Idle to Preparing, then Recording, then Stopping, then Uploading, then Completed. Recording can move to Paused and back by pause and resume. Preparing, Recording, Stopping and Uploading can each move to Failed.Idleready to startPreparingsetting up captureRecordingrecorder runningStoppingrecorder finishingUploadingsent to the APICompletedrecording savedPausedrecorder heldpauseresumeFailederror kept in the extension statefailure path
The extension keeps one recording status at a time. The main path runs left to right; pausing is a loop on the Recording state, and any active step can fall through to Failed.

Key features

What the system does, as built in the codebase.

  • 01

    Screen, tab and webcam recording

    Capture with microphone audio and mute control.

  • 02

    Webcam overlay

    A floating camera bubble is shown during recording.

  • 03

    On-page annotation

    A content script with a canvas library for drawing.

  • 04

    Authenticated API

    Upload, list and manage recordings require a signed-in account; streaming uses short-lived signed playback sessions and video tokens.

  • 05

    Web library and player

    A web app to browse, play and organise recordings.

  • 06

    Web editor

    Trim, crop and blur a recording in the browser.

  • 07

    Bring your own storage

    Keep recordings in your own bucket in the region you choose, or use managed storage.

  • 08

    Share controls

    Per-recording settings decide whether anyone with the link can watch or only signed-in people it is shared with.

  • 09

    Transcription, comments and reactions

    Transcripts on plans that include AI features, via an external speech-to-text service, plus comments and reactions from viewers.

  • 10

    Developer Mode

    Built into the extension code and backend: console and network capture attached to tab recordings. Not yet exposed in the extension UI.

  • 11

    Teams and tiers

    Multi-user accounts, teams and plan tiers with usage limits.

  • 12

    Permission onboarding

    A page that guides the user through the required capture permissions.

  • 13

    Environment-aware build

    Injects the backend URL, web app URL and version, and can output a store-ready zip.

  • 14

    Documented roadmap

    A feasibility write-up for region recording.

How it fits together

From a browser capture to a shareable, streamable library on storage the owner chooses.

  1. Chrome extensionpopup, content, background
  2. Offscreen recorderMediaRecorder session
  3. FastAPI backendauth, upload, playback, sharing
  4. Storage providerlocal, S3-compatible and others
  5. PostgreSQLrecording metadata
  6. Next.js web applibrary, player, editing, sharing
The extension starts a recording in an offscreen document. The finished recording is uploaded to the FastAPI backend, which stores the video with a storage provider (local disk by default for development; S3-compatible storage including R2 and other providers, managed or bring-your-own) and keeps metadata in PostgreSQL. The Next.js web app handles the library, player, editing and sharing through the same API.
  • The offscreen recorder hands a blob to the uploader, which posts it to the API with the user's bearer token.
  • The web app lists recordings as a signed-in user and plays them through short-lived signed playback sessions.

Implementation notes

Engineering decisions worth knowing about.

  1. Offscreen recording

    An offscreen document holds the recorder for the whole session because MV3 service workers are short-lived.

  2. Typed messaging

    A message-typed protocol connects the popup, background, offscreen and content scripts.

  3. Pluggable storage

    A storage factory picks a provider per account: local disk, S3-compatible storage, Google Drive, Firebase, Cloudinary, Mux or Bunny. Metadata lives in PostgreSQL with Alembic migrations.

  4. Access control

    Listing and managing recordings needs a signed-in account (JWT). Streaming needs a short-lived signed playback session and signed video tokens. Recording share links follow each recording's share settings: anyone with the link, or restricted to signed-in people it is shared with.

  5. Teams and tiers

    Roles, teams and tier limits (recording length, video count, managed storage) are defined in the backend configuration, with Stripe for billing.

  6. Tests

    The backend has a tests folder covering areas such as playback sessions, storage, tiers and the video editor, and the web app has a Vitest setup. Tests exist; they have not been run for this write-up.

  7. Store readiness

    Privacy and store listing documents are prepared for extension submission.

Technology stack

Taken from the project's dependency and config files.

Client
  • Chrome Extension Manifest V3
  • Vanilla JavaScript
  • Fabric.js
Web app
  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind 4
Editing and playback
  • TipTap
  • Excalidraw
  • hls.js
Backend
  • Python
  • FastAPI
  • SQLAlchemy 2
  • Alembic
Data and services
  • PostgreSQL
  • Stripe
  • JWT
  • boto3 / S3-compatible storage
For your technical teamtechnology layers

Technology layers, client to tooling

Technology layers, client to toolingLayered diagram of the stack. Client: Chrome Extension Manifest V3, Vanilla JavaScript, Fabric.js. Web app: Next.js 16, React 19, TypeScript, Tailwind 4. Editing and playback: TipTap, Excalidraw, hls.js. Backend: Python, FastAPI, SQLAlchemy 2, Alembic. Data and services: PostgreSQL, Stripe, JWT, boto3 and S3-compatible storage.Clientruns in ChromeChrome Extension Manifest V3Vanilla JavaScriptFabric.jsWeb applibrary and playerNext.js 16React 19TypeScriptTailwind 4Editing and playbacknotes, whiteboards, videoTipTapExcalidrawhls.jsBackendAPI and migrationsPythonFastAPISQLAlchemy 2AlembicData and servicesmetadata, auth, billing, storagePostgreSQLStripeJWTboto3 / S3-compatible
Read from the top: the extension in the browser uploads to the FastAPI backend, which stores video with a storage provider and metadata in PostgreSQL. The Next.js web app, with its editing and playback libraries, reads the same API.

Business value

What the system enables. No numbers are claimed.

  • Lets the owner keep recordings in their own bucket, in a region they choose, or use managed storage.
  • Brings recording, basic editing and sharing into one flow from capture to share link.
  • Supports teams and plan tiers with usage limits, on an MIT-licensed open-core codebase.

Need a system like this built?

Tell us what it needs to do and we will scope it with you on a call.

Discuss a build