mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
550 lines
20 KiB
HTML
550 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Device Information Detector</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
color: white;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.info-card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.info-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.info-section {
|
|
margin-bottom: 25px;
|
|
padding-bottom: 25px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.info-section:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.3rem;
|
|
color: #667eea;
|
|
margin-bottom: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 500;
|
|
color: #666;
|
|
}
|
|
|
|
.info-value {
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-align: right;
|
|
max-width: 60%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.info-value.true {
|
|
color: #4caf50;
|
|
}
|
|
|
|
.info-value.false {
|
|
color: #f44336;
|
|
}
|
|
|
|
.info-value.number {
|
|
color: #2196f3;
|
|
}
|
|
|
|
.performance-indicator {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.performance-0 {
|
|
background: #4caf50;
|
|
color: white;
|
|
}
|
|
|
|
.performance-1 {
|
|
background: #ff9800;
|
|
color: white;
|
|
}
|
|
|
|
.performance-2 {
|
|
background: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.safari-highlight {
|
|
background: #fffacd;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
border: 2px solid #ffd700;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.header h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.info-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.info-value {
|
|
max-width: 100%;
|
|
text-align: left;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Device Information Detector</h1>
|
|
<p>Comprehensive browser and device capability detection</p>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="info-section safari-highlight">
|
|
<h2 class="section-title">🦁 Safari/WebKit Version</h2>
|
|
<div class="info-item">
|
|
<span class="info-label">Safari Version</span>
|
|
<span class="info-value number" id="safari-version">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">iOS Version</span>
|
|
<span class="info-value number" id="ios-version">Detecting...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2 class="section-title">🌐 Browser Detection</h2>
|
|
<div class="info-item">
|
|
<span class="info-label">Firefox</span>
|
|
<span class="info-value" id="firefox">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Chromium Version</span>
|
|
<span class="info-value" id="chromium">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Opera GX</span>
|
|
<span class="info-value" id="opera-gx">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Vingester</span>
|
|
<span class="info-value" id="vingester">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">MELD</span>
|
|
<span class="info-value" id="meld">Detecting...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2 class="section-title">📱 Device Detection</h2>
|
|
<div class="info-item">
|
|
<span class="info-label">iOS</span>
|
|
<span class="info-value" id="ios">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">iPad</span>
|
|
<span class="info-value" id="ipad">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">macOS</span>
|
|
<span class="info-value" id="macos">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Intel Mac</span>
|
|
<span class="info-value" id="intel-mac">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Android</span>
|
|
<span class="info-value" id="android">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Samsung A Series</span>
|
|
<span class="info-value" id="samsung-a">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">iPhone 12+</span>
|
|
<span class="info-value" id="iphone12">Detecting...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2 class="section-title">⚡ Hardware Capabilities</h2>
|
|
<div class="info-item">
|
|
<span class="info-label">CPU Threads</span>
|
|
<span class="info-value" id="cpu">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">GPU</span>
|
|
<span class="info-value" id="gpu">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Wake Lock Support</span>
|
|
<span class="info-value" id="wake-lock">Detecting...</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Performance Score</span>
|
|
<span class="info-value" id="performance">Detecting...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2 class="section-title">📊 Raw Data</h2>
|
|
<div class="info-item">
|
|
<span class="info-label">User Agent</span>
|
|
<span class="info-value" id="user-agent" style="font-size: 0.8rem;">Detecting...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Stub for missing functions/objects
|
|
function log(msg) { console.log(msg); }
|
|
function errorlog(e) { console.error(e); }
|
|
var session = {
|
|
quality_wb: 0,
|
|
quality_room: 0,
|
|
mobile: false,
|
|
audioCtx: null
|
|
};
|
|
|
|
// Your original functions (preserved exactly)
|
|
function detectCPUSupport() {
|
|
let cpuThreads = navigator.hardwareConcurrency;
|
|
if (cpuThreads) {
|
|
return cpuThreads + " threads";
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function detectGPUSupport() {
|
|
try {
|
|
const gl = document.createElement("canvas").getContext("webgl");
|
|
|
|
if (!gl) {
|
|
return false;
|
|
}
|
|
|
|
if (!Firefox) {
|
|
try {
|
|
const debugInfo = gl.getExtension("WEBGL_debug_renderer_info"); // chrome
|
|
if (debugInfo) {
|
|
return gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
try {
|
|
return gl.getParameter(gl.RENDERER) || false; // firefox
|
|
} catch (e) {}
|
|
} catch (e) {}
|
|
return false;
|
|
}
|
|
|
|
function isOperaGX() {
|
|
return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(" OPR/75") >= 0;
|
|
}
|
|
|
|
function isSamsungASeries() {
|
|
return navigator.userAgent.includes("; SM-A") || false;
|
|
}
|
|
|
|
function getChromiumVersion() {
|
|
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
|
|
return raw ? parseInt(raw[2], 10) : false;
|
|
}
|
|
|
|
function getiOSVersion() {
|
|
try {
|
|
var agent = navigator.userAgent;
|
|
var start = agent.indexOf("OS ");
|
|
if ((agent.indexOf("iPhone") > -1 || agent.indexOf("iPad") > -1) && start > -1) {
|
|
return window.Number(agent.substr(start + 3, 3).replace("_", "."));
|
|
}
|
|
return 0;
|
|
} catch (e) {
|
|
return 0;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function safariVersion() {
|
|
var ver = 0;
|
|
try {
|
|
ver = navigator.appVersion.split("Version/");
|
|
if (ver.length > 1) {
|
|
ver = ver[1].split(" Safari");
|
|
}
|
|
if (ver.length > 1) {
|
|
ver = ver[0].split(".");
|
|
}
|
|
if (ver.length > 1) {
|
|
ver = parseInt(ver[0]);
|
|
} else {
|
|
ver = 0;
|
|
}
|
|
} catch (e) {
|
|
return 0;
|
|
}
|
|
return ver;
|
|
}
|
|
|
|
function isIntelMac() {
|
|
// Check if it's a Mac but not Apple Silicon
|
|
if (macOS && navigator.userAgent.indexOf("Intel") >= 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function judgePerformance(){
|
|
try {
|
|
if (SafariVersion && SafariVersion >= 17 && (iOS || iPad)) { // iphone xr or newer
|
|
return 0;
|
|
}
|
|
|
|
const cores = typeof navigator.hardwareConcurrency === 'number' ? navigator.hardwareConcurrency : 0;
|
|
|
|
if (isIntelMac()) {
|
|
if (cores < 6) { // yes. they are that bad.
|
|
return 2;
|
|
} else {
|
|
return 1;
|
|
}
|
|
}
|
|
|
|
if (session.mobile && (cores>=4)){ // assume hardware encoded acceleration
|
|
return 0;
|
|
}
|
|
|
|
if (!cores){
|
|
return 1;
|
|
} else if (cores < 4 ){
|
|
return 2;
|
|
} else if (cores>8){
|
|
return 0;
|
|
}
|
|
return 1
|
|
} catch (e) {
|
|
return 1; // 99% safe default
|
|
}
|
|
}
|
|
|
|
const needsLegacyWakeLock = () => {
|
|
try {
|
|
if ('wakeLock' in navigator) {
|
|
if (Firefox) { // using your existing Firefox detection
|
|
return true;
|
|
}
|
|
if ((iOS || iPad) && SafariVersion < 16.4) { // using your existing iOS/iPad/SafariVersion detection
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
} catch(e){}
|
|
|
|
return true; // No Wake Lock API, need legacy keep alive for mobile
|
|
};
|
|
|
|
// Your original detection code
|
|
try {
|
|
var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); // used by main.js also
|
|
var iPad = navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
|
|
|
|
var macOS = navigator.userAgent.indexOf("Mac OS X") != -1;
|
|
macOS = macOS && !(iOS || iPad);
|
|
var Firefox = navigator.userAgent.indexOf("Firefox") >= 0;
|
|
if (Firefox) {
|
|
Firefox = parseInt(navigator.userAgent.split("irefox/").pop()) || true;
|
|
}
|
|
var Android = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
|
|
var ChromiumVersion = getChromiumVersion();
|
|
var OperaGx = isOperaGX();
|
|
var SafariVersion = safariVersion() || getiOSVersion(); // I should rename this to webkit
|
|
|
|
if (iOS || iPad) {
|
|
// iOS doesn't yet allow actual browsers, cause it's abusing its duopoly.
|
|
if (SafariVersion) {
|
|
if (Firefox) {
|
|
Firefox = false; // I should rename this to gecko
|
|
}
|
|
if (ChromiumVersion) {
|
|
ChromiumVersion = false; // I should rename this to chromium
|
|
}
|
|
}
|
|
}
|
|
var SamsungASeries = isSamsungASeries();
|
|
var isVingester = navigator.userAgent.indexOf("Vingester") >= 0;
|
|
|
|
var gpgpuSupport = detectGPUSupport(); // graphics ; not supported on ios
|
|
log(gpgpuSupport);
|
|
|
|
var cpuSupport = detectCPUSupport(); // thread count ; supported on ios
|
|
log(cpuSupport);
|
|
|
|
var iPhone12Up = false;
|
|
|
|
var isMELD = false;
|
|
if (typeof navigator!== 'undefined' && navigator.userAgent && navigator.userAgent.includes("Meld/")) {
|
|
isMELD = true;
|
|
}
|
|
|
|
if (iOS && !iPad) {
|
|
if (window.devicePixelRatio.toFixed(2) >= 3 && window.screen.height > 800 && window.screen.width != 414) {
|
|
// for reference, https://www.ios-resolution.com/
|
|
iPhone12Up = true; // iPhone SE is left out.
|
|
}
|
|
}
|
|
|
|
// Detect mobile
|
|
session.mobile = iOS || iPad || Android;
|
|
|
|
session.quality_wb = judgePerformance(); // try to estimate what resolution to use for encoding when not in a room.
|
|
|
|
if (session.quality_room < session.quality_wb){
|
|
session.quality_room = session.quality_wb;
|
|
}
|
|
|
|
} catch (e) {
|
|
errorlog(e);
|
|
}
|
|
|
|
// Display results
|
|
function updateDisplay() {
|
|
// Safari/iOS versions
|
|
document.getElementById('safari-version').textContent = safariVersion() || 'Not Safari';
|
|
document.getElementById('safari-version').className = 'info-value ' + (safariVersion() ? 'number' : 'false');
|
|
|
|
document.getElementById('ios-version').textContent = getiOSVersion() || 'Not iOS';
|
|
document.getElementById('ios-version').className = 'info-value ' + (getiOSVersion() ? 'number' : 'false');
|
|
|
|
// Browser detection
|
|
document.getElementById('firefox').textContent = Firefox || 'No';
|
|
document.getElementById('firefox').className = 'info-value ' + (Firefox ? 'true' : 'false');
|
|
|
|
document.getElementById('chromium').textContent = ChromiumVersion || 'No';
|
|
document.getElementById('chromium').className = 'info-value ' + (ChromiumVersion ? 'number' : 'false');
|
|
|
|
document.getElementById('opera-gx').textContent = OperaGx ? 'Yes' : 'No';
|
|
document.getElementById('opera-gx').className = 'info-value ' + (OperaGx ? 'true' : 'false');
|
|
|
|
document.getElementById('vingester').textContent = isVingester ? 'Yes' : 'No';
|
|
document.getElementById('vingester').className = 'info-value ' + (isVingester ? 'true' : 'false');
|
|
|
|
document.getElementById('meld').textContent = isMELD ? 'Yes' : 'No';
|
|
document.getElementById('meld').className = 'info-value ' + (isMELD ? 'true' : 'false');
|
|
|
|
// Device detection
|
|
document.getElementById('ios').textContent = iOS ? 'Yes' : 'No';
|
|
document.getElementById('ios').className = 'info-value ' + (iOS ? 'true' : 'false');
|
|
|
|
document.getElementById('ipad').textContent = iPad ? 'Yes' : 'No';
|
|
document.getElementById('ipad').className = 'info-value ' + (iPad ? 'true' : 'false');
|
|
|
|
document.getElementById('macos').textContent = macOS ? 'Yes' : 'No';
|
|
document.getElementById('macos').className = 'info-value ' + (macOS ? 'true' : 'false');
|
|
|
|
document.getElementById('intel-mac').textContent = isIntelMac() ? 'Yes' : 'No';
|
|
document.getElementById('intel-mac').className = 'info-value ' + (isIntelMac() ? 'true' : 'false');
|
|
|
|
document.getElementById('android').textContent = Android ? 'Yes' : 'No';
|
|
document.getElementById('android').className = 'info-value ' + (Android ? 'true' : 'false');
|
|
|
|
document.getElementById('samsung-a').textContent = SamsungASeries ? 'Yes' : 'No';
|
|
document.getElementById('samsung-a').className = 'info-value ' + (SamsungASeries ? 'true' : 'false');
|
|
|
|
document.getElementById('iphone12').textContent = iPhone12Up ? 'Yes' : 'No';
|
|
document.getElementById('iphone12').className = 'info-value ' + (iPhone12Up ? 'true' : 'false');
|
|
|
|
// Hardware
|
|
document.getElementById('cpu').textContent = cpuSupport || 'Not detected';
|
|
document.getElementById('cpu').className = 'info-value ' + (cpuSupport ? 'number' : 'false');
|
|
|
|
document.getElementById('gpu').textContent = gpgpuSupport || 'Not detected';
|
|
document.getElementById('gpu').className = 'info-value ' + (gpgpuSupport ? 'true' : 'false');
|
|
|
|
document.getElementById('wake-lock').textContent = needsLegacyWakeLock() ? 'Legacy needed' : 'Modern API';
|
|
document.getElementById('wake-lock').className = 'info-value ' + (needsLegacyWakeLock() ? 'false' : 'true');
|
|
|
|
// Performance
|
|
const perfScore = session.quality_wb;
|
|
const perfText = perfScore === 0 ? 'High' : perfScore === 1 ? 'Medium' : 'Low';
|
|
document.getElementById('performance').innerHTML = `<span class="performance-indicator performance-${perfScore}">${perfText} (${perfScore})</span>`;
|
|
|
|
// User agent
|
|
document.getElementById('user-agent').textContent = navigator.userAgent;
|
|
}
|
|
|
|
// Run detection when page loads
|
|
updateDisplay();
|
|
</script>
|
|
</body>
|
|
</html> |