working

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 { assFromClog, 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,8 +207,13 @@ 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())
+    console.log(videoTelemetryLog)
+    const assLog = assFromClog(videoTelemetryLog, `${fileName}.webm`)
+    var logBlob = new Blob([assLog], { type: 'text/plain' })
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
-      saveAs(fixedBlob, fileName)
+      saveAs(fixedBlob, `${fileName}.webm`)
+      saveAs(logBlob, `${fileName}.ass`)
       cockpitVideoDB.removeItem(fileName)
     })
     chunks = []

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,68 @@ 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) => logPoint.epoch > initialTime.getTime() && logPoint.epoch < finalTime.getTime())
+      .map((logPoint) => ({ ...logPoint, ...{ seconds: differenceInSeconds(new Date(logPoint.epoch), initialTime) } }))
+  }
+}
+
+export const assFromClog = (log: CockpitStandardLog, videoFilename: string): string => {
+  let assFile = `[Script Info]
+; Script generated by Aegisub 3.2.2
+; http://www.aegisub.org/
+Title: Default Aegisub file
+ScriptType: v4.00+
+WrapStyle: 0
+ScaledBorderAndShadow: yes
+YCbCr Matrix: TV.601
+PlayResX: 854
+PlayResY: 480
+
+[Aegisub Project Garbage]
+Audio File: ${videoFilename}
+Video File: ${videoFilename}
+Video AR Mode: 4
+Video AR Value: 1.779167
+Active Line: 2
+
+[V4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
+Style: Default,Arial,20,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,1,10,10,10,1
+
+[Events]
+Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text`
+
+  log.forEach((logPoint) => {
+    const roll = Number(logPoint.data['roll']).toFixed(2)
+    const pitch = Number(logPoint.data['pitch']).toFixed(2)
+    const heading = Number(logPoint.data['heading']).toFixed(2)
+    const depth = Number(logPoint.data['depth']).toFixed(2)
+    const mode = logPoint.data['mode']
+    const batteryVoltage = Number(logPoint.data['batteryVoltage']).toFixed(2)
+    const batteryCurrent = Number(logPoint.data['batteryCurrent']).toFixed(2)
+    const gpsVisibleSatellites = logPoint.data['gpsVisibleSatellites']
+    const gpsFixType = logPoint.data['gpsFixType']
+    const latitude = logPoint.data['latitude']
+    const longitude = logPoint.data['longitude']
+    const secondsStart = logPoint.seconds.toFixed(0)
+    const secondsFinish = (logPoint.seconds + 1).toFixed(0)
+    assFile = assFile.concat(`\nDialogue: 0,0:0:${secondsStart}.00,0:0:${secondsFinish}.00,Default,,0,0,0,,{\pos(14,457)}Pitch: ${pitch} \\NRoll: ${roll} \\NHeading: ${heading}`)
+    assFile = assFile.concat(`\nDialogue: 0,0:0:${secondsStart}.00,0:0:${secondsFinish}.00,Default,,0,0,0,,{\pos(185,457)}Depth: ${depth} \\NVoltage: ${batteryVoltage}\\NCurrent:${batteryCurrent}`)
+  })
+  assFile = assFile.concat('\n')
+
+  console.log(assFile)
+  return assFile
 }
 
 export const datalogger = new DataLogger()