*

1 files changed, 26 insertions, 4 deletions

diff --git a/js/pico-cam/pico-cam.js b/js/pico-cam/pico-cam.js
index 3dc7646..4f2eada 100644
--- a/js/pico-cam/pico-cam.js
+++ b/js/pico-cam/pico-cam.js
@@ -13,12 +13,29 @@ const videoLength = 3000; // 3 seconds
 video.style.width = lowResWidth + 'px';
 video.style.height = lowResHeight + 'px';
 
+// This is a utility function I'm using to try and debut why Safari is claiming that "NotSupportedError: mimeType is not supported"
+const getSupportedMimeType = possibleTypes => {
+    for (let i = 0; i < possibleTypes.length; i++) {
+        if (MediaRecorder.isTypeSupported(possibleTypes[i])) {
+            return possibleTypes[i];
+        }
+    }
+    return false;
+}
+// console.log(getSupportedMimeType(['video/webm;codecs=vp8', 'video/webm', 'video/mp4']));
+
 toggleCameraButton.addEventListener('click', async () => {
     if (!isCameraOn) {
         try {
             let constraints = { video: true };
             if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-                constraints = { video: { facingMode: 'environment' } };
+                constraints = { 
+                    video: {
+                        width: { ideal: 1280 },
+                        height: { ideal: 720 },
+                        facingMode: 'environment' 
+                    } 
+                };
             }
             stream = await navigator.mediaDevices.getUserMedia(constraints);
             video.srcObject = stream;
@@ -66,7 +83,8 @@ captureVideoButton.addEventListener('click', () => {
                 return reject(errtxt);
             }
 
-            const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+            const mimeType = getSupportedMimeType(['video/webm;codecs=vp8', 'video/webm', 'video/mp4']);
+            const mediaRecorder = new MediaRecorder(stream, { mimeType: mimeType });
             let chunks = [];
 
             mediaRecorder.ondataavailable = (event) => {
@@ -76,7 +94,7 @@ captureVideoButton.addEventListener('click', () => {
             };
 
             mediaRecorder.onstop = () => {
-                const blob = new Blob(chunks, { type: 'video/webm' });
+                const blob = new Blob(chunks, { type: mimeType });
                 resolve(blob);
             };
 
@@ -107,7 +125,11 @@ captureVideoButton.addEventListener('click', () => {
 
             const videoLink = document.createElement('a');
             videoLink.href = videoURL;
-            videoLink.download = 'dithered-video.webm';
+            if (videoBlob.type === 'video/mp4') {
+                videoLink.download = 'dithered-video.mp4';
+            } else {
+                videoLink.download = 'dithered-video.webm';
+            }
             videoLink.click();
 
             // Enable the button again after recording