Webcam Lighting & Framing Analyzer: Code Examples

Three diagnostics — lighting balance, face framing, and resolution. All analysis runs locally. No frames uploaded.

ZERO UPLOAD · ALL LOCAL
  1. Click "Enable Camera" and allow access in the browser prompt — no frames are recorded or uploaded.
  2. Select "Lighting Check" to see the live balance score. Below 15% is GOOD; above 35% is BAD. Adjust your lighting setup and watch the score update in real time.
  3. Select "Framing Guide" to see face detection overlays. Position yourself so the distance verdict reads "Good" and your face is horizontally centered.
  4. Align your eyes to the upper third guide line for standard video-call framing (rule of thirds).
  5. Select "Resolution & FPS" to read the actual resolution and frame rate your camera is currently delivering to the browser.

Camera access is required to run any diagnostic. Access is used only for local analysis — no frames are recorded or transmitted.

Camera active — select a diagnostic below
Diagnostic Modes
LEFT LIGHTING BALANCE RIGHT
L R
LEFT avg RIGHT avg

Top
Bottom
Left
Right
Resolution
FPS
Aspect Ratio

Webcam + Ring Light Setup

A webcam and ring light used together address the two main video call quality problems simultaneously: framing from the camera, and lighting from the ring. The ring light collapses the lighting balance score by providing symmetric on-axis illumination directly around the lens.1 Your face receives equal fill light from both sides, and the score typically drops below 10%. Understanding how the two components interact - optimal ring diameter for your desk distance, lens positioning within the ring, and colour temperature alignment - lets you get maximum value from the combination without hardware guesswork.2

Positioning the webcam lens inside the ring for on-axis illumination

The lens must sit in or very near the centre of the ring opening for the on-axis illumination advantage to work.1 When the camera clips beside the ring rather than through it, the ring becomes a side light rather than an on-axis fill, and the lighting balance score behaves like a directional lamp rather than a ring light. Most dedicated ring light stands include a central phone or webcam mount that positions the lens inside the ring opening directly.3

Confirm the lens position while watching this tool's lighting balance score with the ring light on. Move your head gently left and right while observing the score: if the score stays low, below 10%, regardless of the head position shift, the ring is providing near-symmetric on-axis illumination. If the score increases significantly when you move your head to one side, the ring is not centred on the lens axis and illuminates one side of the face more than the other.

Confirm centring before judging brightness

A bright ring can still create an uneven score if it sits beside the lens instead of around it. Use the preview to confirm the lens position first, then adjust brightness only after the ring is centred. A ring that is off-centre by even a few centimetres shifts the on-axis advantage to one side of your face, producing a score that reads WARN or BAD despite the high overall brightness, so always verify the physical alignment before touching the brightness dial.

If you cannot centre the lens perfectly because of mount hardware constraints, the next best option is to angle the ring light slightly so its brightest output points toward the lens rather than straight at your face. A 5-10 degree tilt toward the camera redistributes the light more evenly across both sides of the face and can recover a GOOD score even when the physical centring is slightly off. Check the score while adjusting the tilt in small increments until you find the minimum value.

Selecting ring diameter for your desk distance and camera setup

Ring light diameter affects illumination softness and coverage at a given working distance.4 A 12" ring at 50 cm produces moderately soft, focused light that works well at close desk setups. At 80 cm, the same 12" ring produces slightly harder illumination. An 18" ring at 80 cm maintains softer, more flattering light at that distance because the larger diameter subtends a wider angle relative to the subject.5

Wide-FOV cameras and ring light hardware in frame

Cameras with 90° or wider fields of view capture enough of the scene to include the ring light stand and hardware in the frame at close distances.6 At under 50 cm with a wide-FOV camera, the ring structure becomes visible at the frame edges. Use this tool's framing guide to check whether the ring light hardware appears at the edge of the captured scene. If it does, either increase working distance or switch to a narrower FOV setting in your webcam software.

When the ring light should not be the only light source

Using a ring light as the sole light source in a completely dark room produces a flat, uniform look where facial shadows are almost entirely absent. The result reads as artificially bright without the natural shadow variation that gives faces dimension. This is acceptable for product demonstration videos where even lighting is the goal, but for conversational video calls and streaming, some ambient light in the room produces a more natural appearance.

Leave the room's normal ambient lighting on at a reduced level; not full brightness, but not completely off. The ring light dominates the exposure as the primary source, while the ambient light adds background separation and prevents the full-dark background that makes the face look isolated.7 Check the framing and preview in this tool with both the ring light and ambient lights active to confirm the combined look before committing to a session setup.

Balance the ring with ambient light

If the background stays completely dark, reduce the ring brightness slightly or leave a low ambient light on behind the subject. This keeps the face evenly lit while giving the call a more natural sense of depth. A dim desk lamp behind you or a window with a partially closed blind provides just enough background illumination to separate your silhouette from the wall, which prevents the floating-head effect that occurs when a bright ring light illuminates the face but leaves the background in total darkness.

Notes

