fix: video having no duration (see muaz-khan/RecordRTC#147)

N.B.: adds ts-ebml dependency (from a fork as the corresponding PR is not merged yet: legokichi/ts-ebml#38)

packages/client/logic/recording.ts

@@ -1,11 +1,17 @@
+import { getSeekableBlob } from 'recordrtc'
 import type { Ref } from 'vue'
 import { nextTick, ref, shallowRef, watch } from 'vue'
 import { useDevicesList, useEventListener } from '@vueuse/core'
 import { isTruthy } from '@antfu/utils'
 import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
+// @ts-expect-error import EBML
+import * as EBML from 'ts-ebml/lib/ts-ebml.export.min.js'
 import { currentCamera, currentMic } from '../state'
 
+// @ts-expect-error put EBML in window
+window.EBML = EBML
+
 export const recordingName = ref('')
 export const recordCamera = ref(true)
 
@@ -155,22 +161,24 @@ export function useRecording() {
     recording.value = false
     recorderCamera.value?.stopRecording(() => {
       if (recordCamera.value) {
-        const blob = recorderCamera.value!.getBlob()
-        const url = URL.createObjectURL(blob)
-        download(getFilename('camera'), url)
-        window.URL.revokeObjectURL(url)
+        getSeekableBlob(recorderCamera.value!.getBlob(), (seekableBLob) => {
+          const url = URL.createObjectURL(seekableBLob)
+          download(getFilename('camera'), url)
+          window.URL.revokeObjectURL(url)
+        })
       }
       recorderCamera.value = undefined
       if (!showAvatar.value)
         closeStream(streamCamera)
     })
     recorderSlides.value?.stopRecording(() => {
-      const blob = recorderSlides.value!.getBlob()
-      const url = URL.createObjectURL(blob)
-      download(getFilename('screen'), url)
-      window.URL.revokeObjectURL(url)
-      closeStream(streamSlides)
-      recorderSlides.value = undefined
+      getSeekableBlob(recorderSlides.value!.getBlob(), (seekableBLob) => {
+        const url = URL.createObjectURL(seekableBLob)
+        download(getFilename('screen'), url)
+        window.URL.revokeObjectURL(url)
+        closeStream(streamSlides)
+        recorderSlides.value = undefined
+      })
     })
   }
 

packages/client/package.json

@@ -30,6 +30,7 @@
     "prettier": "^2.5.1",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.0",
+    "ts-ebml": "guest271314/ts-ebml#guest271314-patch-1",
     "vite-plugin-windicss": "^1.7.0",
     "vue": "^3.2.30",
     "vue-router": "^4.0.12",