mediaDevices

개념

window 객체에는 수 많은 속성값이 존재한다.
이 중 mediaDevices 의 특징은
1. 읽기 전용 속성이다.
2. 카메라, 마이크, 화면 공유와 같이 현재 연결된 미디어 입력 장치에 접근할 수 있는 MediaDevices 객체를 반환한다.

이때, localhost(127.0.0.1) 와 같은 개발 서버에서는 http 로도 돌아간다.
하지만 본인 ip 예를 들어 http://192.168.1.xxx:3000 로 들어가게 되면 MediaDevices 가 존재하지 않을 것이다.
이는 보안 때문이다.

참고로 127.0.0.1 과 본인 ip 로 접속했을 때의 차이점은 브라우저는 localhost 와 127.0.0.1 을 "보안 예외 도메인" 으로 보고, 이때만 HTTP에서도 mediaDevices 접근을 허용한다.

하지만 192.168.x.x, 10.x.x.x, 172.16.x.x 같은 사설 IP는 외부 환경일 수도 있다고 판단해서, HTTPS가 아니면 허용하지 않는다.

브라우저는 사이트가 보안이 제대로 된 환경인지 판단할 때, Secure Context라는 기준을 사용하는데,

✅ Secure Context:

https://example.com
http://localhost
http://127.0.0.1

❌ Not Secure:

http://192.168.1.x
http://example.com

navigator.mediaDevices.getUserMedia()는 Secure Context에서만 사용 가능한 대표적인 API 이다.

방법

따라서 일단 개발 환경에서 잠깐 테스트 해보기 위해 http 로 접속하며, 원격으로 붙어야할 경우엔 다음과 같은 step 을 따라하면 된다.

1. 원격으로 붙을 pc 접속
2. chrome://flags/ 에 접속
3. Insecure origins treated as secure 를 검색
4. 여기에 개발 서버 ip 를 입력 (해당 ip 를 허용해주겠다는 뜻)

   참고로 http://192.168.1.xxx:3000 처럼 포트번호까지 명확하게 입력해줘야한다.

5. 그리고 하단 재시작을 누르면 됨. ( 띄운 tab 들은 안 사라지는 마음 놓고 다시 시작 눌러도 됨. )

테스트가 다 끝나면 다시 원래대로 사용 X 으로 재설정하는 것이 좋습니다.