프런트엔드에서 FileReader를 이용한 MP4 오디오 존재 여부 확인

이 게시물은 MP4 파일의 구조를 분석하여 오디오 트랙의 존재 여부를 웹 프런트엔드에서 효율적으로 판단하는 방법을 소개합니다.

주요 접근 방법

• 브라우저별 웹 API의 한계로 인해 MP4 파일 내 'hdlr' 아톰과 'soun' 필드를 직접 검사하는 방식을 선택
• HTTP Range 요청을 활용해 필요한 바이너리 데이터만 부분적으로 다운로드하여 데이터 사용량 최소화
• FileReader로 받은 바이너리 데이터를 문자열로 변환해 오디오 존재 여부를 판단
• iOS 16 미만 Safari 브라우저에서 Range 헤더 관련 CORS 이슈 발생 및 대응 방안 논의

적용 결과

오디오 존재 여부를 정확하게 판단하여 동영상 섬네일에 적절한 아이콘을 표시하는 기능을 성공적으로 구현하였습니다.