JavaScript for Computer Vision: Your Webcam in the Browser

python -m http.server 8000
# then open http://localhost:8000/webcam.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>lesson 6 Browser Vision</title>
  <style>
    body { font-family: sans-serif; background: #111; color: #eee; text-align: center; }
    canvas { border: 2px solid #0084ff; max-width: 95%; }
    #hud { margin: 8px; }
    button { padding: 8px 14px; margin: 4px; }
  </style>
</head>
<body>
  <h1>Browser vision</h1>
  <video id="video" autoplay playsinline muted hidden></video>
  <canvas id="canvas" width="640" height="480"></canvas>
  <div id="hud">Waiting for camera...</div>
  <div>
    <button id="mode">Filter: none</button>
    <button id="snap">Snapshot</button>
  </div>
 
<script>
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d", { willReadFrequently: true });
const hud = document.getElementById("hud");
 
const filters = ["none", "grayscale", "invert", "green only"];
let filterIndex = 0;
 
document.getElementById("mode").onclick = (e) => {
  filterIndex = (filterIndex + 1) % filters.length;
  e.target.textContent = "Filter: " + filters[filterIndex];
};
 
document.getElementById("snap").onclick = () => {
  const a = document.createElement("a");
  a.download = "snapshot.png";
  a.href = canvas.toDataURL("image/png");
  a.click();
};
 
let last = performance.now();
 
function loop() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);   // like cap.read() + imshow
 
  const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const d = frame.data;                                       // R, G, B, A, R, G, B, A ...
 
  const mode = filters[filterIndex];
  for (let i = 0; i < d.length; i += 4) {
    const r = d[i], g = d[i + 1], b = d[i + 2];
    if (mode === "grayscale") {
      const y = 0.299 * r + 0.587 * g + 0.114 * b;
      d[i] = d[i + 1] = d[i + 2] = y;
    } else if (mode === "invert") {
      d[i] = 255 - r; d[i + 1] = 255 - g; d[i + 2] = 255 - b;
    } else if (mode === "green only") {
      d[i] = 0; d[i + 2] = 0;                                 // keep only the green channel
    }
  }
  ctx.putImageData(frame, 0, 0);
 
  const now = performance.now();
  hud.textContent = "FPS: " + (1000 / (now - last)).toFixed(1) + "   Filter: " + mode;
  last = now;
 
  requestAnimationFrame(loop);                                // schedule the next frame
}
 
navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })
  .then((stream) => {
    video.srcObject = stream;
    video.onloadedmetadata = () => { video.play(); loop(); };
  })
  .catch((err) => { hud.textContent = "Camera error: " + err.name; });
</script>
</body>
</html>

<input id="bright" type="range" min="-100" max="100" value="0">
<span id="readout"></span>

const bright = document.getElementById("bright");
const readout = document.getElementById("readout");
let mouse = { x: 0, y: 0 };
 
canvas.onmousemove = (e) => {
  const box = canvas.getBoundingClientRect();
  mouse.x = Math.floor((e.clientX - box.left) * canvas.width / box.width);
  mouse.y = Math.floor((e.clientY - box.top) * canvas.height / box.height);
};
 
// Inside loop(), after getImageData and before the filter loop:
const k = Number(bright.value);
for (let i = 0; i < d.length; i += 4) {
  d[i] = Math.min(255, Math.max(0, d[i] + k));          // red
  d[i + 1] = Math.min(255, Math.max(0, d[i + 1] + k));  // green
  d[i + 2] = Math.min(255, Math.max(0, d[i + 2] + k));  // blue
}
 
// Anywhere in loop(), to show the colour under the mouse:
const p = (mouse.y * canvas.width + mouse.x) * 4;
readout.textContent = ` RGB(${d[p]}, ${d[p + 1]}, ${d[p + 2]})`;