How to retrieve the videocard name/model of the computer from the browser with JavaScript

The videocard description can be retrieved in the browser with JavaScript through the WEBGL_debug_renderer_info extension of WebGL, this extension is part of the WebGL API and exposes two constants with information about the graphics driver for debugging purposes. Depending on the privacy settings of the browser, this extension might only be available to privileged contexts. Generally, the graphics driver information should only be used in edge cases to optimize your WebGL content or to debug GPU problems.

The WebGLRenderingContext.getParameter() method allows you to detect which features are supported and the failIfMajorPerformanceCaveat context attribute lets you control if a context should be returned at all, if the performance would be dramatically slow. The following method follows the mentioned logic and returns an object (when available), with the information that you need on the renderer property:

/**
 * A very simple method to retrieve the name of the default videocard of the system
 * using webgl.
 * 
 * @see https://stackoverflow.com/questions/49267764/how-to-get-the-video-card-driver-name-using-javascript-browser-side
 * @returns {Object}
 */
function getVideoCardInfo() {
    const gl = document.createElement('canvas').getContext('webgl');

    if (!gl) {
        return {
            error: "no webgl",
        };
    }
    
    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

    if(debugInfo){
        return {
            vendor: gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL),
            renderer:  gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL),
        };
    }

    return {
        error: "no WEBGL_debug_renderer_info",
    };
}

You can simply call the method and you will get the available information, you may need check for errors as well:

let data = getVideoCardInfo();

if(data.hasOwnProperty("error")){
    // Display error in the console
    console.log(data.error);
}else{
    // Display information
    console.log(data);
}

If everything went as expected, you will see in the console a simple object with 2 properties:

{
  "vendor": "Google Inc.",
  "renderer": "ANGLE (NVIDIA GeForce GTX 1050 Direct3D11 vs_5_0 ps_5_0)"
}

In our case we have an NVIDIA GeForce GTX 1050ti that you can see in the mentioned object. The vendor property will normally output the name of the company that owns the browser (Google Inc. for Firefox and Chrome or Microsoft for Edge). This little function works in all recent browsers.

Happy coding !