device-details

Get device details directly from browser.

device-details uses already robust UAParser.js

No need of installers for most common device details

'device-details' uses the Navigator API to get device information right from browser!

Demo

Check out our live demo

Information Available

JSON structure (DeviceDetails interface)

{
  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,
}

Usage

import  getDeviceDetails  from 'device-details';
import { DeviceDetails } from "device-details/lib/models";

console.log(getDeviceDetails());

Output

{
  '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' },
}

Options

{ 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 }

API

function  getDeviceDetails(options?: GetDeviceOptions): DeviceDetails