This was a fun project that I built the first version of in a few hours, on a whim. I have multiple extra monitors pointing down at my face that are empty real-estate while I participate in video calls, and I had been noticing that the light they cast actually has a subtle effect on the image captured by my webcam.
I was curious how much a difference it would make if I filled up my extra monitors with solid colors, so I built this app as a quick way to test out different fill styles and colors.
Spoiler: I made this for fun, and the end result was that, although it makes a small subtle difference, using OBS filters or buying a dedicated external light will make 100x the difference that this does. But it is still a fun experiment!
Where to Get It
🔗 App: displaylight.netlify.app
💾 Source code: github.com/joshuatz/light-screen
Demo
Features
- Multiple modes
- Ring Light
- LEDs
- Diffused LEDs
- Solid Ring
- Solid Full-Screen Fill
- Ring Light
- Camera preview
- Auto-hiding settings panel (can be turned off)
- Keeps screen on while in use
- Custom color picker, or use presets
- Works offline, and as a PWA
What I Used
- JavaScript (Vanilla)
- HTML, CSS
- Service Workers
- TypeScript (with JSDoc)
- HTML Canvas
