Overview

ClientJS is simple. It is for finding device information and generating digital fingerprints.


What Is This?

ClientJS makes use of many different native JavaScript functions, methods, and opensource resources to find information about the client.

ClientJS easily lets you create a client object to find out as much useful information as you can about what devices are connecting to your site and your product. You can ask specific questions like, “does the user have an iOS or Android device?” or better yet, “is the user's device an iPad?” ClientJS even lets you produce browser/device fingerprint IDs.


Why Use It?

Gathering information from different browsers and devices makes it difficult to handle cross compatibility. We take care of the hard stuff so that you can easily get the client info you need.


ClientJS attempts to solve the problem of making client data more easily available. Good data is necessary for good analytics that help you make better business and tech choices. Do you have good informative data about how your users connect to your site? Do you know their average screen size? ClientJS can help you collect data and make good decisions for your application and business.


How To Install It

1) Download. 2) Include. 3) Have Fun!

Step 1. Download

npm

ClientJS is available via npm.


npm install clientjs

bower

ClientJS is available as a bower package.


bower install clientjs

Github

ClientJS is hosted on github.


Just visit our github page at https://github.com/jackspirou/clientjs and download the minified production JavaScript!


Step 2. Include

Just include the 'client.min.js' library in the beginning of your project and you can start testing for mobile devices, installed fonts, calculate browser/device fingerprints, and more!


<!DOCTYPE html>
<html lang="en">
<head>
	<script src="client.min.js"></script>
</head>
<body>
...

Step 3. Use it!


How To Use It

After you have ClientJS installed, using it is simple! The first thing you need to do is create a client object and then start calling some methods.


<script>
	var client = new ClientJS();
</script>

See how easy that was! Now how about we execute some methods? Let's see if we have a mobile device and if so is it an android or iOS device? If it is not, lets check if Java is installed and its version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	if( client.isMobile() ) { // Check For Mobile Device

		if( client.isMobileAndroid() ) { // Check For Android
			alert('We Got Us Some Android!');

		}else if( client.isMobileIOS() ){ // Check For iOS
			alert('We Got Us Some Apple iOS!');

		}else{
			alert('Unknown Mobile Device...');
		}
	}else{
		if( client.isJava() ) { // Check If Java Is Installed
  			alert('Java ' + client.getJavaVersion() ); // Get Java Version

		}else{
			alert('No Java Installed...');
		}
	}

</script>

We can can get much more info with ClientJS, but for now lets just calculate our users device/browser fingerprint.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var fingerprint = client.getFingerprint(); // Calculate Device/Browser Fingerprint

	alert( fingerprint );

</script>

Again, these are just a few examples of what you can do with ClientJS. Read about more features below:

ClientJS Methods

You need these ClientJS methods to properly utilizing ClientJS.


new ClientJS()

ClientJS constructor which initiates the data and returns the client object.


<script>

	var client = new ClientJS(); // Create A New Client Object

</script>

getSoftwareVersion

Get Software Version. Return a string containing this software version number.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var softwareVersion = client.getSoftwareVersion(); // Get ClientJS Software Version

	console.log( softwareVersion );

</script>

Your Result:

Fingerprint Methods

A device fingerprint or machine fingerprint or browser fingerprint is information collected about a remote computing device for the purpose of identification. Fingerprints can fully or partially identify individual users or devices even when cookies are turned off.


getFingerprint()

Get Fingerprint. Return a 32-bit integer representing the browsers fingerprint.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var fingerprint = client.getFingerprint(); // Get Client's Fingerprint

	console.log( fingerprint );

</script>

Your Result:


getCustomFingerprint()

Get Custom Fingerprint. Take a string of datapoints and return a 32-bit integer representing the browsers fingerprint.


<script>

	var client = new ClientJS(); // Create A New Client Object
	var ua = client.getBrowserData().ua;
	var canvasPrint = client.getCanvasPrint();

	var fingerprint = client.getCustomFingerprint(ua, canvasPrint);

	console.log( fingerprint );

</script>

Your Result:

UserAgent Methods

A user agent is any software that retrieves and presents Web content for end users or is implemented using Web technologies.


getUserAgent()

Get User Agent. Return a string containing unparsed user agent.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var userAgent = client.getUserAgent(); // Get User Agent String

	console.log( userAgent );

</script>

Your Result:


getUserAgentLowerCase()

Get User Agent Lower Case. Return a lowercase string containing the user agent.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var userAgentLowerCase = client.getUserAgentLowerCase(); // Get User Agent String

	console.log( userAgentLowerCase );

</script>

Your Result:

Browser Methods

Find out the name and version of the client browser.


getBrowser()

Get Browser. Return a string containing the browser name.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var browser = client.getBrowser(); // Get Browser

	console.log( browser );

</script>

Your Result:


getBrowserVersion()

