브라우저에서 마이크 사용 후 권한 해제하기

정혜인·2023년 11월 10일
0

vue

목록 보기
4/5

발생 문제 :

bgm 재생 중 -> 녹음 (bgm 중지) -> 녹음 완료 후 bgm을 다시 재생하는 로직이었는데,
특정 아이폰 기기에서 녹음을 완료한 후부터는 재생되는 bgm의 볼륨이 체감상 1/10 정도로 줄어들었다.
(삼성 휴대폰, 아이폰 15 프로는 볼륨 그대로 잘 작동했지만, 아이폰 13 미니, 아이폰 8플러스, 아이폰 13미니 등에서 해당 문제가 발생했다.)
하지만 실제 콘솔을 찍어 확인해보니 오디오 소스의 volume은 처음과 같았다.

발생 원인 :

원인을 파악하기 위해 여러 경우의 수 중 콘솔을 찍어보며 하나씩 경우를 줄여나갔고,
녹음을 위한 마이크 권한 허용 이후부터 볼륨이 줄어드는 문제 로 정의할 수 있었다.

-> 따라서 마이크 사용 이후에는 마이크 권한을 해제 해주면 될 것이라 생각하였다.

해결 방법 :

녹음을 위해서는 브라우저 정책 상 마이크 권한을 사용자에게 부여받아야 했고, 마이크 권한을 부여받은 후 마이크 권한을 다시 해제해주면 되었다.
구글에 여러 방법들이 나와있었지만, 우리 프로젝트에는 어떤 것도 제대로 작동하지 않았고,

try {
// 마이크 권한 해제 및 미디어 스트림 중지
  if (audioStream.value) {
    const tracks = audioStream.value.getTracks();
    tracks.forEach(track => track.stop());
  }
} catch (error) {
  console.error(error);
}

위 코드를 녹음을 중지하는 시점 (마이크 권한이 더이상 필요 없는 시점)에 삽입해주었더니 해결되었다.

0개의 댓글