*

1 files changed, 34 insertions, 4 deletions

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;