MediaRecorder

디바이스 환경(하드웨어, 소프트웨어)에 따른 음성 녹음 및 재생 불가능 문제

안녕하세요 여러분! 이번 글에서는 제가 최근 프론트엔드 개발자로 참여한 프로젝트를 진행하면서 경험한 오디오 코덱 크로스브라우징 이슈의 원인과 해결 과정을 공유하려고 합니다. 1. 이슈 발생 배경? 🔥 해당 이슈는 프로젝트의 핵심 기능인 보이스리플 개발 과정에서 발견되었습니다. 작동 흐름을 간단히 설명하면 다음과 같습니다. 사용자가 보이스리플 녹음 버튼을 클릭합니다. 클라이언트 측에서 MediaRecorder를 이용하여 오디오를 녹음하고 Blob 형태로 저장합니다. FormData 객체를 생성하고, Blob 데이터를 추가합니다. axios를 사용하여 POST 요청을 생성하고, FormData 객체를 body로 설정하여 POST 요청을 전송합니다. 백엔드에서는 받은 파일을 AWS S3에 업로드합니다. 클라이..