Backup video while recording and offer download on next Cockpit boot

package.json

@@ -38,6 +38,7 @@
     "gsap": "^3.11.3",
     "haversine-distance": "^1.2.1",
     "leaflet": "1.9.3",
+    "localforage": "^1.10.0",
     "pinia": "^2.0.13",
     "roboto-fontface": "*",
     "sweetalert2": "^11.7.1",

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'
@@ -101,6 +102,14 @@ const isRecording = computed(() => {
   return mediaRecorder.value !== undefined && mediaRecorder.value.state === 'recording'
 })
 
+const cockpitVideoDB = localforage.createInstance({
+  driver: localforage.INDEXEDDB,
+  name: 'CockpitVideoDB',
+  storeName: 'cockpit-video-db',
+  version: 1.0,
+  description: 'Local backups of Cockpit video recordings to be retrieved in case of failure.',
+})
+
 onBeforeMount(async () => {
   // Set initial widget options if they don't exist
   if (Object.keys(miniWidget.value.options).length === 0) {
@@ -183,16 +192,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 cockpitVideoDB.setItem(fileName, chunks)
+  }
 
   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)
+      cockpitVideoDB.removeItem(fileName)
     })
     chunks = []
     mediaRecorder.value = undefined

src/stores/video.ts

@@ -1,10 +1,52 @@
 import { useStorage } from '@vueuse/core'
+import { saveAs } from 'file-saver'
+import localforage from 'localforage'
 import { defineStore } from 'pinia'
+import Swal from 'sweetalert2'
 import { reactive } from 'vue'
 
 export const useVideoStore = defineStore('video', () => {
   const availableIceIps = reactive<string[]>([])
   const allowedIceIps = useStorage<string[]>('cockpit-allowed-stream-ips', [])
 
+  // Offer download of backuped videos
+  const cockpitVideoDB = localforage.createInstance({
+    driver: localforage.INDEXEDDB,
+    name: 'CockpitVideoDB',
+    storeName: 'cockpit-video-db',
+    version: 1.0,
+    description: 'Local backups of Cockpit video recordings to be retrieved in case of failure.',
+  })
+
+  cockpitVideoDB.length().then((len) => {
+    if (len === 0) return
+
+    Swal.fire({
+      title: 'Video recording recovery',
+      text: `Cockpit has pending backups for videos that you started recording but did not download.
+        Click 'Discard' to remove the backuped files.
+        Click 'Dismiss' to postpone this decision for the next boot.
+        Click 'Download' to download the files. If you decide to download them, they will be removed afterwards.
+      `,
+      icon: 'warning',
+      showDenyButton: true,
+      showCancelButton: true,
+      confirmButtonText: 'Download',
+      denyButtonText: 'Discard',
+      cancelButtonText: 'Dismiss',
+    }).then((decision) => {
+      if (decision.isDismissed) return
+      if (decision.isDenied) {
+        cockpitVideoDB.iterate((_, videoName) => cockpitVideoDB.removeItem(videoName))
+      } else if (decision.isConfirmed) {
+        cockpitVideoDB.iterate((videoFile, videoName) => {
+          const blob = (videoFile as Blob[]).reduce((a, b) => new Blob([a, b], { type: 'video/webm' }))
+          saveAs(blob, videoName)
+        })
+        cockpitVideoDB.iterate((_, videoName) => cockpitVideoDB.removeItem(videoName))
+      }
+    })
+  })
+
   return { availableIceIps, allowedIceIps }
 })