*

1 files changed, 77 insertions, 2 deletions

diff --git a/js/pico-cam/pico-cam.js b/js/pico-cam/pico-cam.js
index f51179e..3dc7646 100644
--- a/js/pico-cam/pico-cam.js
+++ b/js/pico-cam/pico-cam.js
@@ -1,5 +1,6 @@
 const toggleCameraButton = document.getElementById('toggleCamera');
 const captureFrameButton = document.getElementById('captureFrame');
+const captureVideoButton = document.getElementById('captureVideo');
 const video = document.getElementById('webcam');
 const canvas = document.getElementById('ditheredOutput');
 const context = canvas.getContext('2d');
@@ -8,6 +9,7 @@ let stream = null;
 let isCameraOn = false;
 const lowResWidth = 160; // Gameboy camera resolution: 160×144
 const lowResHeight = 144;
+const videoLength = 3000; // 3 seconds
 video.style.width = lowResWidth + 'px';
 video.style.height = lowResHeight + 'px';
 
@@ -24,7 +26,9 @@ toggleCameraButton.addEventListener('click', async () => {
             isCameraOn = true;
             toggleCameraButton.textContent = 'Turn Camera Off';
             captureFrameButton.disabled = false;
+            captureVideoButton.disabled = false;
             captureFrameButton.classList.add('active');
+            captureVideoButton.classList.add('active');
             video.addEventListener('loadeddata', () => {
                 canvas.width = lowResWidth;
                 canvas.height = lowResHeight;
@@ -39,19 +43,90 @@ toggleCameraButton.addEventListener('click', async () => {
         isCameraOn = false;
         toggleCameraButton.textContent = 'Turn Camera On';
         captureFrameButton.disabled = true;
+        captureVideoButton.disabled = true;
         captureFrameButton.classList.remove('active');
+        captureVideoButton.classList.remove('active');
     }
 });
 
 captureFrameButton.addEventListener('click', () => {
     const link = document.createElement('a');
     link.href = canvas.toDataURL('image/png');
-    link.download = 'frame.png';
+    link.download = 'dithered-frame.png';
     link.click();
 });
 
+captureVideoButton.addEventListener('click', () => {
+    const startRecording = (canvas, duration) => {
+        return new Promise((resolve, reject) => {
+            const stream = canvas.captureStream();
+            if (!stream) {
+                const errtxt = 'Stream capture from canvas failed.';
+                console.error(errtxt);
+                return reject(errtxt);
+            }
+
+            const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+            let chunks = [];
+
+            mediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    chunks.push(event.data);
+                }
+            };
+
+            mediaRecorder.onstop = () => {
+                const blob = new Blob(chunks, { type: 'video/webm' });
+                resolve(blob);
+            };
+
+            mediaRecorder.onerror = (event) => {
+                console.error('MediaRecorder error:', event.error);
+                reject(event.error);
+            };
+
+            // console.log('Starting recording...');
+            mediaRecorder.start();
+            setTimeout(() => {
+                // console.log('Stopping recording...');
+                mediaRecorder.stop();
+            }, duration);
+        });
+    };
+
+    const handleCaptureVideo = async () => {
+        if (!isCameraOn) {
+            console.error('Camera is not active.');
+            return;
+        }
+
+        try {
+            captureVideoButton.disabled = true;
+            const videoBlob = await startRecording(ditheredOutput, videoLength);
+            const videoURL = URL.createObjectURL(videoBlob);
+
+            const videoLink = document.createElement('a');
+            videoLink.href = videoURL;
+            videoLink.download = 'dithered-video.webm';
+            videoLink.click();
+
+            // Enable the button again after recording
+            captureVideoButton.disabled = false;
+        } catch (error) {
+            console.error('Error recording video:', error);
+            captureVideoButton.disabled = false;
+        }
+    };
+
+    handleCaptureVideo();
+});
+
+
 function processFrame() {
-    if (!isCameraOn) return;
+    if (!isCameraOn) {
+        console.error('Camera is not active.');
+        return;
+    }
 
     // Crop and draw the middle part of the video frame
     const videoAspect = video.videoWidth / video.videoHeight;