switch meta tag to mp4

frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx

@@ -85,7 +85,7 @@ function SpotPlayerHeader({
   const onMenuClick = async ({ key }: { key: string }) => {
     if (key === '1') {
       const { url } = await spotStore.getVideo(spotStore.currentSpot!.spotId);
-      await downloadFile(url, `${spotStore.currentSpot!.title}.webm`);
+      await downloadFile(url, `${spotStore.currentSpot!.title}.mp4`);
     } else if (key === '2') {
       spotStore.deleteSpot([spotStore.currentSpot!.spotId]).then(() => {
         history.push(spotsList());

frontend/app/components/Spots/SpotsList/SpotListItem.tsx

@@ -79,7 +79,7 @@ function SpotListItem({
         return setIsEdit(true);
       case 'download':
         const { url } = await onVideo(spot.spotId);
-        await downloadFile(url, `${spot.title}.webm`);
+        await downloadFile(url, `${spot.title}.mp4`);
         return;
       case 'copy':
         copy(

spot/entrypoints/background.ts

@@ -896,7 +896,7 @@ export default defineBackground(() => {
                   const vPromise = fetch(videoURL, {
                     method: "PUT",
                     headers: {
-                      "Content-Type": "video/webm",
+                      "Content-Type": "video/mp4",
                     },
                     body: blob,
                   });
@@ -1035,7 +1035,7 @@ export default defineBackground(() => {
     }
   }
 
-  function base64ToBlob(base64: string, mimeType = "video/webm") {
+  function base64ToBlob(base64: string, mimeType = "video/mp4") {
     const binaryString = atob(base64.split(",")[1]);
     const byteNumbers = new Array(binaryString.length);
     for (let i = 0; i < binaryString.length; i++) {

spot/entrypoints/content/SavingControls.tsx

@@ -30,7 +30,7 @@ const base64ToBlob = (base64: string) => {
   for (let i = 0; i < byteString.length; i++) {
     ia[i] = byteString.charCodeAt(i);
   }
-  return new Blob([ab], { type: "video/webm" });
+  return new Blob([ab], { type: "video/mp4" });
 };
 
 function SavingControls({

spot/entrypoints/offscreen/main.js

@@ -8,7 +8,7 @@ function getRecordingSettings(qualityValue) {
     "4k": { audioBitsPerSecond: 192000, videoBitsPerSecond: 40000000, width: 4096, height: 2160 },
     "1080p": { audioBitsPerSecond: 192000, videoBitsPerSecond: 8000000, width: 1920, height: 1080 },
     // @default
-    "720p": { audioBitsPerSecond: 96000, videoBitsPerSecond: 2500000, width: 1280, height: 720 },
+    "720p": { audioBitsPerSecond: 128000, videoBitsPerSecond: 2500000, width: 1280, height: 720 },
     "480p": { audioBitsPerSecond: 96000, videoBitsPerSecond: 2500000, width: 854, height: 480 },
     "360p": { audioBitsPerSecond: 96000, videoBitsPerSecond: 1000000, width: 640, height: 360 },
     "240p": { audioBitsPerSecond: 64000, videoBitsPerSecond: 500000, width: 426, height: 240 },
@@ -19,7 +19,9 @@ function getRecordingSettings(qualityValue) {
   const duration = 3 * 60 * 1000; // 3 minutes
 
   const mimeTypes = [
-    // fastest trimming and HLS
+    // best support for backend
+    'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+    // fast trimming if we "pretend" that its a webm
     "video/webm;codecs=h264",
     "video/webm;codecs=avc1",
     "video/webm;codecs=av1",