Changed around line 1
+ // Get video element
+ const video = document.getElementById('webcam');
+ const canvas = document.getElementById('posture-canvas');
+ const ctx = canvas.getContext('2d');
+ const statusText = document.getElementById('status');
+ const warningText = document.getElementById('warning');
+
+ // Camera setup
+ async function setupCamera() {
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+ video.srcObject = stream;
+ video.onloadedmetadata = () => {
+ canvas.width = video.videoWidth;
+ canvas.height = video.videoHeight;
+ processPosture();
+ };
+ } catch (error) {
+ console.error('Error accessing webcam:', error);
+ }
+ }
+
+ // Posture processing
+ function processPosture() {
+ // Draw video frame to canvas
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+ // Basic posture detection (placeholder logic)
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const brightness = calculateAverageBrightness(imageData);
+
+ // Simple posture check based on brightness (example logic)
+ if (brightness < 100) {
+ statusText.textContent = "Poor Posture";
+ statusText.style.color = "var(--warning-color)";
+ warningText.classList.add('warning-visible');
+ } else {
+ statusText.textContent = "Good Posture";
+ statusText.style.color = "var(--success-color)";
+ warningText.classList.remove('warning-visible');
+ }
+
+ // Repeat processing
+ requestAnimationFrame(processPosture);
+ }
+
+ // Helper function to calculate brightness
+ function calculateAverageBrightness(imageData) {
+ let total = 0;
+ const data = imageData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ total += (data[i] + data[i+1] + data[i+2]) / 3;
+ }
+
+ return total / (data.length / 4);
+ }
+
+ // Initialize
+ setupCamera();
