Skip to content

to_launch.md

Latest commit

 

History

History
220 lines (176 loc) · 9.64 KB

to_launch.md

File metadata and controls

220 lines (176 loc) · 9.64 KB
Raw

LiveCap — Launch Readiness Tracker

Last updated: 2026-07-11
Current stage: Phase 2 — Web App (Pre-launch Polish Done, Awaiting Launch)

Phase Overview

Phase Name Status
Phase 1 Core Recording Engine ✅ Complete
Phase 2 Web App Polish & Free Tier 🔄 In Progress
Phase 3 Auth, Payments & Pro Tier ⏳ Not Started
Phase 4 Chrome Extension & Distribution 🔄 In Progress (scaffold only)
Phase 5 AI Features & Cloud Storage ⏳ Not Started

What Is Implemented

Core Recording Engine ✅

Feature Status Notes
Screen capture via getDisplayMedia() ✅ Done Supports tab, window, entire screen
Webcam overlay composite on canvas ✅ Done Rendered frame-by-frame via requestAnimationFrame
Microphone audio capture ✅ Done Device enumeration + selection
Pause / Resume recording ✅ Done Uses MediaRecorder.pause() / .resume()
Stop and produce downloadable file ✅ Done WebM blob from IndexedDB chunks
Crash-safe chunk storage (IndexedDB) ✅ Done Chunks saved every 10 seconds
VP9 / VP8 / WebM codec fallback chain ✅ Done Best available codec is auto-selected
Countdown before recording (3-2-1-GO) ✅ Done Animated overlay component

Video & Audio Settings ✅

Feature Status Notes
Resolution selector (720p / 1080p / 1440p) ✅ Done Applied to getDisplayMedia constraints
Frame rate selector (30fps / 60fps) ✅ Done Applied to canvas captureStream
Bitrate selector (Low / Medium / High) ✅ Done Passed to MediaRecorder
Low CPU preset (720p / 30fps / Low) ✅ Done Single-click apply button
Microphone device selector ✅ Done Enumerates audioinput devices
Live audio level meter ✅ Done Canvas-based frequency visualizer
Settings persisted to localStorage ✅ Done Auto-save on every change

Webcam Overlay ✅

Feature Status Notes
4 webcam shapes (rect / rounded / circle / ellipse) ✅ Done Canvas clip paths
4 preset positions (corners) ✅ Done Bottom-right default
Custom drag-to-reposition 🔄 Partial Type exists, prop wired, render supports {x,y}; UI handler missing (see BUG-08)
Webcam size selector (Small / Medium / Large) ✅ Done Scale factor applied to canvas
White border on webcam overlay ✅ Done Configurable on/off
Drop shadow on webcam overlay ✅ Done Configurable on/off
Toggle webcam visibility during recording ✅ Done Camera icon button in controls

Annotation Tools ✅

Feature Status Notes
Pen drawing tool (freehand) ✅ Done Normalized coords, renders on canvas
5 annotation colors ✅ Done Red, Blue, Green, Yellow, White
3 thickness levels (thin / medium / thick) ✅ Done 2px / 5px / 10px
Undo last stroke ✅ Done Pops last AnnotationPath
Clear all annotations ✅ Done Empties paths array
Redo stroke ❌ Not Done History removed; redo not implemented
Touch/stylus annotation support ✅ Done onTouchStart/onTouchMove/onTouchEnd wired
Shapes (rectangle, arrow, line, circle) ❌ Not Done Only pen tool exists
Text annotation tool ❌ Not Done

UI / UX ✅

Feature Status Notes
Dark / Light theme toggle ✅ Done Persisted to localStorage
System dark mode detection ✅ Done prefers-color-scheme
"REC" pulsing indicator badge ✅ Done Visible during recording and pause
Timer display (MM:SS) ✅ Done Single source of truth via App-level recordingSeconds
Free tier max-time indicator in timer ✅ Done Shows "10:00 max" below timer
Amber warning when near 10-minute limit ✅ Done Last 60 seconds
"Preparing streams…" overlay ✅ Done Shown during permission prompts
"Processing your recording…" overlay ✅ Done Shown while assembling WebM after stop
Error banner for MediaRecorder failures ✅ Done Dismissible top banner
Upgrade notification banner ✅ Done Shown when 10-min limit hit
Keyboard shortcuts (Ctrl+Shift+R/P/S) ✅ Done Start / Pause / Stop, no stale closures
Responsive layout (mobile-friendly) 🔄 Partial Grid collapses, but not tested on mobile

Free Tier Enforcement ✅

