Light Screen Display – Virtual Fill Light

  • report
    Disclaimer
    Click for Disclaimer
    This Project is over a year old (first published about 4 years ago). As such, please keep in mind that some of the information may no longer be accurate, best practice, or a reflection of how I would approach the same thing today.
  • infoFull Project Details
    info_outlineClick for Full Project Details
    Date Posted:
    Feb. 02, 2021
    Last Updated:
    Feb. 02, 2021
  • classTags
    classClick for Tags

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
  • 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

Leave a Reply

Your email address will not be published.