CaptureKit | HTML5 Media Seize Utility
Ship a studio-grade digicam expertise inside your web site — video, audio, and images within the browser.
No apps to put in. No Node.js. No CDN. Open index.html and also you’re capturing.
CaptureKit is constructed for portals, kiosks, SaaS flows, help desks, and consumer websites that want actual media seize —
not a fragile webcam demo. Guests file on demand or on a schedule, apply zoom and temper results, use sensible gadget controls when the {hardware} permits, save a neighborhood historical past, obtain or share, and optionally push information to your API.
The issue it solves
Most “webcam widgets” solely take a snapshot. Native apps are heavy. Hand-rolled MediaRecorder code breaks throughout browsers.
CaptureKit places a elegant seize studio the place your customers already are — within the browser.
They permit entry, select video / audio / photograph, form the shot, and depart with a file they will belief.
Why patrons select CaptureKit
- Appears like a product, not a plugin — cinematic stage, Guide dock, Sync panel, and Historical past library
- Inventive management that converts — zoom, one-tap results, and actual digicam knobs when the gadget exposes them
- Zero set up friction — guests by no means depart your website; PWA set up is elective
- Minutes to demo, hours to ship — drop on localhost or HTTPS and go
- Add-ready if you end up — elective API add with clear purchaser docs
- Constructed for actual workflows — onboarding clips, KYC / ID images, help proof, audio notes, timed Sync classes
Every little thing included
Seize studio
- Guide mode for video, microphone audio, and nonetheless images
- Pause, cease, retake, obtain, and share in a single clear dock
- Entrance / rear digicam flip when a number of cameras can be found
- Dwell audio visualizer with a elegant playback card
Zoom, results & gadget energy
- Stage zoom — slider, +/−, mouse wheel, and pinch; {hardware} zoom when supported, digital zoom in any other case
- What you see is what you save — zoom and results are baked into recordings and images
- One-tap temper results — None, Mono, Sepia, Cool, Heat, Distinction, Vivid, Tender
- Good Digital camera instruments — torch, focus, publicity, white stability, and extra seem solely when the digicam really helps them
- No muddle on restricted webcams — unsupported controls keep hidden routinely
Sync classes
- Timed seize with begin delay, interval, and clip size
- Steady or duration-limited classes with a max-captures security restrict
- Dwell Cease Sync management on stage whereas the session runs
- Results and zoom apply to Sync clips too
Historical past library
- On-device IndexedDB library (Picture / Video / Recording tabs)
- Preview, obtain, share, delete, and Add / Retry when an API is about
- Clear all with a affirm step, then reload
Add, themes & set up
- Elective multipart API add (after every seize, timeout flush, or guide from Historical past)
- Dwell add standing chip + Historical past badges
- PWA set up for Internet, Android, and iOS — branded app icon included
- Themes: System, Mild, Darkish, Night time
- Elective context-menu lock (take away one script line to disable)
In your challenge
- Plain-language purchaser docs plus developer API information
- Full 1920×1080 screenshot tour within the docs — Guide video / photograph / audio, zoom, Digital camera instruments (results + gadget), Sync + Add to API, Historical past, Settings, and clear-all affirm
- Instance PHP add receiver
- 100% self-hosted property — no CDN, no jQuery, no construct step
Essential: the place information are saved
Captures stay within the browser’s IndexedDB on the consumer’s gadget — not in a folder in your server by default.
Clearing website knowledge, utilizing personal mode, uninstalling the PWA, or Historical past → Clear all can wipe that library.
Advice: deal with IndexedDB as a working library. For keepers, use Obtain, Share, or Add to API.
Who it’s for
- Product groups including in-browser digicam seize to an online app
- Assist and ops groups accumulating quick video / audio proof
- Businesses delivering a ready-made seize utility to consumer websites
- Groups that want timed Sync clips with elective add
- Anybody who desires a self-contained HTML5 seize UI with out a construct step
The way it works
- Strive it — open
index.htmlthrough localhost or HTTPS and permit digicam / mic - Form it — zoom, decide an impact, tweak gadget controls, then seize Guide or Sync
- Browse it — evaluation takes in Historical past; obtain, share, or add when prepared
- Ship it — add the package deal; wire
api-config.jsprovided that you want uploads
Manufacturing websites want HTTPS. Localhost is sufficient for growth.
Technical Necessities
- No Node.js required to run the app or documentation.
- Internet server — serve over HTTPS (manufacturing) or localhost (growth). Digital camera / mic don’t work on plain
file://pages. - Browser APIs — trendy browser with
getUserMedia+MediaRecorder. Chrome and Edge give the fullest expertise; Firefox and Safari work with regular browser limits. - Elective file uploads — core seize is 100% client-side. In the event you allow Add to API, your server should settle for multipart POSTs, enable CORS from the CaptureKit origin, and set sufficient physique measurement limits. Prolong CSP
connect-srcwhen the API is on one other host.
Infrastructure price warning
CaptureKit itself does not invoice you for storage or bandwidth. In the event you allow Add to API and retailer information in your host, S3, or a CDN, you (the customer) pay these exterior infrastructure prices. Plan capability earlier than enabling uploads in manufacturing.
Browsers
Works in trendy browsers. Chrome and Edge give the smoothest expertise. Firefox and Safari are supported with regular media / codec limits. System controls and {hardware} zoom fluctuate by digicam and OS.
License readability
Your Envato buy covers CaptureKit. Bundled property (Bootstrap Icons, Share Tech) are free and open-source — you don’t want to purchase further industrial licenses to make use of what’s included. See CREDITS.md.
CaptureKit | HTML5 Media Seize Utility — Guide & Sync seize, zoom & results, sensible digicam controls, native historical past, elective API add, and PWA set up — prepared for patrons.
