2 zhinzc2015 4小时前 56次点击
源代码:
*{box-sizing:border-box;margin:0;padding:0}
body{background:#111;color:#fff;font-family:system-ui,sans-serif;padding:20px;max-width:400px;margin:0 auto}
.box{background:#1e1e1e;border-radius:16px;padding:24px;text-align:center}
h1{font-size:22px;margin-bottom:20px}
#video{width:100%;height:auto;border-radius:12px;background:#000;margin-bottom:20px}
.value{font-size:50px;font-weight:bold;color:#4fc3f7;margin:10px 0}
.text{font-size:16px;color:#aaa}
.state{font-size:18px;margin:16px 0}
button{padding:14px 28px;font-size:18px;background:#007bff;color:white;border:none;border-radius:12px;cursor:pointer}
button:disabled{background:#666}
.tip{font-size:14px;color:#888;margin-top:20px}
const video = document.getElementById('video');
const brightEl = document.getElementById('bright');
const levelEl = document.getElementById('level');
const startBtn = document.getElementById('start');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 32;
canvas.height = 24;
let running = false;
let lastValue = 50;
startBtn.onclick = async () => {
if(running) return;
running = true;
startBtn.disabled = true;
startBtn.textContent = '启动中...';
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment',
width: { ideal: 320 },
height: { ideal: 240 }
}
});
video.srcObject = stream;
video.onloadedmetadata = () => {
video.play();
startBtn.textContent = '检测中...';
loop();
};
} catch(e) {
levelEl.textContent = '摄像头权限被拒绝';
startBtn.disabled = false;
startBtn.textContent = '重试';
running = false;
}
};
function loop() {
if (!running) return;
requestAnimationFrame(loop);
try {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
let sum = 0;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i+1];
const b = data[i+2];
sum += 0.299*r + 0.587*g + 0.114*b;
}
const raw = sum / (data.length / 4);
// 放大系数调到适中,不偏大不偏小
const scaled = raw * 0.72;
// 超强平滑
const smooth = Math.round(lastValue * 0.9 + scaled * 0.1);
lastValue = smooth;
brightEl.textContent = smooth;
let text;
if (smooth < 10) text = '全黑';
else if (smooth < 30) text = '很暗';
else if (smooth < 50) text = '偏暗';
else if (smooth < 80) text = '正常';
else if (smooth < 120) text = '明亮';
else text = '强光';
levelEl.textContent = text;
} catch (e) {}
}
你完全不需要他,只需要一个
网站