Aprende a obtener el modelo de tarjeta de video con JavaScript directamente desde el navegador sin ninguna libreria para extensiones de navegador.

La descripción de la tarjeta de video se puede recuperar en el navegador con JavaScript a través de la WEBGL_debug_renderer_infoextensión de WebGL, esta extensión es parte de la API de WebGL y expone dos constantes con información sobre el controlador de gráficos para fines de depuración. Dependiendo de la configuración de privacidad del navegador, es posible que esta extensión solo esté disponible para contextos privilegiados. Generalmente, la información del controlador de gráficos solo debe usarse en casos extremos para optimizar su contenido WebGL o para depurar problemas de GPU.

El método WebGLRenderingContext.getParameter() le permite detectar qué funciones son compatibles y el failIfMajorPerformanceCaveatatributo de contexto le permite controlar si se debe devolver un contexto, si el rendimiento sería dramáticamente lento. El siguiente método sigue la lógica mencionada y devuelve un objeto (cuando está disponible), con la información que necesita sobre la propiedad renderer:

/**
 * Un método muy simple para recuperar el nombre de la tarjeta de video predeterminada del sistema
 * usando 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",
    };
}

Simplemente puede llamar al método y obtendrá la información disponible, es posible que también necesite verificar si hay errores:

let data = getVideoCardInfo();

if(data.hasOwnProperty("error")){
    // Mostrar error en la consola
    console.log(data.error);
}else{
    // Mostrar información
    console.log(data);
}

Si todo salió como se esperaba, verá en la consola un objeto simple con 2 propiedades:

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

En nuestro caso tenemos una NVIDIA GeForce GTX 1050ti que puedes ver en el objeto mencionado. La propiedad del proveedor normalmente mostrará el nombre de la empresa propietaria del navegador (Google Inc. para Firefox y Chrome o Microsoft para Edge). Esta pequeña función funciona en todos los navegadores recientes.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores