修改bug

src/views/record/shot.vue

@@ -84,8 +84,8 @@ export default defineComponent({
     const videoRecorder = new VideoRecorder(config);
     const showLeftPano = ref(false)
     const showBottomBar = ref(false)
-    const MAX_SIZE = 2048 * 1024 * 1024
-    const MAX_TIME = 30 * 60 * 1000
+    const MAX_SIZE = 10 * 1024 * 1024
+    const MAX_TIME = 10 * 1000
 
     type VideoItem = { origin: Blob | string, cover: string }
 
@@ -93,7 +93,7 @@ export default defineComponent({
     let interval: NodeJS.Timer
     let recordIng = ref(false)
     const start = () => {
-      if (size.value > MAX_SIZE) {
+      if (size.value > MAX_SIZE || pauseTime.value < 2000) {
         return Message.warning('已超出限制大小无法继续录制，可保存后继续录制！')
       }
 
@@ -119,7 +119,7 @@ export default defineComponent({
     }
 
     const pause = () => {
-      if (countdown.value === 0 && recordIng) {
+      if (countdown.value === 0 && recordIng.value) {
         videoRecorder.endRecord()
         recordIng.value = false
       }
@@ -128,24 +128,31 @@ export default defineComponent({
       clearInterval(interval)
     }
 
-    watchEffect((onCleanup) => {
+    watch(recordIng, (_n, _o, onCleanup) => {
       if (recordIng.value) {
-        const timeout = setTimeout(pause, (MAX_TIME * size.value) / MAX_SIZE)
+        const timeout = setTimeout(() => videoRecorder.endRecord(), pauseTime.value)
         onCleanup(() => clearTimeout(timeout))
       }
     })
 
     const blobs: File[] = shallowReactive([])
-    const size = computed(() => blobs.reduce((t, f) => t + f.size, 0))
+    const size = computed(() => {
+      console.log(videoList)
+      return videoList.reduce((t, f) => typeof f.origin === 'string' ? t : t + f.origin.size, 0)
+    })
+    const pauseTime = computed(() => (MAX_TIME / MAX_SIZE) * (MAX_SIZE - size.value))
     videoRecorder.off('*')
     videoRecorder.on('record', blob => {
-      blobs.push(new File([blob], '录屏.mp4', { type: 'video/mp4; codecs=h264' }))
+      if (recordIng.value) {
+        blobs.push(new File([blob], '录屏.mp4', { type: 'video/mp4; codecs=h264' }))
+      }
     })
     videoRecorder.on('cancelRecord', pause)
     videoRecorder.on('endRecord', pause)
 
     const palyUrl = ref<string | Blob | null>(null)
     const videoList: VideoItem[] = shallowReactive([])
+    let initial = false
     watch([blobs, props], async () => {
       const existsVideos = []
 
@@ -169,9 +176,14 @@ export default defineComponent({
       if (!props.record.cover && videoList.length) {
         emit('updateCover', videoList[0].cover)
       }
+      if (!initial) {
+        initial = true
+        start()
+      }
+      
     }, { immediate: true })
 
-    const upHandler = (ev: KeyboardEvent) => ev.code === `Escape` && pause()
+    const upHandler = (ev: KeyboardEvent) => ev.code === `Escape` && videoRecorder.endRecord()
     document.body.addEventListener('keyup', upHandler, { capture: true })
 
     const complete = () => {
@@ -184,7 +196,6 @@ export default defineComponent({
       emit('close')
     }
 
-    start()
     const barHeight = computed(() => videoList.length ? '180px' : '60px')
     
     onUnmounted(() => {