CaptureKit | HTML5 Media Capture Utility

Ship a studio-grade camera experience inside your website — video, audio, and photos in the browser. No apps to install. No Node.js. No CDN. Open index.html and you’re capturing.

CaptureKit is built for portals, kiosks, SaaS flows, support desks, and client sites that need real media capture — not a fragile webcam demo. Visitors record on demand or on a schedule, apply zoom and mood effects, use smart device controls when the hardware allows, save a local history, download or share, and optionally push files to your API.

The problem it solves

Most “webcam widgets” only take a snapshot. Native apps are heavy. Hand-rolled MediaRecorder code breaks across browsers.

CaptureKit puts a polished capture studio where your users already are — in the browser. They allow access, choose video / audio / photo, shape the shot, and leave with a file they can trust.

Why buyers choose CaptureKit

• Looks like a product, not a plugin — cinematic stage, Manual dock, Sync panel, and History library
• Creative control that converts — zoom, one-tap effects, and real camera knobs when the device exposes them
• Zero install friction — visitors never leave your site; PWA install is optional
• Minutes to demo, hours to ship — drop on localhost or HTTPS and go
• Upload-ready when you are — optional API upload with clear buyer docs
• Built for real workflows — onboarding clips, KYC / ID photos, support evidence, audio notes, timed Sync sessions

Everything included

Capture studio

• Manual mode for video, microphone audio, and still photos
• Pause, stop, retake, download, and share in one clean dock
• Front / rear camera flip when multiple cameras are available
• Live audio visualizer with a polished playback card

Zoom, effects & device power

• Stage zoom — slider, +/−, mouse wheel, and pinch; hardware zoom when supported, digital zoom otherwise
• What you see is what you save — zoom and effects are baked into recordings and photos
• One-tap mood effects — None, Mono, Sepia, Cool, Warm, Contrast, Vivid, Soft
• Smart Camera tools — torch, focus, exposure, white balance, and more appear only when the camera actually supports them
• No clutter on limited webcams — unsupported controls stay hidden automatically

Sync sessions

• Timed capture with start delay, interval, and clip length
• Continuous or duration-limited sessions with a max-captures safety limit
• Live Stop Sync control on stage while the session runs
• Effects and zoom apply to Sync clips too

History library

• On-device IndexedDB library (Image / Video / Recording tabs)
• Preview, download, share, delete, and Upload / Retry when an API is set
• Clear all with a confirm step, then reload

Upload, themes & install

• Optional multipart API upload (after each capture, timeout flush, or manual from History)
• Live upload status chip + History badges
• PWA install for Web, Android, and iOS — branded app icon included
• Themes: System, Light, Dark, Night
• Optional context-menu lock (remove one script line to disable)

For your project

• Plain-language buyer docs plus developer API guide
• Full 1920×1080 screenshot tour in the docs — Manual video / photo / audio, zoom, Camera tools (effects + device), Sync + Upload to API, History, Settings, and clear-all confirm
• Example PHP upload receiver
• 100% self-hosted assets — no CDN, no jQuery, no build step

Important: where files are saved

Captures live in the browser’s IndexedDB on the user’s device — not in a folder on your server by default. Clearing site data, using private mode, uninstalling the PWA, or History → Clear all can wipe that library.

Recommendation: treat IndexedDB as a working library. For keepers, use Download, Share, or Upload to API.

Who it’s for

• Product teams adding in-browser camera capture to a web app
• Support and ops teams collecting short video / audio evidence
• Agencies delivering a ready-made capture utility to client sites
• Teams that need timed Sync clips with optional upload
• Anyone who wants a self-contained HTML5 capture UI without a build step

How it works

1. Try it — open index.html via localhost or HTTPS and allow camera / mic
2. Shape it — zoom, pick an effect, tweak device controls, then capture Manual or Sync
3. Browse it — review takes in History; download, share, or upload when ready
4. Ship it — upload the package; wire api-config.js only if you need uploads

Production sites need HTTPS. Localhost is enough for development.

Technical Requirements

• No Node.js required to run the app or documentation.
• Web server — serve over HTTPS (production) or localhost (development). Camera / mic do not work on plain file:// pages.
• Browser APIs — modern browser with getUserMedia + MediaRecorder. Chrome and Edge give the fullest experience; Firefox and Safari work with normal browser limits.
• Optional file uploads — core capture is 100% client-side. If you enable Upload to API, your server must accept multipart POSTs, allow CORS from the CaptureKit origin, and set adequate body size limits. Extend CSP connect-src when the API is on another host.

Infrastructure cost warning

CaptureKit itself does not bill you for storage or bandwidth. If you enable Upload to API and store files on your host, S3, or a CDN, you (the buyer) pay those external infrastructure costs. Plan capacity before enabling uploads in production.

Browsers

Works in modern browsers. Chrome and Edge give the smoothest experience. Firefox and Safari are supported with normal media / codec limits. Device controls and hardware zoom vary by camera and OS.

License clarity

Your Envato purchase covers CaptureKit. Bundled assets (Bootstrap Icons, Share Tech) are free and open-source — you do not need to buy extra commercial licenses to use what’s included. See CREDITS.md.

CaptureKit | HTML5 Media Capture Utility — Manual & Sync capture, zoom & effects, smart camera controls, local history, optional API upload, and PWA install — ready for customers.