[Trouble Shooting] 미디어 스트림 오류 ->> TypeError: Cannot read properties of undefined (reading 'getUserMedia')

 

AWS S3에 React 클라이언트를 배포하고 테스트를 진행했다.

 

 

        const constraints = { audio: true, video: true };

        navigator.mediaDevices.getUserMedia(constraints)

            .then((stream) => {

                setLocalStream(stream);

            })

            .catch((error) => {

                console.error(error);

            });

미디어 스트림 데이터를 localStream 에 저장하는 코드에서 오류가 생겼다.

 

미디어 스트림에 접근할 수 없었고, 

이를 해결하기 위해서는 https로 ssl 인증서를 발급받아 적용시키는 법이 있었다.

 

하지만 이거슨....

 

 

이 프로젝트의 목적은 상용화가 아니기 때문에

다음 방법을 사용했다.

 

 

해결 방법

먼저, 사용하는 브라우저는 크롬이다.

( 파이어폭스는 이렇게 안해도 된다는데, 내가 파이어폭스에서 했을 때는 안됐다.. )

 

chrome://flags

에서

Insecure origins treated as secure

이 설정에서

 

박스 안에 aws s3의 엔드포인트를 넣어준 후 enable 로 바꿔준 후

하단에 표시되는 Relaunch를 해준다.

 

이렇게 하면 해결~