如何使用JavaScript从浏览器中检索计算机的视频卡名称/型号

通过WebGL的WEBGL_debug_renderer_info扩展, 可以使用JavaScript在浏览器中检索视频卡描述, 该扩展是WebGL API的一部分, 并公开了两个常量以及有关图形驱动程序的信息以用于调试。根据浏览器的隐私设置, 此扩展名可能仅对特权上下文可用。通常, 仅在极端情况下才应使用图形驱动程序信息来优化WebGL内容或调试GPU问题。

WebGLRenderingContext.getParameter()方法使你能够检测到支持哪些功能, 而failIfMajorPerformanceCaveat上下文属性使你可以控制是否应该完全返回上下文(如果性能会大大降低)。下面的方法遵循上述逻辑, 并返回一个对象(如果可用), 以及在renderer属性上所需的信息：

/**
 * 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", };
}

你只需调用该方法, 你将获得可用信息, 你可能还需要检查错误：

let data = getVideoCardInfo();

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

如果一切按预期进行, 你将在控制台中看到一个具有2个属性的简单对象：

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

在我们的案例中, 我们有一个NVIDIA GeForce GTX 1050ti, 你可以在上述对象中看到它。 vendor属性通常会输出拥有浏览器的公司名称(用于Firefox和Chrome的Google Inc.或用于Edge的Microsoft)。这个小功能可在所有最新的浏览器中使用。

编码愉快！