Feature Status Notes
10-minute recording limit ✅ Done Enforced via interval in App.tsx
Watermark on exported video ✅ Done "LiveCap" text in bottom-right corner
Pricing modal on Pro feature clicks ✅ Done Shows Free vs Pro comparison
"Upgrade to Pro" button in header ✅ Done Opens pricing modal
System audio gated behind Pro ✅ Done Shows upgrade prompt instead

Deployment Infrastructure ✅

Feature Status Notes
Vite production build ✅ Done Outputs to dist/
Netlify deployment config ✅ Done SPA redirects + security headers
Vercel deployment config ✅ Done SPA routing config
Chrome extension scaffold ✅ Done Manifest v3, background service worker
Extension icon generation script ✅ Done Zero-dependency PNG encoder
Extension build/package script ✅ Done npm run build:extension
Security headers (nosniff, frame deny) ✅ Done Netlify headers config
robots.txt ✅ Done Allows all

What Is NOT Implemented (Roadmap)

Phase 2 Remaining — Pre-Launch Polish

Feature Priority Effort
Mobile layout testing and fixes 🟠 Medium Medium
Drag-to-reposition webcam overlay (BUG-08) 🟢 Low Medium
Redo button for annotations 🟢 Low Small
Shape / text annotation tools 🟢 Low Medium
OG image and favicon for social sharing ✅ Done SVG assets in public/
Landing page / marketing site 🟠 Medium Large

Phase 3 — Auth, Payments & Pro Tier

Feature Priority Effort
User authentication (email / OAuth) 🔴 High Large
Subscription billing (Stripe or Paddle) 🔴 High Large
Plan enforcement from backend/JWT 🔴 High Medium
Pro plan: unlimited recording time 🔴 High Trivial (remove limit)
Pro plan: remove watermark 🔴 High Trivial (remove canvas draw)
Pro plan: MP4 export (FFmpeg WASM) 🔴 High Large
Pro plan: system audio recording 🟠 Medium Small (already gated)
User account dashboard 🟠 Medium Large
Recording history list 🟠 Medium Medium

Phase 4 — Chrome Extension Distribution

Feature Priority Effort
Submit extension to Chrome Web Store 🔴 High Medium
Extension popup UI (not just tab-open) 🟠 Medium Medium
Extension badge showing recording state 🟢 Low Small
Firefox extension (WebExtension) 🟢 Low Medium

Phase 5 — AI & Cloud Features (Pro)

Feature Priority Effort
AI transcription (Whisper API) 🟠 Medium Large
Cloud storage (S3 / Cloudflare R2) 🟠 Medium Large
Shareable recording links 🟠 Medium Large
Auto-chapter generation from transcript 🟢 Low Large
Searchable recording history 🟢 Low Large

Future / Nice-to-Have

Feature Notes
Additional annotation shapes (rect, arrow, text) Pen-only currently
Webcam background blur / virtual backgrounds Placeholder in UI
Screen highlight cursor effect Popular in tutorial recordings
Zoom-to-region during recording
Multi-monitor selection
GIF export
Custom branding / watermark (Pro)
Team workspaces (Enterprise)

Launch Checklist

Minimum Viable Launch (Phase 2 completion)

  • All High/Medium bugs from bug_report.md fixed
  • App tested in Chrome, Firefox, Edge (Safari has MediaRecorder limitations)
  • Mobile responsive layout verified
  • OG image and meta tags set for social sharing
  • Privacy Policy page created
  • Terms of Service page created
  • Domain purchased and DNS configured
  • Deployed to Netlify or Vercel (production URL live)
  • Google Analytics or Plausible analytics integrated
  • Error tracking (Sentry) integrated
  • Rate limiting considered (no backend currently)

Pro Tier Launch (Phase 3 completion)

  • Auth provider selected and integrated (Supabase / Auth0 / Clerk)
  • Payment processor integrated (Stripe)
  • Webhook handler for subscription state changes
  • MP4 export via FFmpeg WASM tested on large files
  • Cloud storage bucket configured with access controls
  • GDPR compliance reviewed (cookie banner, data deletion)
  • Upgrade flow end-to-end tested

Chrome Extension Launch (Phase 4 completion)

  • Extension reviewed against Chrome Web Store policies
  • Privacy disclosure for permissions filed
  • Extension listed in Chrome Web Store
  • Screenshots and promotional images prepared

Current Assessment

LiveCap is functionally complete for a free-tier web launch. The core recording loop, canvas compositing, annotation tools, and free tier enforcement all work. The codebase is clean, well-typed TypeScript, and production-ready from a build perspective.

The primary blockers before public launch are:

  1. Fix the 4 high-severity bugs (BUG-01 through BUG-04)
  2. Add legal pages (Privacy Policy, Terms of Service)
  3. Set up analytics + error tracking
  4. Complete mobile layout testing
  5. Build a landing/marketing page separate from the app