Get Browser Version. Return a string containing the browser version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var browserVersion = client.getBrowserVersion(); // Get Browser Version

	console.log( browserVersion );

</script>

Your Result:


getBrowserMajorVersion()

Get Browser Major Version. Return a string containing the major browser version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var browserMajorVersion = client.getBrowserMajorVersion(); // Get Browser's Major Version

	console.log( browserMajorVersion );

</script>

Your Result:


isIE()

Is IE. Check if the browser is IE.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isIE = client.isIE(); // Check For IE

	console.log( isIE );

</script>

Your Result:


isChrome()

Is Chrome. Check if the browser is Chrome.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isChrome = client.isChrome(); // Check For Chrome

	console.log( isChrome );

</script>

Your Result:


isFirefox()

Is Firefox. Check if the browser is Firefox.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isFirefox = client.isFirefox(); // Check For Firefox

	console.log( isFirefox );

</script>

Your Result:


isSafari()

Is Safari. Check if the browser is Safari.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isSafari = client.isSafari(); // Check For Safari

	console.log( isSafari );

</script>

Your Result:


isOpera()

Is Opera. Check if the browser is Opera.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isOpera = client.isOpera(); // Check For Opera

	console.log( isOpera );

</script>

Your Result:


isMobileSafari()

Is MobileSafari. Check if the browser is Mobile Safari.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobileSafari = client.isMobileSafari(); // Check For Mobile Safari

	console.log( isMobileSafari );

</script>

Your Result:

Engine Methods

A web browser engine, is a software component that takes marked up content and formatting information and displays the formatted content on the screen.


getEngine()

Get Engine. Return a string containing the browser engine.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var engine = client.getEngine(); // Get Engine

	console.log( engine );

</script>

Your Result:


getEngineVersion()

Get Engine Version. Return a string containing the browser engine version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var engineVersion = client.getEngineVersion(); // Get Engine Version

	console.log( engineVersion );

</script>

Your Result:

OS Methods

An operating system (OS) is a collection of software that manages computer hardware resources and provides common services for computer programs.


getOS()

Get OS. Return a string containing the OS.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var OS = client.getOS(); // Get OS Version

	console.log( OS );

</script>

Your Result:


getOSVersion()

Get OS Version. Return a string containing the OS Version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var osVersion = client.getOSVersion(); // Get OS Version

	console.log( osVersion );

</script>

Your Result:


isWindows()

Is Windows. Check if the OS is Windows.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isWindows = client.isWindows(); // Check For Windows

	console.log( isWindows );

</script>

Your Result:


isMac()

Is Mac. Check if the OS is Mac.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMac = client.isMac(); // Check For Mac

	console.log( isMac );

</script>

Your Result:


isLinux()

Is Linux. Check if the OS is Linux.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isLinux = client.isLinux(); // Check For Linux

	console.log( isLinux );

</script>

Your Result:


isUbuntu()

Is Ubuntu. Check if the OS is Ubuntu.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isUbuntu = client.isUbuntu(); // Check For Ubuntu

	console.log( isUbuntu );

</script>

Your Result:


isSolaris()

Is Solaris. Check if the OS is Solaris.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isSolaris = client.isSolaris(); // Check For Solaris

	console.log( isSolaris );

</script>

Your Result:

Device Methods

By Device we mean the user's personal computer. A personal computer (PC) is a general-purpose computer, whose size, capabilities, and original sale price makes it useful for individuals, and which could be a desktop, mobile, tablet, or laptop.


getDevice()

Get Device. Return a string containing the device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var device = client.getDevice(); // Get Device

	console.log( device );

</script>

Your Result:


getDeviceType()

Get Device Type. Return a string containing the device type.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var deviceType = client.getDeviceType(); // Get Device Type

	console.log( deviceType );

</script>

Your Result:


getDeviceVendor()

Get Device Vendor. Return a string containing the device vendor.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var deviceVendor = client.getDeviceVendor(); // Get Device Vendor

	console.log( deviceVendor );

</script>

Your Result:

CPU Methods

A central processing unit (CPU), also referred to as a central processor unit, is the hardware within a computer that carries out the instructions of a computer program by performing the basic arithmetical, logical, and input/output operations of the system.


getCPU()

Get CPU. Return a string containing the CPU architecture.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var CPU = client.getCPU(); // Get CPU Architecture

	console.log( CPU );

</script>

Your Result:

Mobile Methods

A mobile browser, also called a microbrowser, minibrowser, or wireless internet browser (WIB), is a web browser designed for use on a mobile device such as a mobile phone or PDA. Mobile browsers are optimized so as to display Web content most effectively for small screens on portable devices.


isMobile()

Is Mobile. Check if the browser is on a mobile device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobile = client.isMobile(); // Check For Mobile

	console.log( isMobile );

</script>

