Your Browser is Pooped: Using Web Workers To Create A Browser-Based Barcode Scanner
summary
Demonstrates a 100% browser barcode scanner built with React/Vite/TypeScript that moves per-frame image work off the UI thread into web workers, using Navigator.mediaDevices → getUserMedia, drawing video frames to a canvas → imageData and posting that to worker threads. Uses a JS barcode library polyfill and transferable objects (canvas/image buffers). Demo shows CPU dropping from ~25% to ~9–13% after offload, works offline, with caveats around experimental APIs and Safari compatibility.
AI-written summary · about
chapters (11)
- 0:00Start
- 3:01Today's word of the day
- 4:22Browser breakdown
- 5:30The Render Process-composition
- 7:29How do we perceive main thread pauses?
- 11:02Creating a web based barcode scanner
- 11:25Real-world reasons for a web based scanner
- 16:19Library Polyfill
- 16:43Pseudocode
- 17:16Diagram - Load up the main thread
- 18:13Demo time
related talks
29mParallel computing in ReactJS: Provide a pleasant user experience
13mHow to Use Web Workers for Fun and Profit
53mLet the main thread breathe!
19mLet the Main Thread Breathe!
28mThe App-Changing Magic (and Joy) of Web APIs
24mWeb Workers - Little Minions At Work for Optimizing Performance
18mEscaping flatland: a romance of data science in the browser
26mTake on me, web browsers!