The ring light works correctly only when the webcam lens is positioned in or very near the centre of the ring opening. Off-centre placement - the camera positioned beside the ring rather than inside it - eliminates the on-axis illumination advantage. Most ring light stands include a phone or camera mount that clips to the ring centre. Dedicated webcam ring light stands position the lens in the ring hole directly.

Ring diameter interacts with desk distance. A 12" ring at 50 cm produces reasonably even illumination with moderate intensity. At 80 cm, the same ring loses some softness and the catchlight in the eyes becomes smaller. An 18" ring at 80 cm produces softer, more even illumination than the 12" ring at the same distance.

Colour temperature matching prevents the mixed-light colour cast that undermines otherwise well-balanced lighting. If the room has warm overhead lighting (2700–3000K) and the ring light is daylight-balanced (5600K), the warmer half of your face - lit more by the overhead light - will look different in colour from the ring-lit half. Setting the ring light to match the dominant ambient source resolves this. The lighting balance score in this tool is the feedback mechanism for the entire combination - adjust ring position, distance, and temperature while watching the score update in real time.

Examples

Razer Kiyo (ring light built in)

Built-in ring; lens centred in ring by design; no positioning adjustment needed

The Kiyo's built-in ring positions the lens on-axis automatically. Adjust the brightness dial to target a score below 10%.

External 14" ring at standard desk distance (70 cm)

Ring mounted on stand behind monitor; webcam clipped at ring centre

Verify the lens is positioned in the ring centre, not to the side. The score should drop to single digits with the ring as the primary source.

Ring positioned too close (20 cm from face)

Ring at 20 cm overexposes highlights on nose and forehead; score reads GOOD but image is flat and overlit

Move the ring to 50–70 cm for softer illumination. A good balance score does not mean optimal lighting quality.

Try in the tool

What to look for

  • 12"-18" for most desk setups
  • 50-70 cm from the face
  • below 10% once the lens is centered in the ring
  • warm overhead light (2700-3000K) vs daylight-balanced rings (5600K)

A GOOD balance score does not by itself mean optimal lighting quality; a ring placed too close (around 20 cm) can overexpose highlights while still reading GOOD.

Verify with the Webcam Lighting & Framing Analyzer tool.

Try it in the tool ↑
Sources
  1. 1.

    Wikipedia, "Ring flash," en.wikipedia.org, accessed June 2026. https://en.wikipedia.org/wiki/Ring_light

  2. 2.

    Adobe, "Understand white balance in filmmaking," adobe.com, accessed June 2026. https://www.adobe.com/uk/creativecloud/video/discover/white-balance.html

  3. 3.

    Razer, "Gaming Camera for Streaming - Razer Kiyo Webcam," razer.com, accessed June 2026. https://www.razer.com/streaming-cameras/razer-kiyo

  4. 4.

    Wikipedia, "Hard and soft light," en.wikipedia.org, accessed June 2026. https://en.wikipedia.org/wiki/Soft_light

  5. 5.

    Elgato, "Ring Light | Pro Circular LED Lighting," elgato.com, accessed June 2026. https://www.elgato.com/us/en/p/ring-light

  6. 6.

    Logitech Support, "Specification - 4K Pro Webcam," support.logi.com, accessed June 2026. https://support.logi.com/hc/en-us/articles/4402711296791-Specification-4K-Pro-Webcam

  7. 7.

    Craig Beckta, "How to Mix Ambient Light and Fill-Flash for Outdoor Portraits," digital-photography-school.com, accessed June 2026. https://digital-photography-school.com/how-to-mix-ambient-light-and-fill-flash-for-outdoor-portraits/

FAQ

Dual-Monitor Webcam Setup

Dual-monitor setups present specific webcam positioning challenges that single-monitor desks do not. Camera position relative to the primary monitor - on top of it, between monitors, or to the side - directly affects eye contact quality, framing symmetry, and camera angle.1 Each placement option involves trade-offs between eye contact, framing, and practical cable management. This tool's face detection overlay and framing guide verify whether your chosen camera position produces professional framing before your next call.

Mounting the camera on the primary monitor: eye contact and framing benefits

Placing the webcam on top of the primary monitor, centred on its width, puts the camera as close as possible to the eye position you maintain while reading content on screen. This reduces the angular offset between looking at the camera and looking at content, the root cause of the "looking slightly off to the side" appearance that viewers notice in video calls.2 When the camera is on the primary monitor and your content is also on the primary monitor, the eye contact direction is nearly correct rather than substantially offset.1

The framing guide in this tool shows the horizontal offset between your face centre and the frame centre. When mounted correctly above the primary monitor, this offset should be close to zero. A significant face-centre offset in this tool, despite a centred camera mount position, indicates the camera is not actually above the primary monitor or is tilted asymmetrically. Adjust the camera's pan angle while watching the face position in the framing overlay.

Verify eye contact from your normal screen position

Sit where you normally read content, then look between the camera and your primary monitor. If the gaze shift feels small and the face stays centred in the tool, the mount position is working for normal call behaviour. The key test is whether you can glance at your primary screen without your eyes visibly shifting away from the camera lens; if the angular offset is small enough that viewers cannot detect the difference, the mount is in the right place.

