Building a QR Code Scanner in Next.js with html5-qrcode (Camera + Image Upload)

Building a QR code scanner for the browser sounds straightforward. Then you try it and hit three problems fast: Camera access requires specific permissions handling The scanning library manipulates the DOM directly — React doesn't like that Stopping the scanner at the wrong moment throws uncatchable errors I built a QR Code Scanner with camera feed and image upload support using html5-qrcode . Here's what I ran into and how I fixed each issue. Choosing html5-qrcode There are a few options for browser QR scanning: jsQR — pure JS, manual camera loop, no built-in UI ZXing — Java port, heavier bundle html5-qrcode — handles camera, file scanning, and UI scaffolding out of the box html5-qrcode won because it abstracts the camera permission flow and getUserMedia loop. Less code to own. npm install html5-qrcode Basic Architecture Two scan modes: image upload and live camera. Both use the same Html5Qrcode instance but different methods. import { Html5Qrcode } from " html5-qrcode " ; // Image sc