Detect and report browser and hardware features.
Make sure you have Node.js installed.
$ npm install detect-featuresimport { 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"
}
}Special care has been taken to make sure all browsers that support WebGL are also supported by detect-features including IE 11.
My work is released under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent