Detect features

Detect and report browser and hardware features.

Demo

Live demo

Installation

Make sure you have Node.js installed.

1 $ npm install detect-features

Usage

1import { getFeatures } from 'detect-features';
2
3(async () => {
4  const features = await getFeatures();
5})();

Example output

1{
2  "browserFeatures": {
3    "browserType": {
4      "browserName": "Chrome",
5      "browserVersion": "86.0",
6      "isAndroid": false,
7      "isChrome": true,
8      "isChromium": false,
9      "isDesktop": true,
10      "isEdge": false,
11      "isFirefox": false,
12      "isInternetExplorer": false,
13      "isMobile": false,
14      "isOpera": false,
15      "isSafari": false,
16      "isSamsungBrowser": false,
17      "isTablet": false,
18      "isUCBrowser": false,
19      "isYandexBrowser": false,
20      "isiOS": false
21    },
22    "isAnimationWorkletSupported": false,
23    "isAudioWorkletSupported": true,
24    "isBroadcastChannelSupported": true,
25    "isCryptoSupported": true,
26    "isFetchSupported": true,
27    "isGamepadSupported": true,
28    "isImageBitmapSupported": true,
29    "isImageDecodeSupported": true,
30    "isIndexedDBSupported": true,
31    "isIntersectionObserverSupported": true,
32    "isLayoutWorkletSupported": false,
33    "isLocalStorageSupported": true,
34    "isMutationObserverSupported": true,
35    "isOffscreenCanvasSupported": true,
36    "isPaintWorkletSupported": true,
37    "isPerformanceNowSupported": true,
38    "isPerformanceObserverSupported": true,
39    "isRequestIdleCallbackSupported": true,
40    "isServiceWorkerSupported": true,
41    "isSessionStorageSupported": true,
42    "isUserActivationSupported": true,
43    "isWebAssemblySupported": true,
44    "isWebAudioSupported": true,
45    "isWebGL2Supported": true,
46    "isWebGLSupported": true,
47    "isWebPSupported": true,
48    "isWebRTCSupported": true,
49    "isWebSocketSupported": true,
50    "isWebVRSupported": false,
51    "isWebWorkerInlineSupported": true,
52    "isWebWorkerSupported": true,
53    "isWebXRSupported": true,
54    "mediaFeatures": {
55      "audio": {
56        "MP3": true,
57        "Ogg": true,
58        "WAV": true
59      },
60      "video": {
61        "HLS": false,
62        "MP4": true,
63        "Ogg": true,
64        "WebM": true
65      }
66    },
67    "webGL2Features": {
68      "base": {
69        "renderer": "WebKit WebGL",
70        "rendererUnmasked": "Intel(R) Iris(TM) Graphics 6100",
71        "shaderVersion": "WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)",
72        "vendor": "WebKit",
73        "vendorUnmasked": "Intel Inc.",
74        "version": "WebGL 2.0 (OpenGL ES 3.0 Chromium)"
75      },
76      "general": {
77        "aliasedLineWidthRange": "1,1",
78        "aliasedPointSizeRange": "1,255.875",
79        "alphaBits": 8,
80        "antialias": true,
81        "blueBits": 8,
82        "depthBits": 24,
83        "greenBits": 8,
84        "maxCombinedTextureImageUnits": 80,
85        "maxCubeMapTextureSize": 16384,
86        "maxFragmentUniformVectors": 1024,
87        "maxRenderBufferSize": 16384,
88        "maxTextureImageUnits": 16,
89        "maxTextureSize": 16384,
90        "maxVaryingVectors": 15,
91        "maxVertexAttributes": 16,
92        "maxVertexTextureImageUnits": 16,
93        "maxVertexUniformVectors": 1024,
94        "maxViewportDimensions": "16384,16384",
95        "precision": {
96          "fragmentShaderHighPrecision": "127,127,23",
97          "fragmentShaderLowPrecision": "127,127,23",
98          "fragmentShaderMediumPrecision": "127,127,23",
99          "vertexShaderHighPrecision": "127,127,23",
100          "vertexShaderLowPrecision": "127,127,23",
101          "vertexShaderMediumPrecision": "127,127,23"
102        },
103        "redBits": 8,
104        "stencilBits": 8,
105        "subPixelBits": 8
106      },
107      "extensions": {
108        "maxAnisotropy": 16,
109        "supportedExtensions": [
110          "EXT_color_buffer_float",
111          "EXT_disjoint_timer_query_webgl2",
112          "EXT_float_blend",
113          "EXT_texture_compression_rgtc",
114          "EXT_texture_filter_anisotropic",
115          "EXT_texture_norm16",
116          "OES_texture_float_linear",
117          "WEBGL_compressed_texture_s3tc",
118          "WEBGL_compressed_texture_s3tc_srgb",
119          "WEBGL_debug_renderer_info",
120          "WEBGL_debug_shaders",
121          "WEBGL_lose_context",
122          "WEBGL_multi_draw",
123          "WEBGL_video_texture"
124        ],
125        "compressedTextureASTCExtension": null,
126        "compressedTextureATCExtension": null,
127        "compressedTextureETC1Extension": null,
128        "compressedTextureETCExtension": null,
129        "compressedTexturePVRTCExtension": null,
130        "compressedTextureS3TCExtension": {},
131        "compressedTextureS3TCSRGBExtension": {}
132      },
133      "specific": {
134        "max3DTextureSize": 2048,
135        "maxArrayTextureLayers": 2048,
136        "maxClientWaitTimeout": 0,
137        "maxColorAttachments": 8,
138        "maxCombinedFragmentUniformComponents": 249856,
139        "maxCombinedUniformBlocks": 75,
140        "maxCombinedVertexUniformComponents": 249856,
141        "maxDrawBuffers": 8,
142        "maxElementIndex": 4294967295,
143        "maxElementsIndices": 150000,
144        "maxElementsVertices": 1048575,
145        "maxFragmentInputComponents": 128,
146        "maxFragmentUniformBlocks": 15,
147        "maxFragmentUniformComponents": 4096,
148        "maxProgramTexelOffset": 7,
149        "maxSamples": 8,
150        "maxServerWaitTimeout": 0,
151        "maxTextureLODBias": 16,
152        "maxTransformFeedbackInterleavedComponents": 64,
153        "maxTransformFeedbackSeparateAttribs": 4,
154        "maxTransformFeedbackSeparateComponents": 4,
155        "maxUniformBlockSize": 65536,
156        "maxUniformBufferBindings": 75,
157        "maxVaryingComponents": 60,
158        "maxVertexOutputComponents": 128,
159        "maxVertexUniformBlocks": 15,
160        "maxVertexUniformComponents": 4096,
161        "minProgramTexelOffset": -8,
162        "uniformBufferOffsetAlignment": 256
163      }
164    },
165    "webGLFeatures": {
166      "base": {
167        "renderer": "WebKit WebGL",
168        "rendererUnmasked": "Intel(R) Iris(TM) Graphics 6100",
169        "shaderVersion": "WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)",
170        "vendor": "WebKit",
171        "vendorUnmasked": "Intel Inc.",
172        "version": "WebGL 1.0 (OpenGL ES 2.0 Chromium)"
173      },
174      "general": {
175        "aliasedLineWidthRange": "1,1",
176        "aliasedPointSizeRange": "1,255.875",
177        "alphaBits": 8,
178        "antialias": true,
179        "blueBits": 8,
180        "depthBits": 24,
181        "greenBits": 8,
182        "maxCombinedTextureImageUnits": 80,
183        "maxCubeMapTextureSize": 16384,
184        "maxFragmentUniformVectors": 1024,
185        "maxRenderBufferSize": 16384,
186        "maxTextureImageUnits": 16,
187        "maxTextureSize": 16384,
188        "maxVaryingVectors": 15,
189        "maxVertexAttributes": 16,
190        "maxVertexTextureImageUnits": 16,
191        "maxVertexUniformVectors": 1024,
192        "maxViewportDimensions": "16384,16384",
193        "precision": {
194          "fragmentShaderHighPrecision": "127,127,23",
195          "fragmentShaderLowPrecision": "127,127,23",
196          "fragmentShaderMediumPrecision": "127,127,23",
197          "vertexShaderHighPrecision": "127,127,23",
198          "vertexShaderLowPrecision": "127,127,23",
199          "vertexShaderMediumPrecision": "127,127,23"
200        },
201        "redBits": 8,
202        "stencilBits": 8,
203        "subPixelBits": 8
204      },
205      "extensions": {
206        "maxAnisotropy": 16,
207        "maxDrawBuffers": 8,
208        "supportedExtensions": [
209          "ANGLE_instanced_arrays",
210          "EXT_blend_minmax",
211          "EXT_color_buffer_half_float",
212          "EXT_disjoint_timer_query",
213          "EXT_float_blend",
214          "EXT_frag_depth",
215          "EXT_shader_texture_lod",
216          "EXT_texture_compression_rgtc",
217          "EXT_texture_filter_anisotropic",
218          "WEBKIT_EXT_texture_filter_anisotropic",
219          "EXT_sRGB",
220          "OES_element_index_uint",
221          "OES_fbo_render_mipmap",
222          "OES_standard_derivatives",
223          "OES_texture_float",
224          "OES_texture_float_linear",
225          "OES_texture_half_float",
226          "OES_texture_half_float_linear",
227          "OES_vertex_array_object",
228          "WEBGL_color_buffer_float",
229          "WEBGL_compressed_texture_s3tc",
230          "WEBKIT_WEBGL_compressed_texture_s3tc",
231          "WEBGL_compressed_texture_s3tc_srgb",
232          "WEBGL_debug_renderer_info",
233          "WEBGL_debug_shaders",
234          "WEBGL_depth_texture",
235          "WEBKIT_WEBGL_depth_texture",
236          "WEBGL_draw_buffers",
237          "WEBGL_lose_context",
238          "WEBKIT_WEBGL_lose_context",
239          "WEBGL_multi_draw",
240          "WEBGL_video_texture"
241        ],
242        "compressedTextureASTCExtension": null,
243        "compressedTextureATCExtension": null,
244        "compressedTextureETC1Extension": null,
245        "compressedTextureETCExtension": null,
246        "compressedTexturePVRTCExtension": null,
247        "compressedTextureS3TCExtension": {},
248        "compressedTextureS3TCSRGBExtension": {}
249      }
250    }
251  },
252  "browserSettings": {
253    "isCookieEnabled": true,
254    "isDoNotTrackEnabled": true
255  },
256  "hardwareFeatures": {
257    "GPUTier": {
258      "fps": 21,
259      "gpu": "intel iris graphics 6100",
260      "isMobile": false,
261      "tier": 1,
262      "type": "BENCHMARK"
263    },
264    "availableCPUCores": 4,
265    "devicePixelRatio": 2,
266    "endianness": "little"
267  }
268}

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.