The latest articles on DEV Community by Roshani (@roshyy). https://dev.to/roshyy https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3994482%2Fd404ce8f-04a2-40b7-94eb-64de9765f45d.png https://dev.to/roshyy en Roshani Sat, 20 Jun 2026 18:29:28 +0000 https://dev.to/roshyy/i-built-a-free-browser-based-photobooth-with-react-and-opencv-4c1c https://dev.to/roshyy/i-built-a-free-browser-based-photobooth-with-react-and-opencv-4c1c <p>Whee Photobooth — a free, browser-based photobooth where you can pick a photo strip template, capture photos with your webcam, apply filters, doodle on your strip, and download the result. No app, no signup.</p> <p>🔗 <strong>Live site:</strong> <a href="">wheephotobooth.site</a><br> 💻 <strong>Frontend repo:</strong> <a href="">https://github.com/Roshaniiii/whee-photobooth</a><br> 💻 <strong>Backend repo:</strong> <a href="">https://github.com/Roshaniiii/whee-photobooth-api</a></p> <h2> <strong>Tech Stack</strong> </h2> <p>Frontend: React + Vite, deployed on Vercel<br> Backend: FastAPI, deployed on Render<br> Image processing: OpenCV for face-detection-based filters (blush, cat ears), plus canvas-based CSS filters on the frontend for things like vintage and grayscale effects</p> <h2> <strong>How the Filters Work</strong> </h2> <p>The backend uses Haar Cascade classifiers to detect faces and eyes in real time. Once detected, I calculate cheek/face positions and overlay transparent PNG assets (like a blush mark or cat ears) using alpha-channel compositing. The frontend sends a base64-encoded frame to the API, the backend processes it with OpenCV, and sends back the filtered image.<br> For lighter effects (vintage, grayscale, warm tones), I went with pure CSS filters and canvas pixel manipulation instead — much faster and doesn't need a server round-trip.<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Famtby10kh5v99dqw60w2.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Famtby10kh5v99dqw60w2.png" alt="Camera page with filter applied" width="411" height="667"></a></p> <h2> <strong>Building the Photo Strip Templates</strong> </h2> <p>Each template has a transparent PNG overlay with defined "slots" (x, y, width, height) where captured photos get drawn on a canvas. The template image draws on top, so decorations sit naturally over the photos without any clipping tricks.<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1qqunf3u3kkotzsz3tlg.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1qqunf3u3kkotzsz3tlg.png" alt="Template selection page" width="800" height="460"></a></p> <h2> <strong>What's Next</strong> </h2> <p>I'm planning to add more templates and possibly a way to save/share strips with a shareable link. Would love any feedback on the UX or the build — feel free to check it out!</p> webdev react python showdev