[React] getUserMedia() 오류 (사용자 오디오, 비디오 다루기)

getUserMedia()

사용자에게 미디어 입력을 사용할 수 있는 권한을 사용자에게 요청한다.  (오디오, 비디오)

navigator.mediaDevices
.getUserMedia(constraints)
.then((stream) => {
/* use the stream */
})
.catch((err) => {
/* handle the error */
});

getUserMedia()의 일반적인 오류 

상위 5개 오류

firefox	chrome
AbortError	AbortError
NotAllowedError	PermissionDeniedError
NotFoundError	DevicesNotFoundError
NotReadableError	TrackStartError
OverconstrainedError	ConstraintNotSatisfiedError

 

1. AbortError

- 사용자와 운영 체제 모두 하드웨어 장치에 대한 액세스 권한을 부여했으며, 장치를 사용할 수 없게 만드는NotReadableError 오류를 발생시키는 하드웨어 문제가 발생하지 않은 경우

2. NotAllowedError : 허용되지 않음

NotAllowError

- message : The request is not allowed by the user agent or the platform in the current context 

- 사용자가 웹캠이나 마이크에 대한 권한을 거부하거나 이전에 거부한 경우

- 페이지가 HTTPS가 아닌 HTTP를 사용하여 로드한 경우

3. NotFoundError : 장치 찾을 수 없음

- 비디오를 요청한 경우 사용자에게 웹캠이 없는 경우

- 오디오를 요청한 경우 사용자에게 마이크가 없는 경우

- 컴퓨터나 장치에 사운드 카드가 없는 경우

- 컴퓨터나 장치에 사운드 카드가 있지만 장치가 연결되어 있지 않은 경우

4. NotReadableError : 읽을 수 없음

- 사용자가 장치를 사용할 수 있는 권한을 부여했지만 운영 체제, 브라우저 또는 웹 페이지 수준에서 하드웨어 오류가 발생하여 장치에 대한 권한을 차단하는 경우

- 컴퓨터의 다른 앱에서 이미 사용 중인 경우

- 장치가 이미 다른 firefox 탭에서 사용 중인 경우(firefox만 해당)

- 사용자가 개인정보 보호 대화상자를 닫은 경우(chrome만 해당)

5. OverconstrainedError : 제약 조건에 충족하는 장치가 없음

- message : Constraints could be not satisfied.

- constraint : 문자열 값으로 충족할 수 없는 제약 조건의 이름(속성)을 반환

- 지정된 제약 조건에 기준을 충족하는 후보 장치가 없는 경우- ex) 1920 * 1080의 정확한 해상도를 요청할때 콘솔에서 error 속성중 constraintName : width가 확인된다.

 

getUserMedia() 예외 처리

navigator.mediaDevices
.getUserMedia({
    audio : true,
    video : true
}).then((stream) => {
    /* use the stream */
}).catch((err) => {
    console.log(err.name); 
    console.log(err.message);
    
    /* handle the error */
    if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
        
    } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
        
    } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
        
    } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
       
    } else if (err.name == "AbortError") {
        
    } else {
        
    }
});