wip

src/components/mini-widgets/MiniVideoRecorder.vue

@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { useMouseInElement, useTimestamp } from '@vueuse/core'
-import { format, intervalToDuration } from 'date-fns'
+import { differenceInSeconds, format, intervalToDuration } from 'date-fns'
 import { saveAs } from 'file-saver'
 import fixWebmDuration from 'fix-webm-duration'
 import localforage from 'localforage'
@@ -64,6 +64,7 @@ import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vu
 import adapter from 'webrtc-adapter'
 
 import { WebRTCManager } from '@/composables/webRTC'
+import { datalogger } from '@/libs/logging'
 import type { Stream } from '@/libs/webrtc/signalling_protocol'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
@@ -194,6 +195,9 @@ 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)
+  if (!datalogger.logging()) {
+    datalogger.startLogging()
+  }
   mediaRecorder.value.start(1000)
   let chunks: Blob[] = []
   mediaRecorder.value.ondataavailable = async (e) => {
@@ -203,6 +207,12 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
 
   mediaRecorder.value.onstop = () => {
     const blob = new Blob(chunks, { type: 'video/webm' })
+    const videoTelemetryLog = datalogger.getSlice(datalogger.currentCockpitLog, timeRecordingStart.value, new Date())
+    const fixedVideoTelemetryLog = videoTelemetryLog.map((logPoint) => ({
+      ...logPoint,
+      ...{ seconds: differenceInSeconds(new Date(logPoint.epoch), timeRecordingStart.value) },
+    }))
+    console.log(fixedVideoTelemetryLog)
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
       saveAs(fixedBlob, fileName)
       cockpitVideoDB.removeItem(fileName)

src/libs/logging.ts

@@ -6,25 +6,35 @@ import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import { degrees } from './utils'
 
+/**
+ * Format for a standalone cockpit log
+ */
+export interface CockpitStandardLogPoint {
+  /**
+   * Universal Linux epoch time (milliseconds since January 1st, 1970, UTC)
+   */
+  epoch: number
+  /**
+   * Seconds passed since the beggining of the logging
+   */
+  seconds: number
+  /**
+   * The actual vehicle data
+   */
+  data: Record<string, number | string>
+}
+
+/**
+ * Format for a standalone cockpit log
+ */
+export type CockpitStandardLog = CockpitStandardLogPoint[]
+
 /**
  * Manager logging vehicle data and others
  */
 class DataLogger {
   currentLoggerInterval: ReturnType<typeof setInterval> | undefined = undefined
-  currentCockpitLog: {
-    /**
-     * Universal Linux epoch time (milliseconds since January 1st, 1970, UTC)
-     */
-    epoch: number
-    /**
-     * Seconds passed since the beggining of the logging
-     */
-    seconds: number
-    /**
-     * The actual vehicle data
-     */
-    data: Record<string, number | string>
-  }[] = []
+  currentCockpitLog: CockpitStandardLog = []
 
   /**
    * Start an intervaled logging
@@ -91,6 +101,19 @@ class DataLogger {
   logging(): boolean {
     return this.currentLoggerInterval !== undefined
   }
+
+  /**
+   * Get desired part of a log based on timestamp
+   * @param {CockpitStandardLog} completeLog The log from which the slice should be taken from
+   * @param {Date} initialTime The timestamp from which the log should be started from
+   * @param {Date} finalTime The timestamp in which the log should be terminated
+   * @returns {CockpitStandardLog} The actual log
+   */
+  getSlice(completeLog: CockpitStandardLog, initialTime: Date, finalTime: Date): CockpitStandardLog {
+    return completeLog.filter((logPoint) => {
+      return logPoint.epoch > initialTime.getTime() && logPoint.epoch < finalTime.getTime()
+    })
+  }
 }
 
 export const datalogger = new DataLogger()