미디어 장치 권한이 없을 때 대응하기

미디어 장치 권한을 허락받지 않았을 때 대응하기

현재 상황

현재 코드

useMediaDevices 커스텀 훅에서 미디어 장치들을 제어하고 있는다. 원래 의도대로라면 미디어 장치를 권한 이슈로 불러오지 못하면 에러가 뜨거나 아예 장치가 [] 빈 배열로 내려오는 것이었다.

  useEffect(() => {
    // 비디오 디바이스 목록 가져오기
    const getUserDevices = async () => {
      try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const audioDevices = devices.filter(
          (device) => device.kind === "audioinput"
        );
        const videoDevices = devices.filter(
          (device) => device.kind === "videoinput"
        );
        setUserAudioDevices(audioDevices);
        setUserVideoDevices(videoDevices);
      } catch (error) {
        console.error("미디어 기기를 찾는데 문제가 발생했습니다.", error);
      }
    };

    getUserDevices();
  }, []);

하지만 이 코드에서 에러는 발생하지 않고, 그렇다고 빈배열이 내려오는 것도 아니었다.

[
    {
        "deviceId": "",
        "kind": "audioinput",
        "label": "",
        "groupId": ""
    },
    {
        "deviceId": "",
        "kind": "videoinput",
        "label": "",
        "groupId": ""
    },
    {
        "deviceId": "",
        "kind": "audiooutput",
        "label": "",
        "groupId": ""
    }
]

실제 컴퓨터에서 미디어 장치가 3개 이상 있었고, 해당 장치들은 권한이 허락되어있지 않아도 위와 같이 숨겨진 채로 정보가 내려왔다.

📌 검증

검증하기 위해 검색해서 알아본 결과 미디어 장치 목록을 가져오는 것은 권한이 없어도 오류가 나지 않고 모두 빈 문자열 값으로 치환되어 내려온다는 것을 알게 되었다.

해결

const dontHavePermission = devices.find((device) => device.deviceId !== "") === undefined;
if (dontHavePermission) {
  setUserAudioDevices([]);
  setUserVideoDevices([]);
} else {
  setUserAudioDevices(audioDevices);
  setUserVideoDevices(videoDevices);
}

dontHavePermission : 디바이스 목록들이 모두 deviceId가 빈 문자열일 경우에 true 하나라도 있으면 false를 반환

이제 권한이 없어도 제대로 작동하는 것을 확인했다.

image.png