http 접속시 getUserMedia 오류 카메라 오디오 기능을 못 가져와요

저번에 webRTC로 간단히 구현 하는 방법에 대해서 포스팅을 하였음.

혹시 궁금하신분들은 아래 링크 참고

https://cbn1218.tistory.com/70

초보자도 간단하게 만들어 보는 영상통화 기능(webRTC로 영상통화 만들기)

 

 

(1)문제점

테스트를 할때 각각 브라우져를 띄워 localhost로 클라이언트A와 B 로 접속할때는 문제가 없는데

하나는 각각 다른 단말기로 접속시 ip를 쳐서 들어갈때 내영상이 안뜨고 

Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')
이런 메세지가 콘솔창에 뜰 때가 있음. 

 

접속시 getUserMedia() 에서 카메라와 오디오 스트림을 가져와 내 비디오화면을 웹페이지에 띄워야 하는데

그이유는 브라우져 보안 정책상 http로 접속시 보안이 약하여 못가져오게 막고 https 일때만 스트림을 가져올수 있음.

 

그렇다면 https로 서버를 다시 구성해야 하냐?!

 

라고 물으신다면 실서비스에서는 https로 새로 구성해야 하지만 테스트용도로 쓰고 있다면 간단한 방법이 있음

 

바로 chrome://flags/ 에서 예외 처리를 하면됨.

 

그래서 오늘은 그부분에 대해서 글을 쓸려고 함. 

 

 

 

 

 

 

(2)방법

chrome://flags/ 접속 하고 " Insecure origins treated as secure " 서치창에 쓰면

아래와 같은 화면이 나오고 순서대로 예외처리할 ip주소를 쓰고 => 사용가능 으로 바꾸고 => 다시시작 을 누르면 됨

 

참고로 Insecure origins treated as secure 는 개발자 테스트를 위한 브라우저의 보안 예외 설정 임.

개발자가 특정ip를 등록하면 Chrome이 그 ip을 HTTPS처럼 취급하여 getUserMedia 등 보안 기능을 허용 함.

 

✅ 주의할점

목적	개발 및 테스트 용도로만 사용
브라우저에만 적용됨	다른 사람 브라우저에는 적용되지 않음
실제 서비스에 적용 불가	프로덕션 환경에서는 HTTPS 인증서 필요
브라우저 재시작 필요	설정 적용 시 브라우저 다시 껐다 켜야 함