From 9f6bfa0fc299615b2676bfaa2b6b3a7ee8063531 Mon Sep 17 00:00:00 2001 From: elioat Date: Thu, 15 Aug 2024 06:06:17 -0400 Subject: * --- js/lut-cam/index.html | 29 +++++++++++++++++++++++++++-- js/lut-cam/lut.js | 38 ++++++++++++++++++++++++++++++++++---- 2 files changed, 61 insertions(+), 6 deletions(-) (limited to 'js/lut-cam') diff --git a/js/lut-cam/index.html b/js/lut-cam/index.html index 28d9b0d..02186c6 100644 --- a/js/lut-cam/index.html +++ b/js/lut-cam/index.html @@ -13,7 +13,7 @@ display: flex; justify-content: center; align-items: center; - background-color: #000; + background-color: beige; } #canvas { width: 100%; @@ -40,6 +40,27 @@ font-size: 18px; cursor: pointer; } + + button, select { + border: none; + cursor: pointer; + transition: background-color 0.3s ease; + } + + button:hover, button:focus { + outline: none; + } + + button.capture { + background-color: teal; + color: #FFFFFF; + } + + button.capture:disabled { + background-color: #ccc; + color: #5c5c5c; + } + @@ -66,10 +87,14 @@

+ +

- +

+ diff --git a/js/lut-cam/lut.js b/js/lut-cam/lut.js index 1c298e3..0bd7dae 100644 --- a/js/lut-cam/lut.js +++ b/js/lut-cam/lut.js @@ -31,6 +31,9 @@ const LUTs = { let currentLUT = null; +const focusSlider = document.getElementById('focus-slider'); +let track = null; + function startCamera() { navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' } } }) .then(s => { @@ -40,11 +43,35 @@ function startCamera() { canvas.style.display = 'block'; // Show the canvas lutSelect.disabled = false; captureButton.disabled = false; - - // Display the video feed on the canvas + captureButton.active = true; + focusSlider.disabled = false; + + track = stream.getVideoTracks()[0]; + const settings = track.getSettings(); + + // So, I don't seem to have a device where this is supported + // Check if focus control is supported with this browser and device combo + if ('focusDistance' in settings) { + // If it is available, enable the slider for focus control + focusSlider.style.display = 'block'; + + // Set initial focus value, and a fallback + focusSlider.value = settings.focusDistance || focusSlider.min; + + focusSlider.addEventListener('input', () => { + track.applyConstraints({ + advanced: [{ focusDistance: focusSlider.value }] + }); + }); + } else { + console.warn('Focus control is not supported on this device.'); + focusSlider.style.display = 'none'; + } + + // Draw the video feed to the canvas video.addEventListener('play', function() { function step() { - if (!cameraOn) return; // Don't show the video feed if there isn't a video feed to show + if (!cameraOn) return; drawVideoProportional(); applyLUT(); requestAnimationFrame(step); @@ -61,13 +88,16 @@ function stopCamera() { if (stream) { stream.getTracks().forEach(track => track.stop()); video.pause(); - canvas.style.display = 'none'; + canvas.style.display = 'none'; // hide the canvas lutSelect.disabled = true; captureButton.disabled = true; + captureButton.active = false; + focusSlider.disabled = true; stream = null; } } + function drawVideoProportional() { const videoAspectRatio = video.videoWidth / video.videoHeight; const canvasAspectRatio = canvas.width / canvas.height; -- cgit 1.4.1-2-gfad0