2 files changed, 28 insertions, 6 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
diff --git a/js/pico-cam/service-worker.js b/js/pico-cam/service-worker.js
index ce5271b..9540cfb 100644
--- a/js/pico-cam/service-worker.js
+++ b/js/pico-cam/service-worker.js
@@ -1,4 +1,4 @@
-var CACHE_NAME = 'pico-cam-v2';
+var CACHE_NAME = 'pico-cam-v3';
 var urlsToCache = [
   './',
   './index.html',
@@ -30,7 +30,7 @@ self.addEventListener('fetch', function(event) {
 });
 
 self.addEventListener('activate', function(event) {
-    var cacheWhitelist = ['pico-cam-v2'];
+    var cacheWhitelist = ['pico-cam-v3'];
     event.waitUntil(
         caches.keys().then(function(cacheNames) {
             return Promise.all(