If your primary monitor is on an adjustable arm, re-check the camera position after any height change. Raising or lowering the monitor moves the camera with it, which can shift the framing from centred to off-centre and change the camera angle from level to downward or upward. A quick verification in this tool after repositioning your monitor catches these silent drifts before they appear on a live call.

Why camera placement between monitors creates eye contact problems

Positioning the camera in the gap between two monitors places it at the geometric centre of the combined desk width, which seems intuitive. The practical problem is that your eyes shift between monitors throughout the call, and each time you read content on a specific monitor, you are looking away from the camera by the width of half a monitor or more. Viewers see these lateral gaze shifts as a recurring look-away pattern that reduces perceived engagement.

The secondary problem: incorrect camera height at the gap

The gap between two monitors sits at bezel height, which varies from model to model. If your two monitors are different heights or on stands of different heights, the gap is not at eye level. A camera in the gap at below-eye level points upward toward the face, producing a low camera angle that is unflattering and increases visible neck and ceiling.3 Check with this tool whether the face-to-frame ratio and headroom are in range from this position, or whether repositioning to the primary monitor top resolves both problems.

Secondary monitor arm setups: resolving the downward angle problem

When one monitor is mounted on a height-adjustable arm and positioned higher than the other, placing the camera above that monitor creates a downward camera angle. The camera points toward the desk surface and the framing shows too much headroom above the face with too little visible at the bottom of the frame. This downward angle makes the chin more prominent and reduces eye contact quality.

Lowering the secondary monitor arm until the camera sits at eye level resolves the angle problem. The face then appears in the frame with eyes near the upper third of the frame and headroom in the 10–20% range.4 Use this tool's framing guide to verify the headroom percentage after adjusting the arm height, and confirm the eye position relative to the upper-third line. If the arm cannot go low enough to bring the camera to eye level, mount the camera on the primary monitor instead and remove it from the secondary monitor position entirely.

Choose primary monitor placement when height cannot be matched

A slightly imperfect position above the primary monitor usually beats a perfectly centred camera in the monitor gap, because eye contact and camera height both stay closer to normal call behaviour. Use the framing guide after moving the mount so the face remains centred and the headroom stays in range. The reason is simple: viewers care more about whether you appear to be looking at them than whether the camera is geometrically centred on the desk, and a primary-monitor mount keeps the gaze offset small enough that most people never notice.

Notes

Camera on top of the primary monitor is the standard dual-monitor recommendation. The camera is close to where you look when reading content, minimising the eye contact gap between looking at the camera and looking at screen content. The face framing guide in this tool shows whether the camera is centred on the primary monitor or slightly offset due to bezel width.

Camera between the two monitors creates a centre-of-desk position that can seem intuitively correct but produces eye contact problems. Your eyes shift left and right between screens during calls, and viewers see these side glances as a repeated gaze offset. Additionally, the gap between monitors is rarely at eye level - it tends to be at bezel height, which may be above or below eye level depending on monitor size and stand height.

Camera above a secondary monitor - when the secondary monitor is to the side and higher due to a monitor arm - creates a downward camera angle that produces the looking-down framing problem. The downward angle places excessive headroom above the head and shows the top of the desk. Bringing this camera to eye level resolves the angle problem. Eye contact quality also degrades with lateral camera offset from your primary screen - a camera 30 cm to the left of your primary monitor means you are always looking 30 cm to the right of the camera when reading content.

Examples

Camera on primary monitor (standard)

Camera centred on primary monitor's top edge, at or slightly above eye level

Best eye contact quality; slight upward or straight angle; use framing guide to centre face in frame.

Camera between monitors (gaze off-centre)

Camera in the gap between two monitors; eye contact requires looking directly at the gap while reading

Eye contact during content viewing is poor; the camera angle may be low if the gap falls below eye level. Check with this tool.

Camera above secondary monitor (elevated angle)

Camera mounted on monitor arm above secondary display; angled downward to frame the face

Downward angle reduces effective headroom. Lowering camera to eye level resolves this - check with the framing guide.

Try in the tool

What to look for

  • top of the primary monitor, centered on its width
  • 10-20% of frame height
  • close to zero

A camera placed in the gap between two monitors is rarely at eye level and creates a repeated side-glance pattern as your eyes shift between screens.

Verify with the Webcam Lighting & Framing Analyzer tool.

Try it in the tool ↑
Sources
  1. 1.

    Microsoft Support, "Tips for presenting in large meetings and events in Microsoft Teams," support.microsoft.com, accessed June 2026. https://support.microsoft.com/en-us/teams/meetings/tips-for-presenting-in-large-meetings-and-events-in-microsoft-teams

  2. 2.

    OSHA, "eTools: Computer Workstations - Workstation Components - Monitors," osha.gov, accessed June 2026. https://www.osha.gov/etools/computer-workstations/components/monitors

  3. 3.

    Laura E. Thomas and Daniel Pemstein, "What you see is what you get: webcam placement influences perception and social coordination," Frontiers in Psychology, 2015. https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2015.00306/full

  4. 4.

    Adobe, "How to use, and break, the rule of thirds," adobe.com, accessed June 2026. https://www.adobe.com/creativecloud/photography/technique/rule-of-thirds.html

FAQ