How does online assessment tools detect "Multiple Monitors" with JavaScript

In today’s digital world, many users work with multiple monitors to enhance productivity. Detecting multiple monitors in JavaScript can be useful for applications like online assessments, gaming setups, or workspace management. However, there isn’t a straightforward API for this across all browsers. In this article, we will explore multiple ways to detect whether a laptop is connected to multiple monitors and provide a reusable JavaScript function along with a React hook for developers.

Why Detect Multiple Monitors?

Some online platforms or interview assessment tests, want to ensure users are not using multiple monitors to access unauthorized resources. Additionally, applications that offer multi-screen experiences can optimize UI placement based on screen configurations.

Methods to Detect Multiple Monitors in JavaScript

Since JavaScript does not have a direct API that universally supports multi-monitor detection, we have to use a combination of techniques.

1. Using window.screen Properties

The window.screen object provides useful information about the screen dimensions.

function detectMultipleMonitors() {
    return window.screen.availWidth > window.screen.width;
}

console.log(detectMultipleMonitors());        

How it works: If the availWidth (total available screen width) is greater than screen.width (current screen width), another monitor is likely connected.

2. Using window.screenLeft and window.screenTop

These properties can help determine if the browser window is on a different display.

function isMultiMonitor() {
    return window.screenLeft !== 0 || window.screenTop !== 0;
}

console.log(isMultiMonitor());        

How it works: If the browser window’s left or top position is different from 0, it indicates multiple displays.

3. Using window.matchMedia API (Experimental)

Some browsers support detecting external displays via media queries.

function detectExternalDisplays() {
    return window.matchMedia('(display-mode: extended)').matches;
}

console.log(detectExternalDisplays());        

How it works: This checks if the display mode is set to “extended,” which typically indicates multiple monitors.

4. Using window.screen.isExtended (Experimental Feature)

Newer versions of Chromium-based browsers introduce isExtended, which directly checks for multiple monitors.

function detectMultiMonitorExperimental() {
    return 'isExtended' in window.screen ? window.screen.isExtended : false;
}

console.log(detectMultiMonitorExperimental());        

Why this is not widely used: This feature is experimental and is only available in certain browsers under specific conditions.

Creating a Reusable JavaScript Function

To make this solution widely usable, we can combine multiple methods into a single function.

function detectMultipleMonitors() {
    if ('isExtended' in window.screen) {
        return window.screen.isExtended;
    }
    return (
        window.screen.availWidth > window.screen.width ||
        window.screenLeft !== 0 ||
        window.screenTop !== 0 ||
        window.matchMedia('(display-mode: extended)').matches
    );
}

console.log(detectMultipleMonitors());        

Building a React Hook

For React-based applications, we can encapsulate the logic in a hook to allow dynamic detection of multiple monitors.

import { useState, useEffect } from "react";

function useMultiMonitor() {
    const [isMultiMonitor, setIsMultiMonitor] = useState(false);

    useEffect(() => {
        const checkMultiMonitor = () => {
            setIsMultiMonitor(
                ('isExtended' in window.screen && window.screen.isExtended) ||
                window.screen.availWidth > window.screen.width ||
                window.screenLeft !== 0 ||
                window.screenTop !== 0 ||
                window.matchMedia('(display-mode: extended)').matches
            );
        };

        checkMultiMonitor();
        window.addEventListener("resize", checkMultiMonitor);

        return () => {
            window.removeEventListener("resize", checkMultiMonitor);
        };
    }, []);

    return isMultiMonitor;
}

export default useMultiMonitor;        

Usage in a React Component:

import React from "react";
import useMultiMonitor from "./useMultiMonitor";

const MultiMonitorCheck = () => {
    const isMultiMonitor = useMultiMonitor();
    return <div>Multiple Monitors: {isMultiMonitor ? "Yes" : "No"}</div>;
};

export default MultiMonitorCheck;        

Code in Github : https://github.com/machirajusaisandeep/detect-multiple-monitor

Conclusion

Detecting multiple monitors in JavaScript can be challenging due to limited browser support for certain APIs. However, by combining different techniques, we can achieve a reasonably accurate solution. We have provided a reusable JavaScript function and a React hook that can be integrated into web applications to determine if a user is connected to multiple monitors.

Stay updated with more frontend development insights at: https://advancedwebdev.substack.com/

https://www.youtube.com/channel/UCgzAaqAQjS-FVveLQ0WZBCw