Angbike个人博客 > JavaScript/JQuery > 浏览器能获取到的设备信息有哪些?

浏览器能获取到的设备信息有哪些?

HTML代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>浏览器获取部分设备信息</title>
    <style type="text/css">
    body{padding:0;margin:0;font-family:"Microsoft YaHei";overflow:hidden;line-height:1.6}
    .device-box{width:100%;height:100vh}
    .box-title{width: 100%; text-align: center;}
    .box-right{width: 90%; margin: 0px auto;}
    .table{width:100%;margin:0px auto;}
    .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}
    .table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;}
    .clear{clear: both;}
    </style>
</head>
<body>
<div class="device-box">
    <div class="box-title">
        <h2>浏览器获取部分设备信息</h2>
    </div>
    <div class="box-right">
        <table class="table table-bordered table-hover table-striped" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td align="right">系统名称:</td>
                    <td id="systemName"></td>
                </tr>
                <tr>
                    <td align="right">系统版本:</td>
                    <td id="systemVersion"></td>
                </tr>
                <tr>
                    <td align="right">浏览器名称:</td>
                    <td id="borwserName"></td>
                </tr>
                <tr>
                    <td align="right">浏览器版本:</td>
                    <td id="borwserVersion"></td>
                </tr>
                <tr>
                    <td align="right">浏览器内核信息:</td>
                    <td id="borwserKernel"></td>
                </tr>
                <tr>
                    <td align="right">网络连接类型:</td>
                    <td id="networkType"></td>
                </tr>
                <tr>
                    <td align="right">网络连接状态:</td>
                    <td id="networkStatus"></td>
                </tr>
                <tr>
                    <td align="right">网络连接速度:</td>
                    <td id="networkSpeed"></td>
                </tr>
                <tr>
                    <td align="right">摄像头权限:</td>
                    <td id="streamVideo"></td>
                </tr>
                <tr>
                    <td align="right">麦克风权限:</td>
                    <td id="streamAudio"></td>
                </tr>
                <tr>
                    <td align="right">设备IP信息:</td>
                    <td id="deviceIp"></td>
                </tr>
                <tr>
                    <td align="right">显卡供应商:</td>
                    <td id="graphicsCardSupplier"></td>
                </tr>
                <tr>
                    <td align="right">显卡渲染器:</td>
                    <td id="graphicsCardRenderer"></td>
                </tr>
                <tr>
                    <td align="right">屏幕宽度:</td>
                    <td id="screenWidth"></td>
                </tr>
                <tr>
                    <td align="right">屏幕高度:</td>
                    <td id="screenHeight"></td>
                </tr>
                <tr>
                    <td align="right">颜色深度:</td>
                    <td id="colorDepth"></td>
                </tr>
                <tr>
                    <td align="right">是否在充电:</td>
                    <td id="isCharging"></td>
                </tr>
                <tr>
                    <td align="right">电量比例:</td>
                    <td id="electricityRatio"></td>
                </tr>
                <tr>
                    <td align="right">充电时长:</td>
                    <td id="chargingTime"></td>
                </tr>
                <tr>
                    <td align="right">放电时长:</td>
                    <td id="lengthDischarge"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="clear"></div>
</div>
</body>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/device_info.js" type="text/javascript" charset="utf-8"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</html>

JS代码:

