How I Built a No-App Photo Sharing Platform Using Just QR Codes and Browser Cameras
The Problem Last month, I was at a friend's wedding. 200 guests, all with smartphones, and the couple wanted one thing: a shared photo album everyone could contribute to without downloading anything. No app store. No sign-up. No "create an account to view these photos." Just point, shoot, and share. I looked at existing solutions. Google Photos shared albums require a Google account.…
Last month, a friend's wedding brought together 200 smartphone owners who all desired one thing: a shared photo album that didn't require downloading an app or signing up for an account. The challenge was obvious - existing solutions like Google Photos, The Guest app, WhatsApp groups, and Dropbox required either accounts, app installations, or poor image quality. Undeterred, I set out to create a novel solution: a web app that leveraged QR codes for instant access and the browser's camera API for photo capture.
The architecture was straightforward and reliable: the frontend utilized vanilla HTML, CSS, and JavaScript with the html5-qrcode library for scanning and the MediaDevices API for camera access. The backend, powered by Node.js and Express, handled file uploads via Multer. Photo storage was a simple local filesystem, with a cron job for purging old images after 30 days.
QR codes were generated server-side using the qrcode npm package, while deployment was handled by a $6/month DigitalOcean droplet running behind Nginx with SSL via Let's Encrypt.
Generating QR codes was simple using the qrcode package, but I learned a few things the hard way. Adjusting the error correction level was crucial, as well as balancing URL length against QR code density. Generating dynamic QR codes per event, rather than pre-generating them, ensured that each event had a unique URL with a short-lived token embedded for security.
The browser camera integration proved to be the most challenging part. The MediaDevices API provided powerful functionality, but its consistency across browsers and devices was inconsistent. I tackled the problem by setting up the camera with specific constraints, like using the back-facing camera and ideal resolution. To address the iOS Safari "green dot" paranoia and Android Chrome autofocus issues, I implemented a pulsing red camera active indicator and a one-shot autofocus trigger on tap-to-capture.
Displaying the photos captured by guests posed another challenge. Photos taken in portrait mode would appear rotated, which required server-side rotation based on the detected EXIF orientation data. While not the most elegant solution, it worked across all browsers.
The scanning functionality for hosts to moderate or link the guest-submitted QR codes was implemented using html5-qrcode. The process involved starting a scanner instance and handling the scanned QR code, ensuring that the captured photos could be reviewed and managed by the event host.
In the end, the no-app photo sharing platform I built provided a seamless, app-free experience for all guests, allowing them to simply point, shoot, and share their photos without any hassle.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — it may contain errors, so check the original before relying on it.
