device-details uses already robust UAParser.js
npm install device-details
{
language: string,
browser: { vendor: string, name: string, version: string, engine: string },
os: { vendor: string, name: string, version: string },
hardware:
{
cpu: { name: string, architecture: string, type: string, cores: number },
ram: { size: number, unit: string },
screen: { height: number, width: number, hasTouch: boolean, touchPoints: number },
gpu: { vendor: string, name: string },
},
platform: { model: string, type: string, vendor: string },
deviceName: string,
}
import getDeviceDetails from 'device-details';
import { DeviceDetails } from "device-details/lib/models";
console.log(getDeviceDetails());
{
'language': 'en-US',
'deviceName': 'Windows Desktop',
'browser': { 'vendor': 'Google Inc.', 'name': 'Chrome', 'version': '89.0.4389.90', 'engine': 'Blink 89.0.4389.90' },
'os': { 'vendor': 'Microsoft', 'name': 'Windows', 'version': '10' },
'hardware':
{
'cpu': { 'name': '', 'architecture': 'amd64', 'type': '64 Bit', 'cores': 4 },
'ram': { 'size': 8, 'unit': 'GB' },
'screen': { 'height': 768, 'width': 1366, 'hasTouch': false, 'touchPoints': 0 },
'gpu': { 'vendor': 'Intel(R)', 'name': 'Intel(R) HD Graphics 520' },
},
'platform': { 'model': 'Unknown', 'type': 'desktop', 'vendor': 'Unknown' },
}
{ fallback?: string, //fallback string, ? if any item is missing ('Unknown' by default)
navigator?
: Navigator, //navigator object, ? if wanted to be passed externally
canvas?
: HTMLCanvasElement, //canvas object, if wanted to be passed externally }
function getDeviceDetails(options?: GetDeviceOptions): DeviceDetails