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

We're importing recordrtc dependency twice (second time from github URL instead of from npm registry) in order to have the required EBML.js file (which is not packed in the npm registry version)

packages/client/logic/recording.ts

@@ -1,3 +1,4 @@
+import { getSeekableBlob } from 'recordrtc'
 import type { Ref } from 'vue'
 import { nextTick, ref, shallowRef, watch } from 'vue'
 import { useDevicesList, useEventListener } from '@vueuse/core'
@@ -6,6 +7,8 @@ import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
 import { currentCamera, currentMic } from '../state'
 
+import 'recordrtc-github/libs/EBML'
+
 export const recordingName = ref('')
 export const recordCamera = ref(true)
 
@@ -155,22 +158,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

@@ -29,6 +29,7 @@
     "nanoid": "^3.2.0",
     "prettier": "^2.5.1",
     "recordrtc": "^5.6.2",
+    "recordrtc-github": "muaz-khan/RecordRTC#5.6.2",
     "resolve": "^1.22.0",
     "vite-plugin-windicss": "^1.7.0",
     "vue": "^3.2.30",