效果截图：
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, $)