Photo Booth Online

How the Photo Booth works

Photo booth online: how it works

This is the Photo Booth app that shipped with every Mac, rebuilt with nothing but browser APIs. getUserMedia opens the camera, each frame is uploaded to a WebGL texture, and a small fragment shader per effect decides what colour every pixel ends up. The eighty effects are sorted into five tabs, sixteen each — Colour, Retro & Art, Warp, Motion and Special — in a column beside the video on a wide screen and below it on a phone, and the thumbnails in the open tab are the same shaders drawn at a quarter of the size from the same frame, so what you see in the grid is exactly what you get when you click it.

Why the effects are shaders and not filters. The colour effects — sepia, black and white, thermal, X-ray, pop art, comic, glow, pixelate, VHS, posterize, duotone, cross process, vintage, night vision, cyanotype and the rest — could be done with CSS filters or by looping over ImageData in JavaScript. The geometric ones cannot: kaleidoscope, fisheye, squeeze, stretch, twirl, bulge, pinch, ripple, wave, tunnel, spiral, shatter, infinite zoom and the light tunnel move pixels rather than recolour them, and each output pixel has to look up where in the source it came from. Doing that lookup in JavaScript for 307,200 pixels thirty times a second stalls on an integrated GPU laptop; doing it in a fragment shader is essentially free because the GPU runs all the pixels at once. Since the geometric effects needed WebGL anyway, the colour effects use it too, so there is one pipeline and no special cases.

Motion effects and the feedback texture. Every effect on the Motion tab — Trails, Echo, Slow Shutter, Ghost, Strobe, Motion Blur, Time Split, Time Warp, Difference, Onion Skin, Lag, Stutter, Smear, Long Exposure, Chroma Trail and Afterimage — plus Datamosh, Heat Map and Terminal need to know what the last frame looked like, which a plain shader cannot see. So every frame the tool first blends the new camera frame into a second texture at fifteen percent, then copies the result back with copyTexImage2D. That texture is a slowly fading history of everything the camera has seen; Trails keeps the brightest pixel from history and now, Echo puts the live red channel over the historic green and blue, Slow Shutter shows only the history, Difference and Heat Map light up only where the two disagree, Onion Skin draws where you were in red and where you are in blue, Time Split puts live on the left and history on the right, and Datamosh compares the two and smears blocks wherever they differ. Stand still and they all look like Normal; wave a hand and the difference is obvious.

The Special tab. Matrix Rain, Cyberpunk, Hologram, Predator, Point Cloud, Wireframe, Datamosh, Terminal, Heat Map, FLIR, Security Cam, Old TV, Night Sky, Mosaic Tiles, Lego and Blueprint do not just recolour or bend the picture, they rebuild it. Matrix Rain divides the frame into glyph cells, gives each column a falling speed, and lights the glyphs by how bright the camera is behind them, so your silhouette reads through the code. Wireframe treats brightness as height and draws a perspective grid over it. Point Cloud replaces the picture with dots that grow and drift with brightness. Terminal is an amber phosphor screen whose glyphs decay through the feedback texture, so movement leaves a burn-in. FLIR is a thermal-camera ironbow palette with the crosshair and corner brackets, Old TV bends the frame onto a curved rounded tube with a rolling bar and static, Lego snaps the picture to studded bricks and Blueprint pulls the edges out as white lines on a gridded blue sheet. They are all still one fragment shader each, which is why they run at the same frame rate as Sepia.

The Mirror toggle, and why it is on by default. A camera shows you the way other people see you, which feels wrong when you are looking at a screen and moving. Photo Booth, FaceTime and every video call app flip the preview so it behaves like a mirror, and this tool does the same. The flip is applied to the camera frame before the effect runs, so Pop Art's four tiles stay in the same corners and the Kaleidoscope's wedge stays where it is; only the picture inside is reversed. Turn Mirror off to save a photo that reads the right way round — text on a t-shirt is the usual reason.

The confusing part: your snap and your recording are not the same size as the preview. The canvas is the camera's native resolution, typically 640 × 480 or 1280 × 720, and the page scales it to fit the column. A snap is the full-resolution frame; a recording is that same canvas captured at up to 30 frames per second. Neither is a screenshot of the page, so the thumbnails, buttons and any browser chrome are never in the output — but equally, the picture in the file may be larger or smaller than the preview you were looking at, and it is always the camera's aspect ratio, never the column's.

Recording, sound and what comes out. Record uses canvas.captureStream to turn the effect canvas into a video track, adds your microphone track alongside it, and hands both to MediaRecorder. The output is WebM with VP9 and Opus where the browser supports them, VP8 otherwise, at roughly 4 Mbps — about 30 MB per minute. Every current browser, VLC, YouTube and every editor released this decade opens it; if something insists on MP4, remux locally with ffmpeg -i in.webm -c copy out.mp4 rather than re-encoding. The microphone is requested together with the camera when you press Start; refuse it and the tool falls back to video only and says so in the status line.

Performance. The main canvas draws every frame; the thumbnails in the open tab are redrawn one per frame in rotation, and the hidden tabs are not drawn at all, which keeps a 2019 integrated GPU at 30 fps at 640 × 480 and a phone from throttling. Glow and Oil Paint are the most expensive, sampling 25 points per pixel; if the preview stutters on an older machine, choosing a different effect fixes it because the thumbnails cost the same regardless. Closing the tab or pressing Reset stops the camera light immediately.

Related tools