Your Result:


isMobileMajor()

Is Mobile Major. Check if the browser is on a major mobile device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobileMajor = client.isMobileMajor(); // Check For Mobile Major

	console.log( isMobileMajor );

</script>

Your Result:


isMobileAndroid()

Is Mobile Android. Check if the browser is on an android mobile device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobileAndroid = client.isMobileAndroid(); // Check For Mobile Android

	console.log( isMobileAndroid );

</script>

Your Result:


isMobileOpera()

Is Mobile Opera. Check if the browser is on an opera mobile device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobileOpera = client.isMobileOpera(); // Check For Mobile Opera

	console.log( isMobileOpera );

</script>

Your Result:


isMobileWindows()

Is Mobile Windows. Check if the browser is on a windows mobile device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobileWindows = client.isMobileWindows(); // Check For Mobile Windows

	console.log( isMobileWindows );

</script>

Your Result:


isMobileBlackBerry()

Is Mobile BlackBerry. Check if the browser is on a blackberry mobile device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobileBlackBerry = client.isMobileBlackBerry(); // Check For Mobile Blackberry

	console.log( isMobileBlackBerry );

</script>

Your Result:

iOS Methods

iOS (previously iPhone OS) is a mobile operating system developed and distributed by Apple Inc.


isMobileIOS()

Is Mobile iOS. Check if the browser is on an Apple iOS device.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMobileIOS = client.isMobileIOS(); // Check For Mobile iOS

	console.log( isMobileIOS );

</script>

Your Result:


isIphone()

Is Iphone. Check if the browser is on an Apple iPhone.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isIphone = client.isIphone(); // Check For iPhone

	console.log( isIphone );

</script>

Your Result:


isIpad()

Is Ipad. Check if the browser is on an Apple iPad.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isIpad = client.isIpad(); // Check For iPad

	console.log( isIpad );

</script>

Your Result:


isIpod()

Is Ipod. Check if the browser is on an Apple iPod.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isIpod = client.isIpod(); // Check For iPod

	console.log( isIpod );

</script>

Your Result:

Screen Methods

An electronic visual display for computers. The screen monitor comprises the display device, circuitry and an enclosure.


getScreenPrint()

Get Screen Print. Return a string containing screen information.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var screenPrint = client.getScreenPrint(); // Get Screen Print

	console.log( screenPrint );

</script>

Your Result:


getColorDepth()

Get Color Depth. Return a string containing the color depth.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var colorDepth = client.getColorDepth(); // Get Color Depth

	console.log( colorDepth );

</script>

Your Result:


getCurrentResolution()

Get Current Resolution. Return a string containing the current resolution.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var currentResolution = client.getCurrentResolution(); // Get Current Resolution

	console.log( currentResolution );

</script>

Your Result:


getAvailableResolution()

Get Available Resolution. Return a string containing the available resolution.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var availableResolution = client.getAvailableResolution(); // Get Available Resolution

	console.log( availableResolution );

</script>

Your Result:


getDeviceXDPI()

Get Device XPDI. Return a string containing the device XPDI.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var deviceXDPI = client.getDeviceXDPI(); // Get Device XDPI

	console.log( deviceXDPI );

</script>

Your Result:


getDeviceYDPI()

Get Device YDPI. Return a string containing the device YDPI.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var deviceYDPI = client.getDeviceYDPI(); // Get Device YDPI

	console.log( deviceYDPI );

</script>

Your Result:

Plugin Methods

In computing, a plug-in (or plugin, extension) is a software component that adds a specific feature to an existing software application. When an application supports plug-ins, it enables customization.


getPlugins()

Get Plugins. Return a string containing a list of installed plugins.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var plugins = client.getPlugins(); // Get Plugins

	console.log( plugins );

</script>

Your Result:


isJava()

Is Java. Check if Java is installed.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isJava = client.isJava(); // Check For Java

	console.log( isJava );

</script>

Your Result:


getJavaVersion()

Get Java Version. Return a string containing the Java Version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var javaVersion = client.getJavaVersion(); // Get Java Version

	console.log( javaVersion );

</script>

Your Result:


isFlash()

Is Flash. Check if Flash is installed.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isFlash = client.isFlash(); // Check For Flash

	console.log( isFlash );

</script>

Your Result:


getFlashVersion()

Get Flash Version. Return a string containing the Flash Version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var flashVersion = client.getFlashVersion(); // GET Flash Version

	console.log( flashVersion );

</script>

Your Result:


isSilverlight()

Is Silverlight. Check if Silverlight is installed.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isSilverlight = client.isSilverlight(); // Check For Silverlight

	console.log( isSilverlight );

</script>

Your Result:


getSilverlightVersion()

Get Silverlight Version. Return a string containing the Silverlight Version.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var silverlightVersion = client.getSilverlightVersion(); // GET Silverlight Version

	console.log( silverlightVersion );

