Browser-native media capture
MediaStream and MediaRecorder coordinated screen, camera, microphone and supported browser audio while the interface managed permissions, previews, device feedback and extension controls.
01Case study
Resilient Browser Video Platform
A browser-first platform for recording, correcting, processing, organizing and sharing video—with a defining pause, rewind and overwrite workflow that let users fix mistakes without starting again.
- MediaRecorder
- MediaStream
- FFmpeg
- HLS
- Chrome Extension
- Cloud Functions
- Stripe
- PostgreSQL
02Challenge
The problem
A dependable screen recorder must coordinate browser permissions, multiple media streams, long-running sessions, unstable networks, real-time uploads, transcoding, reversible edits, transcription, storage costs, sharing, teams and billing. The central user problem was simpler: one mistake near the end of a recording should not force a complete restart.
- Coordinate screen, camera, microphone and supported system-audio streams
- Protect long-running recordings during network or device interruptions
- Produce playback-compatible video, audio, thumbnails and subtitles
- Make edits reversible while preserving original media
- Control processing, transcription and long-term storage costs
- Serve anonymous, free, paid and team users with different limits
03Solution
How it was solved
The product treated a recording more like an editable document than a one-shot video production. Browser capture and incremental upload protected the source media; a cloud-processing pipeline generated streaming and editing assets; and the application layered lightweight correction, publishing, organization, collaboration and billing workflows around that resilient core.
04Evolution
Delivery path
01 · Discover & start
Users began from the web application or Chrome extension, with compatibility, permission, device, limit and browser-specific checks before capture.
02 · Configure capture
Screen-only, camera-only or combined capture with microphone, camera, supported system audio, resolution, countdown and camera-placement controls.
03 · Record
MediaStream and MediaRecorder powered capture with pause/resume, duration, draggable controls, camera picture-in-picture, extension events and navigation safeguards.
04 · Correct mistakes
Users could pause, rewind, replace a section, resume from a selected point, trim unwanted media and restore the original when an edit was rejected.
05 · Edit & enrich
Blur regions, editable transcripts, captions, VTT subtitles, chapters, annotations, calls to action and transcript-synchronized playback.
06 · Process & publish
The pipeline generated HLS playlists and segments, extracted audio, thumbnails, subtitle files and separate original and edited versions.
07 · Share & engage
Hosted public links, password protection, embeds, downloads, shared folders, view counts, first-view alerts, chapters and calls to action.
08 · Organize content
Recording and folder grids, search, inline rename, uploads, bulk move/archive/delete, shared folders and recovery/reprocessing states.
09 · Collaborate
Team creation, invitations, administrator and recorder roles, membership states, seat billing, removal and content transfer.
10 · Convert & monetize
Anonymous, free, monthly, yearly, lifetime and team states with differentiated recording, resolution, editing and download limits.
05Architecture
Platform topology
The represented platform spanned a browser application, Chrome extension, backend API, media workers and cloud services. Recorded assets moved through recovery, processing, publication and lifecycle-management states rather than one synchronous upload.
Browser app / Chrome extension
├─► MediaStream + MediaRecorder
├─► screen / camera / microphone / system audio
└─► incremental media upload
│
▼
Backend API + recording session state
│
▼
Media workers / cloud functions
├─► FFmpeg processing
├─► HLS playlists + segments
├─► audio + thumbnails
├─► captions + VTT
└─► original + edited versions
│
▼
Hosted playback / sharing / embeds / downloads06Product
Product surface
Capture modes
Screen-only, camera-only and combined capture with microphone, camera and supported tab/system audio
Recoverability
Network and device feedback, incremental transport, recovery states and reprocessing paths
Correction
Pause, rewind, overwrite, resume, trim and restore-original workflows
Editing
Blur, transcription, captions, VTT, chapters, annotations, calls to action and rich descriptions
Publishing
Hosted pages, public or password-protected links, embeds, supported downloads and first-view notifications
Library
Folders, search, rename, external uploads, move, archive, delete, shared folders and bulk operations
Teams
Invitations, role-based membership, seat billing, revocation and content transfer
Plans
Anonymous, free, subscription, lifetime and team access with differentiated product limits
07Engineering
Technical highlights
Reversible correction
Pause, rewind and overwrite turned a long recording into an editable timeline. Original media remained recoverable when a replacement or trim was rejected.
Resilient media transport
Long-running sessions and incremental uploads were designed around unstable connections, interrupted devices and explicit recovery or reprocessing states.
Playback pipeline
Media workers produced HLS playlists and segments, extracted audio, thumbnails, subtitle files and separate original/edited assets for reliable browser playback.
Lightweight enrichment
FFmpeg-backed blur and trim joined editable transcription, synchronized words, captions, chapters, annotations and calls to action without requiring professional editing software.
Lifecycle-aware SaaS
Authentication, sharing, teams, Stripe billing, plan limits, analytics, archive policies and storage lifecycle controls surrounded the media core.
08Scope
What the team delivered
Contributed across the browser recording experience, backend APIs and media workflows
Worked on core backend, streaming and cloud-processing services
Implemented FFmpeg-powered blur and trim functionality
Supported reversible editing, transcription and playback-compatible output
Improved Stripe subscriptions and webhook handling
Helped reduce reported recording errors by 65%
09Services
Repos & services
Anonymized service family across the platform.
| Service | Responsibility | Stack |
|---|---|---|
| Browser Application | Capture setup, recording controls, correction, editing, library, playback and sharing | Browser media APIs, MediaStream, MediaRecorder |
| Chrome Extension | Extension-led capture, browser events and recording controls | Chrome extension APIs, browser media APIs |
| Backend API | Recordings, folders, users, teams, sharing, billing and processing orchestration | API services, PostgreSQL, authentication, Stripe |
| Media Pipeline | Transcoding, HLS, audio extraction, thumbnails, blur, trim and version handling | FFmpeg, media workers, cloud functions |
| Cloud Operations | Object storage, lifecycle management, analytics and operational tooling | Cloud storage, 17 cloud-function packages |
10Outcomes
Results that matter
Reported recording errors reduced by 65%.
Reported recording errors reduced by 65%
Users could pause, rewind and replace mistakes instead of restarting an entire recording
Blur and trim editing shipped through an FFmpeg-backed media pipeline
Recordings were processed into HLS, audio, thumbnails and subtitle assets for browser playback
The product supported hosted sharing, organization, teams and multiple billing states
More reliable Stripe subscriptions and webhook handling
Repository evidence spans 2022–2025: 830 tracked files, 1,368 commits, 28 application routes, approximately 100 API paths, 51 database migrations and 17 cloud-function packages.
Browser media capture, resilient uploads, video processing, reversible editing, cloud storage, billing and collaborative SaaS delivery.
11Visuals
Product visuals
12More work
Related experience
Virtual World Platform — Backend & Live Operations
Backend platform for a flagship social virtual world — Go realtime game server, NestJS Alpha API, versioned content releases, Kafka telemetry contracts, and an internal support console for live operations.
View case study →
AI Outreach Stack — Voice Campaigns, Call Intelligence & CRM Automation
Built and evolved an AI outreach stack connecting campaign operations, real-time voice agents and CRM orchestration so leads could be called, scored and followed up without manual glue work between tools.
View case study →
NFC-Enabled Artwork Platform
A multi-application platform connecting physical artworks to secure digital records through NFC, enabling authenticity checks, provenance, ownership, subscriptions, auctions and scan analytics.
View case study →
Related Peerprise services
13Next step