# Detect features

![](http://img.badgesize.io/TimvanScherpenzeel/detect-features/master/dist/detect-features.min.js.svg?compression=gzip&maxAge=60)
[![dependencies](https://david-dm.org/timvanscherpenzeel/detect-features.svg)](https://david-dm.org/timvanscherpenzeel/detect-features)
[![devDependencies](https://david-dm.org/timvanscherpenzeel/detect-features/dev-status.svg)](https://david-dm.org/timvanscherpenzeel/detect-features#info=devDependencies)

Detect and report browser and hardware features.

## Demo

[Live demo](https://timvanscherpenzeel.github.io/detect-features/)

As part of general research I have ran the website on a wide variety of devices and browsers. The reported features of all of these devices can be found in the [data](https://github.com/TimvanScherpenzeel/detect-features/tree/master/data) folder.

I've also created various support tables from this data:
- [WebGL & WebGL2 support](https://gist.githubusercontent.com/TimvanScherpenzeel/f8efeeb1dbed38a5c5dc0c29768a0413/raw/8a33c6c01035237ebfaba4fef5ce59f6b9feac8c/support-table-webgl1-webgl2.md)
- [WebGL extensions](https://gist.githubusercontent.com/TimvanScherpenzeel/2a604e178013a5ac4b411fbcbfd2fa33/raw/7f225bb9fabc2af1761ddbea296ab13913ff536a/support-table-webgl-extensions.md)
- [WebGL2 extensions](https://gist.githubusercontent.com/TimvanScherpenzeel/314b344253ef992cf6da2b876fadb4d7/raw/8cb98b389dda9f63a843eb72a33084d5ae737ae2/support-table-webgl2-extensions.md)
- [Device pixel ratio](https://gist.githubusercontent.com/TimvanScherpenzeel/a95b431336dfe1e0ec8fd9c5725f84c0/raw/8c397f18a240b510580e104e444d380d0d8bd454/support-table-device-pixel-ratio.md)
- [Compressed texture support](https://gist.github.com/TimvanScherpenzeel/3725c63bb41c9d7c92a76068dbd78d89)
- [GPU vendor & GPU renderer](https://gist.github.com/TimvanScherpenzeel/eb296c564ef592883472eec8291b078e)

## Usage
```javascript
  DetectFeatures.register({
      log: true,
      element: document.getElementById('app'),
  });
```

## Installation

Make sure you have [Node.js](http://nodejs.org/) installed.

```sh
 $ npm install
```

## Development

```sh
$ npm start

$ npm run serve

$ npm run lint

$ npm run build
```

## Reported features
```json
{
  "browserFeatures": {
    "browserType": {
      "isMobile": false,
      "isTablet": false,
      "isDesktop": true,
      "isAndroid": false,
      "isiOS": false,
      "isChrome": true,
      "isFirefox": false,
      "isSafari": false,
      "isEdge": false,
      "isInternetExplorer": false,
      "isOpera": false,
      "isUCBrowser": false,
      "browserName": "Chrome",
      "browserVersion": "69.0.3497.100",
      "browserMajorVersion": "69",
      "browserEngineName": "WebKit",
      "browserEngineVersion": "537.36",
      "deviceVendor": "",
      "deviceModel": "",
      "operatingSystemName": "Mac OS",
      "operatingSystemVersion": "10.13.6"
    },
    "isBroadcastChannelSupported": true,
    "isFetchSupported": true,
    "isGamepadSupported": true,
    "isImageBitmapSupported": true,
    "isImageDecodeSupported": true,
    "isIndexedDBSupported": true,
    "isIntersectionObserverSupported": true,
    "isLocalStorageSupported": true,
    "isMutationObserverSupported": true,
    "isPerformanceObserverSupported": true,
    "isPerformanceSupported": true,
    "isRequestIdleCallbackSupported": true,
    "isServiceWorkerSupported": true,
    "isSessionStorageSupported": true,
    "isWebAssemblySupported": true,
    "isWebAudioSupported": true,
    "isWebGL2Supported": true,
    "isWebGLSupported": true,
    "isWebPSupported": true,
    "isWebRTCSupported": true,
    "isWebSocketSupported": true,
    "isWebVRSupported": false,
    "isWebWorkerSupported": true,
    "isWebXRSupported": false,
    "mediaFeatures": {
      "audio": {
        "MP3": true,
        "Ogg": true,
        "WAV": true
      },
      "video": {
        "HLS": false,
        "MP4": true,
        "Ogg": true,
        "WebM": true
      }
    },
    "webGL2Features": {
      "base": {
        "shaderVersion": "WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)",
        "renderer": "WebKit WebGL",
        "rendererUnmasked": "Intel(R) Iris(TM) Plus Graphics 640",
        "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_texture_filter_anisotropic",
          "OES_texture_float_linear",
          "WEBGL_compressed_texture_s3tc",
          "WEBGL_compressed_texture_s3tc_srgb",
          "WEBGL_debug_renderer_info",
          "WEBGL_debug_shaders",
          "WEBGL_lose_context"
        ]
      },
      "specific": {
        "max3DTextureSize": 2048,
        "maxArrayTextureLayers": 2048,
        "maxClientWaitTimeout": 0,
        "maxColorAttachments": 8,
        "maxCombinedFragmentUniformComponents": 249856,
        "maxCombinedVertexUniformComponents": 249856,
        "maxCombinedUniformBlocks": 75,
        "maxDrawBuffers": 8,
        "maxElementIndex": 4294967295,
        "maxElementsIndices": 150000,
        "maxElementsVertices": 1048575,
        "maxFragmentInputComponents": 128,
        "maxFragmentUniformBlocks": 15,
        "maxFragmentUniformComponents": 4096,
        "maxProgramTexelOffset": 7,
        "maxSamples": 16,
        "maxServerWaitTimeout": 0,
        "maxTextureLODBias": 16,
        "maxTransformFeedbackInterleavedComponents": 64,
        "maxTransformFeedbackSeparateAttribs": 4,
        "maxTransformFeedbackSeparateComponents": 4,
        "maxUniformBlockSize": 65536,
        "maxUniformBufferBindings": 75,
        "maxVaryingComponents": 60,
        "maxVertexUniformBlocks": 15,
        "maxVertexOutputComponents": 128,
        "maxVertexUniformComponents": 4096,
        "minProgramTexelOffset": -8,
        "uniformBufferOffsetAlignment": 256
      }
    },
    "webGLFeatures": {
      "base": {
        "shaderVersion": "WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)",
        "renderer": "WebKit WebGL",
        "rendererUnmasked": "Intel(R) Iris(TM) Plus Graphics 640",
        "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_frag_depth",
          "EXT_shader_texture_lod",
          "EXT_texture_filter_anisotropic",
          "WEBKIT_EXT_texture_filter_anisotropic",
          "EXT_sRGB",
          "OES_element_index_uint",
          "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"
        ]
      }
    }
  },
  "browserSettings": {
    "isCookieEnabled": true,
    "isDoNotTrackEnabled": false
  },
  "hardwareFeatures": {
    "devicePixelRatio": 1,
    "endianness": "little",
    "screenSize": "2560,1440",
    "workerPoolSize": 4,
    "windowSize": "1585,1022"
  },
  "hardwareTier": {
    "GPUTier": {
      "tier": "GPU_DESKTOP_TIER_1",
      "type": "BENCHMARK - intel iris plus graphics 640"
    }
  }
}
```

## Licence

My work is released under the [MIT license](https://raw.githubusercontent.com/TimvanScherpenzeel/detect-features/master/LICENSE).