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

안녕하세요 여러분! 이번 글에서는 제가 최근 프론트엔드 개발자로 참여한 프로젝트를 진행하면서 경험한

오디오 코덱 크로스브라우징 이슈의 원인과 해결 과정을 공유하려고 합니다.

해당 이슈는 프로젝트의 핵심 기능인 보이스리플 개발 과정에서 발견되었습니다. 작동 흐름을 간단히 설명하면 다음과 같습니다.

보이스리플 개발을 거의 완료한 후, 팀원들과 함께 진행한 기능 테스트 과정에서 다음과 같은 문제가 발생했습니다.

이런 문제를 만나 당황했지만, 배포 전에 발견된 것이 다행이라고 생각하며 원인을 착기 위해 자료 조사를 시작했습니다.

같은 Chorme 브라우저임에도 불구하고 운영체제(OS)에 따른 문제가 발생한 것으로 추측하였고, 사용했던 MediaRecorder API 관련 MDN 문서들을 참조하여 원인을 파악했습니다.

MediaRecorder 생성자에서 mimeType 옵션을 사용하면 녹음이나 비디오 캡처 시 사용할 미디어 형식과 코덱을 지정할 수 있습니다.
디바이스 환경(하드웨어,소프트웨어)에 따라 지원하는 미디어 유형과 코덱이 다르며, mimeType을 지정하지 않으면 디바이스 환경에 맞춰 기본값이 적용됩니다.
미디어 형식과 코덱에 따라 미디어의 품질과 크기가 달라집니다.
지원하지 않는 mimeType을 지정하면 에러(NotSupportedError)를 반환합니다.

위 정보를 바탕으로 원인은 디바이스 환경에 따른 오디오 형식의 차이 때문에 발생한 문제임을 알게 되었습니다.

문제의 원인을 팀원들과 공유한 후, 보이스리플 백엔드 담당자와 함께 해결 방안에 대해 논의했습니다.

결론적으로 다음과 같은 방안을 세웠습니다.

이에 따라 클라이언트에서 MP3로 인코딩하기 위해 ffmpeg 관련 라이브러리를 찾아 사용했습니다.이를 통해 MP3 변환에 성공하였고,크로스브라우징 이슈를 해결할 수 있었습니다.

이번 오디오 관련 이슈 해결을 통해 다양한 미디어 타입(video, audio, image 등)에 대한 이해를 높일 수 있었고, 개발자는 사용자를 위해 최적의 선택을 해야 한다는 것을 깨달았습니다.

또한, 오디오 인코딩을 클라이언트에서 진행함으로써 서버 부하를 줄일 수 있다는 생각은 했지만, 사용자의 단말기 사양 또한 중요한 역할을 한다는 것을 인지하게 되었습니다.

이상으로 오디오 코덱 크로스브라우징 이슈에 대한 글을 마치겠습니다.

iOS에서 지원하는 오디오 타입 찾기

MediaRecorder 관련 MDN

코덱을 이해하는데 도움이 된 자료

mimeTpye과 종류에 대해

티스토리툴바