✨ feat: Record in MP4 container if able

khk4912 · Aug 6, 2024 · 66e0edc · 66e0edc
1 parent 8e43150
commit 66e0edc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/pages/record_result/components/DownloadButtons.tsx b/pages/record_result/components/DownloadButtons.tsx
@@ -25,19 +25,25 @@ export function DownloadButtons ({ downloadInfo }: { downloadInfo: DownloadInfo
       </ButtonBase>
 
       <h3>변환 후 다운로드</h3>
+      {((downloadInfo?.recordInfo.isMP4) ?? false) && '영상이 MP4로 MP4로 변환은 숨겨졌어요.'}
+
       <div className={`after-transcode ${!isFFmpegReady ? 'disabled' : ''}`}>
-        <ButtonBase onClick={() => {
-          void toMP4(ffmpeg.current, downloadInfo?.recordInfo.resultBlobURL ?? '')
-            .then((url) => { download(url, 'mp4') })
-        }}
-        >MP4
-        </ButtonBase>
-        <ButtonBase onClick={() => {
-          void toMP4AAC(ffmpeg.current, downloadInfo?.recordInfo.resultBlobURL ?? '')
-            .then((url) => { download(url, 'mp4') })
-        }}
-        >MP4 (호환성)
-        </ButtonBase>
+
+        {!((downloadInfo?.recordInfo.isMP4) ?? false) &&
+          <>
+            <ButtonBase onClick={() => {
+              void toMP4(ffmpeg.current, downloadInfo?.recordInfo.resultBlobURL ?? '')
+                .then((url) => { download(url, 'mp4') })
+            }}
+            >MP4
+            </ButtonBase>
+            <ButtonBase onClick={() => {
+              void toMP4AAC(ffmpeg.current, downloadInfo?.recordInfo.resultBlobURL ?? '')
+                .then((url) => { download(url, 'mp4') })
+            }}
+            >MP4 (호환성)
+            </ButtonBase>
+          </>}
         <ButtonBase onClick={() => {
           void toGIF(ffmpeg.current, downloadInfo?.recordInfo.resultBlobURL ?? '')
             .then((url) => { download(url, 'gif') })

diff --git a/src/utils/record/record.ts b/src/utils/record/record.ts
@@ -1,21 +1,26 @@
 import type { RecordInfo } from '../../../types/record_info'
-import { getRecordInfo, setRecordInfo } from './record_info_helper'
 import { getStreamInfo } from '../stream_info'
+import { getRecordInfo, setRecordInfo } from './record_info_helper'
 
 export async function startRecord (video: HTMLVideoElement): Promise<MediaRecorder | null> {
   const streamInfo = getStreamInfo(document)
   const stream = video.captureStream()
 
+  const isSupportMP4 = MediaRecorder.isTypeSupported('video/mp4;codecs=avc1,mp4a.40.2')
   const recorder = new MediaRecorder(stream, {
-    mimeType: 'video/webm;codecs=avc1',
+    mimeType:
+     isSupportMP4
+       ? 'video/mp4;codecs=avc1,mp4a.40.2'
+       : 'video/webm;codecs=avc1',
     videoBitsPerSecond: 8000000
   })
 
   const newRecordInfo = {
     startDateTime: new Date().getTime(),
     stopDateTime: -1,
     resultBlobURL: '',
-    streamInfo
+    streamInfo,
+    isMP4: isSupportMP4
   }
 
   recorder.recordInfo = newRecordInfo