diff --git a/index.html b/index.html index 6f9e931..803a945 100644 --- a/index.html +++ b/index.html @@ -1,555 +1,235 @@ - - | | | | | | - - - - - -
- - - -
- - - - + alert("No video device found."); + } + }).catch(err => { + console.error("Error enumerating devices:", err); + }); + } else { + alert("Your browser does not support video devices."); + } + } + + const chars = "@#8&$%*o!;:,. "; + function videoToAscii() { + if (!option.$video) return; + + const canvasWidth = _bctx.canvas.width; + const canvasHeight = _bctx.canvas.height; + const imageData = _bctx.getImageData(0, 0, canvasWidth, canvasHeight); + const data = imageData.data; + + let asciiImage = ''; + for (let y = 0; y < canvasHeight; y += 10) { + let row = ''; + for (let x = 0; x < canvasWidth; x += 5) { + const index = (y * canvasWidth + x) * 4; + const r = data[index]; + const g = data[index + 1]; + const b = data[index + 2]; + const brightness = (r + g + b) / 3 * option.sensitivity; + const charIndex = Math.floor((brightness / 255) * (chars.length - 1)); + row += chars[charIndex]; + } + asciiImage += row + '\n'; + } + + const output = document.getElementById('asciiOutput'); + output.textContent = asciiImage; + } + + function adjustSensitivity(value) { + option.sensitivity = value; + console.log("Adjusted sensitivity to:", value); + videoToAscii(); + } + + const elements = { + BTN_VIDEO_ACCESS: document.getElementById("BTN_ACCESS_VIDEO") + }; + + elements.BTN_VIDEO_ACCESS.addEventListener("click", () => { + if (!option.$video) _createVideoElement(); + _getVideoAccess(); + }); + + draw(); + })(); + +