diff options
| author | elioat <elioat@tilde.institute> | 2024-08-15 06:06:17 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-08-15 06:06:17 -0400 |
| commit | 9f6bfa0fc299615b2676bfaa2b6b3a7ee8063531 (patch) | |
| tree | 5b8012bdc22235fa2ee0aa4e461c46ea19a3054c /js/lut-cam | |
| parent | 800d420eab70942506f2c96ab63f3d845592e7d2 (diff) | |
| download | tour-9f6bfa0fc299615b2676bfaa2b6b3a7ee8063531.tar.gz | |
*
Diffstat (limited to 'js/lut-cam')
| -rw-r--r-- | js/lut-cam/index.html | 29 | ||||
| -rw-r--r-- | js/lut-cam/lut.js | 38 |
2 files changed, 61 insertions, 6 deletions
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; + } + </style> </head> <body> @@ -66,10 +87,14 @@ </div> <div id="controls"> + <div id="focus-container"> + <input style="display: none;" type="range" id="focus-slider" min="0" max="100" step="1" value="50" disabled> + </div> <button id="toggle-camera">Turn Camera On</button> - <button id="capture" disabled>Capture Frame</button> + <button id="capture" disabled class="capture">Capture Image</button> </div> + <script src="lut.js"></script> </body> </html> 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; |