Case study Browser camera & canvas
Photobooth.
Public web app · Personal project
From a camera frame to a photo strip, in the browser.
A personal, public web app for capturing photos and assembling downloadable photo strips. The original repository records my implementation under the tedy69 account.
- My contribution
- I built a web photo booth with camera capture, photo-strip layouts, canvas stickers, and language selection.
- Stack
- Next.js · React · TypeScript · Fabric.js · Canvas
My role
Built the application, its camera and canvas utilities, strip templates, and language-selection flow.
How it works
Next.js hosts the React interface. Camera hooks acquire a browser media stream, Canvas captures frames, and Fabric.js composes photos, stickers, and strip exports.
What I built
- Built camera-frame capture and media-stream cleanup
- Added strip and grid layouts with canvas composition and image export
- Added sticker placement, background and frame controls, and translated interface strings
Decisions that mattered
- Separated camera acquisition and stream cleanup from the editing interface
- Calculated strip dimensions and image positions from the selected template
- Kept language selection in a shared provider with a saved browser preference
Tradeoffs and constraints
- Camera capture depends on browser permissions and device support
- The current source has a test-image fallback after camera failure; hardware capture and export were not revalidated in this portfolio review
Browser camera permissions · Canvas lifecycle · Image dimensions · Client-side composition
Delivered
Published source and a working public template showcase. The implementation includes camera capture, canvas editing, and photo-strip composition and export.