Polaroid Booth
By
@Aamina
- 2 Devlogs
- 2 Total hours
A simple website where you can take pictures just like in a polaroid booth!
Ship #1
Changes requested
I built Polaroid Booth, a browser-based photo booth app using HTML, CSS, and JavaScript that captures pictures from your webcam and turns them into realistic polaroid-style snapshots, complete with a white border and a randomly rotated tilt.
The trickiest part was handling the camera access and capture logic,getting the video feed to reliably render onto a canvas and convert into a clean image without lag or permission issues took some trial and error, along with fine-tuning the CSS rotation so the photos looked naturally scattered instead of just messy.
1h 22m 26s logged
DEVLOG #2
JavaScript (Vanilla):
Camera access via navigator.mediaDevices.getUserMedia(), drawing video frames to canvas, converting canvas to image, DOM manipulation, randomized rotation logic, download functionality
the cam is working yayayayayy!!
59m 50s logged
DEVLOG #1:
Worked on HTML and CSS:
Built the whole Polaroid Booth interface from scratch in a single HTML file.
The HTML sets up a retro camera viewfinder (element), a big red snap button, and a gallery wall where Polaroids pile up. In CSS I added a blue background, a camera module (rounded corners, shadows, a pressable button with a 3D click effect), and each Polaroid card gets its own random rotation via a CSS custom property (–rot) so the wall looks like a real messy photo table.