</script>

Your Result:

Mime Type Methods

An Internet media type is a standard identifier used on the Internet to indicate the type of data that a file contains. The identifiers were originally defined in RFC 2046, and were called MIME types because they referred to the non-ASCII parts of email messages that were composed using the MIME (Multipurpose Internet Mail Extensions) specification. They are also sometimes referred to as Content-types.


isMimeTypes()

Is Mime Types. Check if mime types are installed.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isMimeTypes = client.isMimeTypes(); // Check For Mime Types

	console.log( isMimeTypes );

</script>

Your Result:


getMimeTypes()

Get Mime Types. Return a string containing a list of installed mime types.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var mimeTypes = client.getMimeTypes(); // Get Mime Types

	console.log( mimeTypes );

</script>

Your Result:

Font Methods

A computer font (or font) is an electronic data file containing a set of glyphs, characters, or symbols such as dingbats. Although the term font first referred to a set of metal type sorts in one style and size, since the 1990s it is generally used to refer to a scalable set of digital shapes that may be printed at many different sizes.


isFont(font)

Is Font. Check if a font is installed.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var font = "Times New Roman"; // Set Font String

	var isFont = client.isFont(font); // Check For A Font

	console.log( isFont );

</script>

Your Result:


getFonts()

Get Fonts. Return a string containing a list of installed fonts.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var fonts = client.getFonts(); // Get Fonts

	console.log( fonts );

</script>

Your Result:

Storage Methods

Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively.


isLocalStorage()

Is Local Storage. Check if local storage is avaliable.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isLocalStorage = client.isLocalStorage(); // Check For Local Storage

	console.log( isLocalStorage );

</script>

Your Result:


isSessionStorage()

Is Session Storage. Check if session storage is avaliable.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isSessionStorage = client.isSessionStorage(); // Check For Session Storage

	console.log( isSessionStorage );

</script>

Your Result:


isCookie()

Is Cookie. Check if cookies are avaliable.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isCookie = client.isCookie(); // Check For Cookies

	console.log( isCookie );

</script>

Your Result:

Time Methods

Time is a dimension in which events can be ordered from the past through the present into the future, and also the measure of durations of events and the intervals between them. A time zone is a region on Earth that has a uniform standard time for legal, commercial, and social purposes.


getTimeZone()

Get Time Zone. Return a lowercase string containing the time zone.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var timeZone = client.getTimeZone(); // Get Time Zone

	console.log( timeZone );

</script>

Your Result:

Language Methods

Language preferences of client browsers.


getLanguage()

Get Language. Return a lowercase string containing the user language.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var language = client.getLanguage(); // Get User Language

	console.log( language );

</script>

Your Result:


getSystemLanguage()

Get SystemLanguage. Return a lowercase string containing the system language.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var systemLanguage = client.SystemLanguage(); // Get System Language

	console.log( systemLanguage );

</script>

Your Result:

Canvas Methods

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).


isCanvas()

Is Canvas. Check if the canvas element is available.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var isCanvas = client.isCanvas(); // Check For The Canvas Element

	console.log( isCanvas );

</script>

Your Result:


getCanvasPrint()

Get Canvas Print. Return a string containing canvas image information.


<script>

	var client = new ClientJS(); // Create A New Client Object

	var canvasPrint = client.getCanvasPrint(); // Get Canvas Print

	console.log( canvasPrint );

</script>

Your Result:

Additional Info

Additional details about the compiler we use, ClientJS dependencies, known issues, and our software licence.


Closure Compiled

The 'client.min.js' file is created by running the source code through the Google Closure Compiler.

Instead of compiling from a source language to machine code, the Google Closure Compiler compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.


Dependencies

ClientJS is completely written in JavaScript. It has no Adobe Flash, Java App, or Silverlight dependencies, but it can tell you if those browser plugins are installed and their version numbers!

ClientJS is also written in pure or native JavaScript, so that it does not rely on jQuery, MooTools, underscorejs or any other JavaScript library. This does not mean ClientJS has no dependencies at all. ClientJS does rely on multiple other open source pure JavaScript libraries, projects, and snippets. Don't worry though! All of that dependent code is hidden inside the ClientJS minified code, ‘client.min.js’ so you don’t have to include more silly stuff. The file ‘client.min.js’ has everything you need to execute any ClientJS method or calculation! :-)

Dependencies are listed below:

  • ua-parser.js
  • fontdetect.js
  • swfobject.js
  • murmurhash3.js

ClientJS is built upon and owes credit to the great work below:


Known Issues

There are quite a few known issues at the moment. We are working on trying to solve them instead of listing them as this project is so young. Please help us out by checking us out at github!

Contribute To The Code On Github

Just visit our github page at https://github.com/jackspirou/clientjs!


Licence