JavaScript Navigator Object | navigator.userAgent, Battery API

Navigator Object

JavaScript Navigator Object is a build in JS object having information of User Agent, which includes browser name, OS, OS Version, device information etc. navigator.useragent can give information regarding Operating System, OS Version, device, browser name and version etc.


    console.log(window.navigator);

userAgent

navigator.userAgent property returns information of user's device, including HTML Version, Operation System, OS Version, Browser name, browser version, browser layout engine etc. See example


    navigator.userAgent;

Check Browser using JavaScript userAgent

How to check web browser using JavaScript navigator.userAgent property.


    if(navigator.userAgent.search("Edge")!=-1){
        console.log("Edge");
    }
    else if( navigator.userAgent.search("Chrome")!=-1){
        console.log("Chrome");
    }
    else if(navigator.userAgent.search("Firefox")!=-1){
        console.log("Firefox");
    }
    else if(navigator.userAgent.search("Safari")!=-1){
        console.log("Safari");
    }
    else if(/MSIE|Trident|Edge\//.test(navigator.userAgent)){
        console.log("Internet Explorer");
    }
    else{
        console.log("Unknown Browser");
    }

appName

navigator.appName property returns the name of browser. All HTML5 based browsers returns Netscape. See example


    navigator.appName

appVersion

navigator.appVersion property returns version of web browser. In HTML5 based browsers, the first value in string, i.e 5.0 is version of HTML and then followed by OS information. See example


    navigator.appVersion;

platform

navigator.platform property returns the platform of browser. For Mac OS, it is "MacIntel". See example


    navigator.platform;

language

navigator.language property returns language of web browser. See example


    navigator.language;

onLine

navigator.onLine property returns boolean value true if system is connected to network. If not connected, false will be returned.


    navigator.onLine;

Device Memory

navigator.deviceMemory property returns the device memory or RAM in gbs.


    navigator.deviceMemory;

hardwareConcurrency

navigator.hardwareConcurrency property returns the number of logical processor or threads. For intel chips with hyper-threading, it will return double threads. For example, dual core intel processor has 4 threads, and quad-core intel processor has 8 threads. ( 2 threads per core ).


    navigator.hardwareConcurrency;

vibrate

navigator.vibrate method can vibrate your smartphone for n no of milliseconds. n parameter in vibrate method is no of milliseconds. See example


    navigator.vibrate(100);    // vibrate for 0.1 sec
    navigator.vibrate(500);    // vibrate for 0.5 sec
    navigator.vibrate(1000);    // vibrate for 1 sec
    navigator.vibrate(2000);    // vibrate for 2 sec
    navigator.vibrate([100,30,100,30,100]);    // vibrate pattern

Feature available in Chrome for android. Not available in Safari

getBattery

getBattery is obsolete feature used to get battery related information from system. This feature is no longer supported.


if(navigator.getBattery){
navigator.getBattery().then(x=>console.log(x.level));
navigator.getBattery().then(x=>console.log(x.dischargingTime));
}
else{
console.warn("Battery Api Not Supported");
}

Battery Indicator

This is the battery level indicator of your system based on battery api and HTML5 Meter Element.

geoLocation

navigator.getLocation method is used to get geolocation information of user. This article is already published in JS API's. Click following link for Geolocation API


navigator.geolocation.getCurrentPosition(s=>{

    const lat=s.coords.latitude;
    const lon=s.coords.longitude;
    const acc=s.coords.accuracy;

    console.log(lat, lon, acc);

},e=>{
    console.warn("geolocation not available")
});

Learn more about HTML5 Geolocation. Geolocation Tutorial

webcam API using mediaDevices.getUserMedia

JavaScript Webcam API is used using navigator.mediaDevices.getUserMedia interface which provide access to device media including camera and mic. We can user this interface to open webcam in javascript or mic in javascript.


const constraints = { video: true };

navigator.mediaDevices.getUserMedia(constraints).
then((mediaStream)=>{
    document.querySelector("video").srcObject=mediaStream;
    document.querySelector("video").play();
}).
catch(err=>console.warn(err));


const constraints = { audio: true };

navigator.mediaDevices.getUserMedia(constraints).
then((mediaStream)=>{
    document.querySelector("audio").srcObject=mediaStream;
    document.querySelector("audio").play()
}).
catch(err=>console.warn(err));