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

🚫 문제 상황

JS에서 video태그를 사용해서 webcam을 실행하고 이를 파이썬 서버로 보내는 기능을 구현하려고 함.

그런데 localhose에서는 카메라가 잘 작동했는데 프로젝트를 NCP에 올리고 public ip로 접속하니 제목에 명시한 에러 발생.

 

❗️ 문제 원인

localhost 는 http 도 보안 출처로 간주하지만, 출처가 다른 곳에서 접속할때는 SSL/TLS 인증서가 필요함.

내 PC의 카메라/마이크에 접근을 하려고 할 때, 이때 이 서버에 인증서가 있는지 확인을 하게 되는데,

이 서버의 URL이 https 가 아니면 

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

 

💊 해결 방법 1 : 서버에 인증서 설치

비용 발생. 실제 서비스를 해야 할 일이 있다면 ssl 인증서를 발급 받아 서버에 설치해야 함.

 

💊 해결 방법 2 : 일시적

테스트가 목적이므로 url에 접속할 pc에서 진행해주면 됨.

 

1 ) 크롬 브라우저에서 아래 주소 입력

chrome://flags

 

2) 상단 search 입력란에 Insecure origins treated as secure 입력. 

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

 

3) 그리고 다시 서버 주소로 접속하면, 카메라에 권한이 있는 것을 확인 가능.

 

 

📌 출처

https://hello-bryan.tistory.com/467

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