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.
01Selected team experience
Resilient Browser Video Platform
A resilient browser recording platform that lets users correct mistakes without starting over — coordinating screen, camera and audio capture, incremental upload, cloud processing, reversible editing, sharing, teams and billing.
- MediaRecorder
- MediaStream
- FFmpeg
- HLS
- Chrome Extension
- Cloud Functions
- Stripe
- PostgreSQL
02Challenge
The problem
Long recordings are vulnerable to browser, network and device failures. A single mistake near the end should not force the user to repeat the entire recording.
- 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 recording was treated as an editable document. Browser capture protected the source media, cloud workers produced playback and editing assets, and a pause, rewind and overwrite workflow allowed targeted corrections while preserving the original recording.
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%
Delivered pause, rewind and overwrite correction without restarting recordings
Added FFmpeg-based blur and trim workflows
Generated HLS, audio, thumbnails and subtitles for browser playback
Improved subscription and webhook reliability
Supported sharing, organization and team accounts
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
A real-time backend and live-operations platform for a persistent virtual world — combining player progression, content releases, analytics and support operations across Go, NestJS, PostgreSQL, DynamoDB, Redis, NATS and Kafka.
View case study →
AI Outreach and CRM Automation
AI voice outreach connected to campaign operations and CRM follow-through — coordinating lead intake, structured outcomes, CRM updates, calendar booking and email follow-up across Vapi, Pipedrive, Twilio, FastAPI and AWS.
View case study →
NFC Artwork Identity & Commerce Platform
A secure physical-digital platform for artwork identity, provenance and commerce — connecting NFC-enabled physical artworks to digital records, ownership, exhibitions, auctions, subscriptions and scan analytics.
View case study →
Related Peerprise services
13Next step