fix: add duration metadata to recorded WebM files

mvanhorn · claude · antfu · commit a60d66db2ade · 2026-04-08T11:46:15.000+09:00
RecordRTC WebM recordings lack duration metadata, making video players unable to show duration or allow seeking. Use fix-webm-duration to inject the correct duration into the WebM blob before downloading. Closes #1847 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
diff --git a/packages/client/logic/recording.ts b/packages/client/logic/recording.ts
@@ -3,6 +3,7 @@ import type { Options as RecorderOptions } from 'recordrtc'
 import type { Ref } from 'vue'
 import { isTruthy } from '@antfu/utils'
 import { useDevicesList, useEventListener, useLocalStorage } from '@vueuse/core'
+import fixWebmDuration from 'fix-webm-duration'
 import { nextTick, ref, shallowRef, watch } from 'vue'
 import { currentCamera, currentMic } from '../state'
 
@@ -78,6 +79,7 @@ export function useRecording() {
   const streamCamera: Ref<MediaStream | undefined> = shallowRef()
   const streamCapture: Ref<MediaStream | undefined> = shallowRef()
   const streamSlides: Ref<MediaStream | undefined> = shallowRef()
+  let recordingStartTime = 0
 
   const config: RecorderOptions = {
     type: 'video',
@@ -183,33 +185,39 @@ export function useRecording() {
     )
 
     recorderSlides.value.startRecording()
+    recordingStartTime = Date.now()
     recording.value = true
   }
 
   async function stopRecording() {
     recording.value = false
+    const duration = Date.now() - recordingStartTime
+
     recorderCamera.value?.stopRecording(() => {
       if (recordCamera.value) {
         const blob = recorderCamera.value!.getBlob()
-        const url = URL.createObjectURL(blob)
-        download(getFilename('camera', config.mimeType), url)
-        window.URL.revokeObjectURL(url)
+        downloadBlob(blob, duration, getFilename('camera', config.mimeType))
       }
       recorderCamera.value = undefined
       if (!showAvatar.value)
         closeStream(streamCamera)
     })
     recorderSlides.value?.stopRecording(() => {
       const blob = recorderSlides.value!.getBlob()
-      const url = URL.createObjectURL(blob)
-      download(getFilename('screen', config.mimeType), url)
-      window.URL.revokeObjectURL(url)
+      downloadBlob(blob, duration, getFilename('screen', config.mimeType))
       closeStream(streamCapture)
       closeStream(streamSlides)
       recorderSlides.value = undefined
     })
   }
 
+  async function downloadBlob(blob: Blob, duration: number, filename: string) {
+    const fixedBlob = await fixWebmDuration(blob, duration, { logger: false })
+    const url = URL.createObjectURL(fixedBlob)
+    download(filename, url)
+    window.URL.revokeObjectURL(url)
+  }
+
   function closeStream(stream: Ref<MediaStream | undefined>) {
     const s = stream.value
     if (!s)
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -49,6 +49,7 @@
     "ansis": "catalog:prod",
     "drauu": "catalog:frontend",
     "file-saver": "catalog:frontend",
+    "fix-webm-duration": "catalog:frontend",
     "floating-vue": "catalog:frontend",
     "fuse.js": "catalog:frontend",
     "katex": "catalog:frontend",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -63,6 +63,7 @@ catalogs:
     '@vueuse/motion': ^3.0.3
     drauu: ^1.0.0
     file-saver: ^2.0.5
+    fix-webm-duration: ^1.0.6
     floating-vue: ^5.2.2
     fuse.js: ^7.1.0
     katex: ^0.16.33