(function(window, $) {

    deviceInfo = {
        
        // 获取系统相关信息
        getOsInfo: function(){
            var userAgent = navigator.userAgent.toLowerCase();
            var name = 'Unknown';
            var version = "Unknown";
            if(userAgent.indexOf("win") > -1) {
                name = "Windows";
                if(userAgent.indexOf("windows nt 5.0") > -1) {
                    version = "Windows 2000";
                } else if(userAgent.indexOf("windows nt 5.1") > -1 || userAgent.indexOf("windows nt 5.2") > -1) {
                    version = "Windows XP";
                } else if(userAgent.indexOf("windows nt 6.0") > -1) {
                    version = "Windows Vista";
                } else if(userAgent.indexOf("windows nt 6.1") > -1 || userAgent.indexOf("windows 7") > -1) {
                    version = "Windows 7";
                } else if(userAgent.indexOf("windows nt 6.2") > -1 || userAgent.indexOf("windows 8") > -1) {
                    version = "Windows 8";
                } else if(userAgent.indexOf("windows nt 6.3") > -1) {
                    version = "Windows 8.1";
                } else if(userAgent.indexOf("windows nt 6.2") > -1 || userAgent.indexOf("windows nt 10.0") > -1) {
                    version = "Windows 10";
                } else {
                    version = "Unknown";
                }
            } else if(userAgent.indexOf("iphone") > -1) {
                name = "Iphone";
            } else if(userAgent.indexOf("mac") > -1) {
                name = "Mac";
            } else if(userAgent.indexOf("x11") > -1 || userAgent.indexOf("unix") > -1 || userAgent.indexOf("sunname") > -1 || userAgent.indexOf("bsd") > -1) {
                name = "Unix";
            } else if(userAgent.indexOf("linux") > -1) {
                if(userAgent.indexOf("android") > -1) {
                    name = "Android"
                } else {
                    name = "Linux";
                }
            } else {
                name = "Unknown";
            }
            var os = new Object();
            os.name = name;
            os.version = version;
            return os;
        },

        // 获取浏览器相关信息
        getBrowerInfo: function(){
            var Browser = Browser || (function(window) {
                var document = window.document,
                    navigator = window.navigator,
                    agent = navigator.userAgent.toLowerCase(),
                    //IE8+支持.返回浏览器渲染当前文档所用的模式
                    //IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)
                    //IE10:10(兼容模式7||8||9)
                    IEMode = document.documentMode,
                    //chorme
                    chrome = window.chrome || false,
                    System = {
                        //user-agent
                        agent: agent,
                        //是否为IE
                        isIE: /trident/.test(agent),
                        //Gecko内核
                        isGecko: agent.indexOf("gecko") > 0 && agent.indexOf("like gecko") < 0,
                        //webkit内核
                        isWebkit: agent.indexOf("webkit") > 0,
                        //是否为标准模式
                        isStrict: document.compatMode === "CSS1Compat",
                        //是否支持subtitle
                        supportSubTitle: function() {
                            return "track" in document.createElement("track");
                        },
                        //是否支持scoped
                        supportScope: function() {
                            return "scoped" in document.createElement("style");
                        },
                        //获取IE的版本号
                        ieVersion: function() {
                            var rMsie = /(msie\s|trident.*rv:)([\w.]+)/;
                            var ma = window.navigator.userAgent.toLowerCase()
                            var match = rMsie.exec(ma);
                            try {
                                return match[2];
                            } catch(e) {
                                return IEMode;
                            }
                        },
                        //Opera版本号
                        operaVersion: function() {
                            try {
                                if(window.opera) {
                                    return agent.match(/opera.([\d.]+)/)[1];
                                } else if(agent.indexOf("opr") > 0) {
                                    return agent.match(/opr\/([\d.]+)/)[1];
                                }
                            } catch(e) {
                                return 0;
                            }
                        }
                    };

                try {
                    //浏览器类型(IE、Opera、Chrome、Safari、Firefox)
                    System.type = System.isIE ? "IE" :
                        window.opera || (agent.indexOf("opr") > 0) ? "Opera" :
                        (agent.indexOf("chrome") > 0) ? "Chrome" :
                        //safari也提供了专门的判定方式
                        window.openDatabase ? "Safari" :
                        (agent.indexOf("firefox") > 0) ? "Firefox" :
                        'unknow';
                    //版本号 
                    System.version = (System.type === "IE") ? System.ieVersion() :
                        (System.type === "Firefox") ? agent.match(/firefox\/([\d.]+)/)[1] :
                        (System.type === "Chrome") ? agent.match(/chrome\/([\d.]+)/)[1] :
                        (System.type === "Opera") ? System.operaVersion() :
                        (System.type === "Safari") ? agent.match(/version\/([\d.]+)/)[1] :
                        "0";
                    //浏览器外壳
                    System.shell = function() {
                        if(agent.indexOf("edge") > 0) {
                            System.version = agent.match(/edge\/([\d.]+)/)[1] || System.version;
                            return "edge浏览器";
                        }
                        //遨游浏览器
                        if(agent.indexOf("maxthon") > 0) {
                            System.version = agent.match(/maxthon\/([\d.]+)/)[1] || System.version;
                            return "傲游浏览器";
                        }
                        //QQ浏览器
                        if(agent.indexOf("qqbrowser") > 0) {
                            System.version = agent.match(/qqbrowser\/([\d.]+)/)[1] || System.version;
                            return "QQ浏览器";
                        }
                        //搜狗浏览器
                        if(agent.indexOf("se 2.x") > 0) {
                            return '搜狗浏览器';
                        }
                        //Chrome:也可以使用window.chrome && window.chrome.webstore判断
                        if(chrome && System.type !== "Opera") {
                            var external = window.external,
                                clientInfo = window.clientInformation,
                                //客户端语言:zh-cn,zh.360下面会返回undefined
                                clientLanguage = clientInfo.languages;
                            //猎豹浏览器:或者agent.indexOf("lbbrowser")>0
                            if(external && 'LiebaoGetVersion' in external) {
                                return '猎豹浏览器';
                            }
                            //百度浏览器
                            if(agent.indexOf("bidubrowser") > 0) {
                                System.version = agent.match(/bidubrowser\/([\d.]+)/)[1] ||
                                    agent.match(/chrome\/([\d.]+)/)[1];
                                return "百度浏览器";
                            }
                            //360极速浏览器和360安全浏览器
                            if(System.supportSubTitle() && typeof clientLanguage === "undefined") {
                                //object.key()返回一个数组.包含可枚举属性和方法名称
                                var storeKeyLen = Object.keys(chrome.webstore).length,
                                    v8Locale = "v8Locale" in window;
                                return storeKeyLen > 1 ? '360极速浏览器' : '360安全浏览器';
                            }
                            return "Chrome";
                        }
                        return System.type;
                    }
                    //浏览器名称(如果是壳浏览器,则返回壳名称)
                    System.name = System.shell();
                } catch(e) {
                    console.log(e.message);
                }
                return {
                    client: System
                };
            })(window);
            if(Browser.client.name == undefined || Browser.client.name == "") {
                Browser.client.name = "Unknown";
                Browser.client.version = "Unknown";
            } else if(Browser.client.version == undefined) {
                Browser.client.version = "Unknown";
            }
            return Browser;
        },
        
        // 获取网络连接类型
        getNetworkType: function(){
            var ua = navigator.userAgent;
            var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
            networkStr = networkStr.toLowerCase().replace('nettype/', '');
            var networkType;
            switch (networkStr) {
                case 'wifi':
                    networkType = 'WIFI';
                    break;
                case '4g':
                    networkType = '4G';
                    break;
                case '3g':
                    networkType = '3g';
                    break;
                case '3gnet':
                    networkType = '3G';
                    break;
                case '2g':
                    networkType = '2G';
                    break;
                default:
                    networkType = 'other';
            }
            return networkType;
        },
        
        // 计算网速
        measureBW: function(fn){
            var startTime, endTime, fileSize;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 2){
                    startTime = Date.now();
                }
                if (xhr.readyState === 4 && xhr.status === 200) {
                    endTime = Date.now();
                    fileSize = xhr.responseText.length;
                    var speed = fileSize  / ((endTime - startTime)/1000) / 1024;
                    fn && fn(Math.floor(speed))
                }
            }
            xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png?id=" + Math.random(), true);
            xhr.send();
        },
        
        // 摄像头
        getVideoInfo: function(){
            navigator.getUserMedia({video: true}, function onSuccess(stream){
                $("#streamVideo").html("已打开");
            }, function onError(err) {
                if(err.name == "NotFoundError" || err.name == "DeviceNotFoundError"){
                    // require track is missing
                    $("#streamVideo").html("无指定的硬件设备");
                }else if(err.name == "NotReadableError" || err.name == "TrackStartError"){
                    // webcam or mic are already in use
                    $("#streamVideo").html("设备被占用");
                }else if(err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError"){
                    // constraints can not be satisfied by avb.device
                    $("#streamVideo").html("设备分辨率异常");
                }else if(err.name == "NotAllowedError" || err.name == "PermissionDeniedError"){
                    // permission denied in browser
                    $("#streamVideo").html("浏览器中的权限被拒绝");
                }else if(err.name == "TypeError" || err.name == "TypeError"){
                    // empty constraints object
                    $("#streamVideo").html("音轨,视频轨,或者两者被设置为false");
                }else {
                    // other errors
                    $("#streamVideo").html("其他错误");
                }
            });
        },
        
        // 麦克风
        getAudioInfo: function(){
            navigator.getUserMedia({audio:true}, function onSuccess(stream){
                $("#streamAudio").html("已打开");
            }, function onError(err) {
                if(err.name == "NotFoundError" || err.name == "DeviceNotFoundError"){
                    // require track is missing
                    $("#streamAudio").html("无指定的硬件设备");
                }else if(err.name == "NotReadableError" || err.name == "TrackStartError"){
                    // webcam or mic are already in use
                    $("#streamAudio").html("设备被占用");
                }else if(err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError"){
                    // constraints can not be satisfied by avb.device
                    $("#streamAudio").html("设备分辨率异常");
                }else if(err.name == "NotAllowedError" || err.name == "PermissionDeniedError"){
                    // permission denied in browser
                    $("#streamAudio").html("浏览器中的权限被拒绝");
                }else if(err.name == "TypeError" || err.name == "TypeError"){
                    // empty constraints object
                    $("#streamAudio").html("音轨,视频轨,或者两者被设置为false");
                }else {
                    // other errors
                    $("#streamAudio").html("其他错误");
                }
            });
        },
        
        // 获取设备IP
        getDeviceIp: function(){
            let ip = returnCitySN["cip"];
            let name = returnCitySN["cname"];
            $("#deviceIp").html(ip + " " + name);
        },
        
        // 显示相关信息
        graphicsCardInfo: function(){
            let canvas = document.createElement("canvas");
            let gl = canvas.getContext("experimental-webgl");
            let debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
            
            let gcs = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);   // 显卡供应商
            let gcr = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL); // 显卡渲染器
            
            let sw = window.screen.width;      // 屏幕宽度
            let sh = window.screen.height;     // 屏幕高度
            let cd = window.screen.colorDepth; // 颜色深度
            
            $("#graphicsCardSupplier").html(gcs);
            $("#graphicsCardRenderer").html(gcr);
            $("#screenWidth").html(sw);
            $("#screenHeight").html(sh);
            $("#colorDepth").html(cd);
        },
        
        // 设备电量信息
        deviceElectricityInfo: function(){
            navigator.getBattery().then(function(battery) {
                let ic = battery.charging;               // 是否在充电
                let er = battery.level;                  // 电量比例
                let ct = battery.chargingTime;           // 充电时长
                let ld = battery.dischargingTime;        // 放电时长
                
                $("#isCharging").html(ic);
                $("#electricityRatio").html(er);
                $("#chargingTime").html(ct);
                $("#lengthDischarge").html(ld);
            });
        },
        
    }
    
    $(function(){
        
        let system = deviceInfo.getOsInfo();
        let browser = deviceInfo.getBrowerInfo();
        let net = deviceInfo.getNetworkType();
        
        // 系统
        $("#systemName").html(system.name);
        $("#systemVersion").html(system.version);
        
        // 浏览器
        $("#borwserName").html(browser.client.name);
        $("#borwserVersion").html(browser.client.version);
        $("#borwserKernel").html(browser.client.agent);
        
        // 网络状态
        $("#networkType").html(net);
        
        // 网络连接检测
        if(navigator.onLine){
            $("#networkStatus").html("网络连接正常");
        }else{
            $("#networkStatus").html("网络连接错误");
        }
        
        // 网速检测
        setInterval(function(){
            deviceInfo.measureBW(function(speed){
                $("#networkSpeed").html(speed + " KB/S");
            })
        },5000)
        
        // 摄像头
        deviceInfo.getVideoInfo();
        // 麦克风
        deviceInfo.getAudioInfo();
        
        // 设备IP
        deviceInfo.getDeviceIp();
        
        // 显示相关信息
        deviceInfo.graphicsCardInfo();
        
        // 设备电量信息
        deviceInfo.deviceElectricityInfo();
    })

})(window, $)

效果截图:
1.jpg

博客评论已关闭