detect-features

Detect features

Detect and report browser and hardware features.

Demo

Live demo

Installation

Make sure you have Node.js installed.

 $ npm install detect-features

Usage

import { getFeatures } from 'detect-features';

(async () => {
  const features = await getFeatures();
})();

Example output

{
  "browserFeatures": {
    "browserType": {
      "browserName": "Chrome",
      "browserVersion": "86.0",
      "isAndroid": false,
      "isChrome": true,
      "isChromium": false,
      "isDesktop": true,
      "isEdge": false,
      "isFirefox": false,
      "isInternetExplorer": false,
      "isMobile": false,
      "isOpera": false,
      "isSafari": false,
      "isSamsungBrowser": false,
      "isTablet": false,
      "isUCBrowser": false,
      "isYandexBrowser": false,
      "isiOS": false
    },
    "isAnimationWorkletSupported": false,
    "isAudioWorkletSupported": true,
    "isBroadcastChannelSupported": true,
    "isCryptoSupported": true,
    "isFetchSupported": true,
    "isGamepadSupported": true,
    "isImageBitmapSupported": true,
    "isImageDecodeSupported": true,
    "isIndexedDBSupported": true,
    "isIntersectionObserverSupported": true,
    "isLayoutWorkletSupported": false,
    "isLocalStorageSupported": true,
    "isMutationObserverSupported": true,
    "isOffscreenCanvasSupported": true,
    "isPaintWorkletSupported": true,
    "isPerformanceNowSupported": true,
    "isPerformanceObserverSupported": true,
    "isRequestIdleCallbackSupported": true,
    "isServiceWorkerSupported": true,
    "isSessionStorageSupported": true,
    "isUserActivationSupported": true,
    "isWebAssemblySupported": true,
    "isWebAudioSupported": true,
    "isWebGL2Supported": true,
    "isWebGLSupported": true,
    "isWebPSupported": true,
    "isWebRTCSupported": true,
    "isWebSocketSupported": true,
    "isWebVRSupported": false,
    "isWebWorkerInlineSupported": true,
    "isWebWorkerSupported": true,
    "isWebXRSupported": true,
    "mediaFeatures": {
      "audio": {
        "MP3": true,
        "Ogg": true,
        "WAV": true
      },
      "video": {
        "HLS": false,
        "MP4": true,
        "Ogg": true,
        "WebM": true
      }
    },
    "webGL2Features": {
      "base": {
        "renderer": "WebKit WebGL",
        "rendererUnmasked": "Intel(R) Iris(TM) Graphics 6100",
        "shaderVersion": "WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)",
        "vendor": "WebKit",
        "vendorUnmasked": "Intel Inc.",
        "version": "WebGL 2.0 (OpenGL ES 3.0 Chromium)"
      },
      "general": {
        "aliasedLineWidthRange": "1,1",
        "aliasedPointSizeRange": "1,255.875",
        "alphaBits": 8,
        "antialias": true,
        "blueBits": 8,
        "depthBits": 24,
        "greenBits": 8,
        "maxCombinedTextureImageUnits": 80,
        "maxCubeMapTextureSize": 16384,
        "maxFragmentUniformVectors": 1024,
        "maxRenderBufferSize": 16384,
        "maxTextureImageUnits": 16,
        "maxTextureSize": 16384,
        "maxVaryingVectors": 15,
        "maxVertexAttributes": 16,
        "maxVertexTextureImageUnits": 16,
        "maxVertexUniformVectors": 1024,
        "maxViewportDimensions": "16384,16384",
        "precision": {
          "fragmentShaderHighPrecision": "127,127,23",
          "fragmentShaderLowPrecision": "127,127,23",
          "fragmentShaderMediumPrecision": "127,127,23",
          "vertexShaderHighPrecision": "127,127,23",
          "vertexShaderLowPrecision": "127,127,23",
          "vertexShaderMediumPrecision": "127,127,23"
        },
        "redBits": 8,
        "stencilBits": 8,
        "subPixelBits": 8
      },
      "extensions": {
        "maxAnisotropy": 16,
        "supportedExtensions": [
          "EXT_color_buffer_float",
          "EXT_disjoint_timer_query_webgl2",
          "EXT_float_blend",
          "EXT_texture_compression_rgtc",
          "EXT_texture_filter_anisotropic",
          "EXT_texture_norm16",
          "OES_texture_float_linear",
          "WEBGL_compressed_texture_s3tc",
          "WEBGL_compressed_texture_s3tc_srgb",
          "WEBGL_debug_renderer_info",
          "WEBGL_debug_shaders",
          "WEBGL_lose_context",
          "WEBGL_multi_draw",
          "WEBGL_video_texture"
        ],
        "compressedTextureASTCExtension": null,
        "compressedTextureATCExtension": null,
        "compressedTextureETC1Extension": null,
        "compressedTextureETCExtension": null,
        "compressedTexturePVRTCExtension": null,
        "compressedTextureS3TCExtension": {},
        "compressedTextureS3TCSRGBExtension": {}
      },
      "specific": {
        "max3DTextureSize": 2048,
        "maxArrayTextureLayers": 2048,
        "maxClientWaitTimeout": 0,
        "maxColorAttachments": 8,
        "maxCombinedFragmentUniformComponents": 249856,
        "maxCombinedUniformBlocks": 75,
        "maxCombinedVertexUniformComponents": 249856,
        "maxDrawBuffers": 8,
        "maxElementIndex": 4294967295,
        "maxElementsIndices": 150000,
        "maxElementsVertices": 1048575,
        "maxFragmentInputComponents": 128,
        "maxFragmentUniformBlocks": 15,
        "maxFragmentUniformComponents": 4096,
        "maxProgramTexelOffset": 7,
        "maxSamples": 8,
        "maxServerWaitTimeout": 0,
        "maxTextureLODBias": 16,
        "maxTransformFeedbackInterleavedComponents": 64,
        "maxTransformFeedbackSeparateAttribs": 4,
        "maxTransformFeedbackSeparateComponents": 4,
        "maxUniformBlockSize": 65536,
        "maxUniformBufferBindings": 75,
        "maxVaryingComponents": 60,
        "maxVertexOutputComponents": 128,
        "maxVertexUniformBlocks": 15,
        "maxVertexUniformComponents": 4096,
        "minProgramTexelOffset": -8,
        "uniformBufferOffsetAlignment": 256
      }
    },
    "webGLFeatures": {
      "base": {
        "renderer": "WebKit WebGL",
        "rendererUnmasked": "Intel(R) Iris(TM) Graphics 6100",
        "shaderVersion": "WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)",
        "vendor": "WebKit",
        "vendorUnmasked": "Intel Inc.",
        "version": "WebGL 1.0 (OpenGL ES 2.0 Chromium)"
      },
      "general": {
        "aliasedLineWidthRange": "1,1",
        "aliasedPointSizeRange": "1,255.875",
        "alphaBits": 8,
        "antialias": true,
        "blueBits": 8,
        "depthBits": 24,
        "greenBits": 8,
        "maxCombinedTextureImageUnits": 80,
        "maxCubeMapTextureSize": 16384,
        "maxFragmentUniformVectors": 1024,
        "maxRenderBufferSize": 16384,
        "maxTextureImageUnits": 16,
        "maxTextureSize": 16384,
        "maxVaryingVectors": 15,
        "maxVertexAttributes": 16,
        "maxVertexTextureImageUnits": 16,
        "maxVertexUniformVectors": 1024,
        "maxViewportDimensions": "16384,16384",
        "precision": {
          "fragmentShaderHighPrecision": "127,127,23",
          "fragmentShaderLowPrecision": "127,127,23",
          "fragmentShaderMediumPrecision": "127,127,23",
          "vertexShaderHighPrecision": "127,127,23",
          "vertexShaderLowPrecision": "127,127,23",
          "vertexShaderMediumPrecision": "127,127,23"
        },
        "redBits": 8,
        "stencilBits": 8,
        "subPixelBits": 8
      },
      "extensions": {
        "maxAnisotropy": 16,
        "maxDrawBuffers": 8,
        "supportedExtensions": [
          "ANGLE_instanced_arrays",
          "EXT_blend_minmax",
          "EXT_color_buffer_half_float",
          "EXT_disjoint_timer_query",
          "EXT_float_blend",
          "EXT_frag_depth",
          "EXT_shader_texture_lod",
          "EXT_texture_compression_rgtc",
          "EXT_texture_filter_anisotropic",
          "WEBKIT_EXT_texture_filter_anisotropic",
          "EXT_sRGB",
          "OES_element_index_uint",
          "OES_fbo_render_mipmap",
          "OES_standard_derivatives",
          "OES_texture_float",
          "OES_texture_float_linear",
          "OES_texture_half_float",
          "OES_texture_half_float_linear",
          "OES_vertex_array_object",
          "WEBGL_color_buffer_float",
          "WEBGL_compressed_texture_s3tc",
          "WEBKIT_WEBGL_compressed_texture_s3tc",
          "WEBGL_compressed_texture_s3tc_srgb",
          "WEBGL_debug_renderer_info",
          "WEBGL_debug_shaders",
          "WEBGL_depth_texture",
          "WEBKIT_WEBGL_depth_texture",
          "WEBGL_draw_buffers",
          "WEBGL_lose_context",
          "WEBKIT_WEBGL_lose_context",
          "WEBGL_multi_draw",
          "WEBGL_video_texture"
        ],
        "compressedTextureASTCExtension": null,
        "compressedTextureATCExtension": null,
        "compressedTextureETC1Extension": null,
        "compressedTextureETCExtension": null,
        "compressedTexturePVRTCExtension": null,
        "compressedTextureS3TCExtension": {},
        "compressedTextureS3TCSRGBExtension": {}
      }
    }
  },
  "browserSettings": {
    "isCookieEnabled": true,
    "isDoNotTrackEnabled": true
  },
  "hardwareFeatures": {
    "GPUTier": {
      "fps": 21,
      "gpu": "intel iris graphics 6100",
      "isMobile": false,
      "tier": 1,
      "type": "BENCHMARK"
    },
    "availableCPUCores": 4,
    "devicePixelRatio": 2,
    "endianness": "little"
  }
}

Support

Special care has been taken to make sure all browsers that support WebGL are also supported by detect-features including IE 11.

Licence

My work is released under the MIT license.