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

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, $)

效果截图: