From 5b5403c06476c1584c81c330afb775c200141490 Mon Sep 17 00:00:00 2001 From: Rafael Araujo Lehmkuhl Date: Fri, 15 Sep 2023 13:40:48 -0300 Subject: [PATCH] Use `fix-webm-duration` lib to fix video blob duration --- src/components/mini-widgets/MiniVideoRecorder.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue index 5da72a66a..5b262695b 100644 --- a/src/components/mini-widgets/MiniVideoRecorder.vue +++ b/src/components/mini-widgets/MiniVideoRecorder.vue @@ -56,6 +56,7 @@ import { useMouseInElement, useTimestamp } from '@vueuse/core' import { format, intervalToDuration } from 'date-fns' import { saveAs } from 'file-saver' +import fixWebmDuration from 'fix-webm-duration' import Swal, { type SweetAlertResult } from 'sweetalert2' import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue' import adapter from 'webrtc-adapter' @@ -184,8 +185,10 @@ const startRecording = async (): Promise => { mediaRecorder.value.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }) + fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => { + saveAs(fixedBlob, `${missionName} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`) + }) chunks = [] - saveAs(blob, `${missionName} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`) mediaRecorder.value = undefined if (selectedStream.value?.id === 'screenStream' && mediaStream.value !== undefined) { // If recording the screen stream, stop the tracks also, so the browser removes the recording warning.