wip

src/components/mini-widgets/MiniVideoRecorder.vue

@@ -57,6 +57,7 @@ import { useMouseInElement, useTimestamp } from '@vueuse/core'
 import { format, intervalToDuration } from 'date-fns'
 import { saveAs } from 'file-saver'
 import fixWebmDuration from 'fix-webm-duration'
+import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
 import Swal, { type SweetAlertResult } from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
@@ -109,6 +110,17 @@ onBeforeMount(async () => {
     }
   }
   addScreenStream()
+
+  const videoKeys = await localforage.keys()
+  videoKeys.forEach(async (savedVideoName) => {
+    const videoBlobArray: Blob[] = await localforage.getItem(savedVideoName)
+    const blob = videoBlobArray.reduce((a, b) => new Blob([a, b], { type: 'video/webm' }))
+    fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
+      saveAs(fixedBlob, savedVideoName)
+    })
+    await localforage.removeItem(savedVideoName)
+  })
+
 })
 
 const toggleRecording = async (): Promise<void> => {
@@ -183,15 +195,20 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
   }
 
   timeRecordingStart.value = new Date()
+  const fileName = `${missionName || 'Cockpit'} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`
   mediaRecorder.value = new MediaRecorder(mediaStream.value)
-  mediaRecorder.value.start()
+  mediaRecorder.value.start(1000)
   let chunks: Blob[] = []
-  mediaRecorder.value.ondataavailable = (e) => chunks.push(e.data)
+  mediaRecorder.value.ondataavailable = async (e) => {
+    chunks.push(e.data)
+    await localforage.setItem(fileName, chunks, () =>
+      console.log('Saving...', chunks.map((b) => b.size).sum() / 10 ** 6)
+    )
+  }
 
   mediaRecorder.value.onstop = () => {
     const blob = new Blob(chunks, { type: 'video/webm' })
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
-      const fileName = `${missionName || 'Cockpit'} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`
       saveAs(fixedBlob, fileName)
     })
     chunks = []