Webcam Tester

📷 Webcam Detection & Access

• Detect and list all connected webcams
  • Show their device names or fallback to Unknown Webcam
• Handle all permission/access states:
  • ❌ Empty state → no webcams detected
  • 🚫 Denied state → user blocked camera access, show instructions
  • ⚠️ Error state → unknown issue fallback

🔴 Live Webcam Preview

• Show a live video feed from the selected webcam
  • Allow user to select a different device from a dropdown if multiple are present
• Indicate which device is currently active

🎥 Recording Interface

• Controls:

  • Start, Pause, Resume, Stop recording
  • Timer works just like mic version:
    • Starts at 0s
    • Pauses and resumes correctly

• After stopping:

  • Display a video player preview
  • Allow download as MP4 or WebM

• Support for multiple recordings

  • Each recording shows:
    • Editable title (Recording - <timestamp>)
    • Video thumbnail preview (from 1s in)
    • Play/pause controls
    • Seek by clicking timeline
    • Delete and download buttons

⚙️ Playback Controls

• Skip ±5s buttons (with boundaries)
• Playback speed options:
  • Slow: 0.25x, 0.5x, 0.75x
  • Fast: 1.25x, 1.5x, 1.75x, 2x
• Toggle playback loop mode

♿ Accessibility

• All controls must be:
  • Fully keyboard accessible
  • Aria-labeled
  • Have clear focus states
• Hotkeys:
  • Space = play/pause
  • R = record
  • B/F = skip 5s backward/forward

💾 Storage & Persistence

• Data is stored in localStorage for now
  • Should persist on reload
• Later stored in PostgreSQL via Drizzle ORM

🧱 Data Model — LocalStorage

type WebcamRecording = {
  id: string; // UUID
  title: string;
  deviceLabel: string;
  createdAt: string; // ISO
  updatedAt: string;
  duration: number; // in seconds
  videoBlobUrl: string; // Object URL
  thumbnailUrl: string; // snapshot from video
  playbackRate: number;
};

Example JSON

[
  {
    "id": "70fdfb88-4880-49f4-b189-bcf4c354d841",
    "title": "Recording - 2025-04-13 15:44",
    "deviceLabel": "Logitech C920 HD",
    "createdAt": "2025-04-13T15:44:02.000Z",
    "updatedAt": "2025-04-13T15:44:02.000Z",
    "duration": 19,
    "videoBlobUrl": "blob:http://localhost:3000/video1234",
    "thumbnailUrl": "blob:http://localhost:3000/thumb1234",
    "playbackRate": 1.0
  }
]

Utility for LocalStorage

localStorage.setItem("webcam-recordings", JSON.stringify(recordings));
const recordings = JSON.parse(
  localStorage.getItem("webcam-recordings") ?? "[]"
) as WebcamRecording[];

🐘 PostgreSQL Schema with Drizzle ORM

Schema

import {
  pgTable,
  text,
  uuid,
  timestamp,
  real,
  integer,
} from "drizzle-orm/pg-core";
 
export const webcamRecordings = pgTable("webcam_recordings", {
  id: uuid("id").primaryKey().defaultRandom(),
  title: text("title").notNull(),
  deviceLabel: text("device_label"),
  createdAt: timestamp("created_at", { mode: "date" }).notNull().defaultNow(),
  updatedAt: timestamp("updated_at", { mode: "date" }).notNull().defaultNow(),
  duration: integer("duration").notNull(),
  videoUrl: text("video_url").notNull(), // base64 or public URL
  thumbnailUrl: text("thumbnail_url").notNull(),
  playbackRate: real("playback_rate").default(1.0),
});

Notes:

• videoUrl can be:
  • A base64 string
  • Or an uploaded URL (Supabase, S3, etc.)
• thumbnailUrl is a snapshot from the video for preview
• This model supports hydration from localStorage

Let me know if you want:

• 📤 A migration tool from localStorage to Postgres
• 🧑‍🎨 A UI sketch using Shadcn components
• 🖥️ A "device tester" dashboard that combines mic + cam + speakers