detect-features
Version:
Detect and report browser and hardware features.
297 lines (278 loc) • 10.2 kB
Markdown
# Detect features
[](https://david-dm.org/timvanscherpenzeel/detect-features)
[](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).