[Javascript] cannot read properties of undefined (reading 'getUserMedia') 해결하기

cannot read properties of undefined (reading 'getUserMedia')

 

WebRTC 로 클라이언트와 서버 간 영상 전송을 하고 있었습니다.

처음에는 같은 PC 에서 서버와 클라언트를 실행해서 잘 됐지만,

서버를 따로 두고 다른 클라이언트에서 접속했을 때 위와 같은 오류가 발생하는데요.

원인

우선 localhost 는 http 도 보안 출처로 간주합니다.

하지만 출처가 다른 곳에서 접속할때는 SSL/TLS 인증서가 필요합니다.

서버PC의 URL 로 접근을 했는데, 내 PC의 카메라/마이크에 접근을 하려고 합니다.

이때 이 서버에 인증서가 있는지 확인을 하게 됩니다.

이 서버의 URL이 https 가 아니면 

이렇게 표시가 되고, Media 에 접근 할 수 없게됩니다.

 

해결 방법 1.

서버에 인증서를 설치하는 방법이 있는데, 

비용도 발생하고.. 복잡합니다. 실제 서비스를 해야할 일이 있다면 ssl 인증서를 발급받아 서버에 설치해야 합니다.

 

해결 방법 2.

저는 테스트가 목적이기 때문에 몇개의 클라이언트에서만 실행이 되면 됩니다.

클라이언트에서 크롬 브라우저를 실행하고, 주소 입력 창에

chrome://flags

를 입력합니다.

상단 search 입력란에 Insecure origins treated as secure 를 입력합니다.

그리고 아래와 같이 접속 할 서버 ip 를 입력 후 Enable 시키고 브라우저를 다시 시작합니다.

그리고 다시 서버 주소로 접속하면, 카메라에 권한이 있는 것을 확인 할 수 있습니다.

 

navigator.mediaDevices.getUserMedia()

이 부분에서 오류가 발생하지 않습니다.