제약조건

Letsee WebAR SDK 는 WebRTC를 이용하여 Camera 로부터 vision을 획득하여 Video Stream 재생을 합니다. 그리고 이 Video Stream 을 바탕으로 각종 tracking 을 수행하여 AR 경험을 제공합니다.

데스크톱을 이용한 개발환경에서는 루프백 호스트명인 localhost 를 이용할 수 있습니다. localhost 로 기동된 웹 컨텐츠는 브라우저 위에서 실행되어도 연결된 camera permission 을 획득할 수 있습니다. 반면, ip address 의 경우, 브라우저에서 camera permission 을 획득하려는 시도를 제한하기 때문에 동작이 되지 않습니다.

그렇기 때문에 모바일 디바이스를 이용하여 WebAR contents 의 실행 및 디버깅을 수행하고 싶다면 https 프로토콜을 이용하여 웹 컨텐츠에 접근할 수 있도록 웹서버를 구성하거나 proxy pass 설정, proxy tunneling 을 이용하여 https 프로토콜을 이용하여 웹 컨텐츠에 접근하도록 구성할 수 있습니다.

정적 웹 컨텐츠의 웹 서버 구성하기

ngrok 을 이용한 proxy tunneling 구성하기

브라우저로 모바일 장치의 카메라에 액세스하려면 HTTPS로 연결해야 합니다. 그러나 개발용 로컬 웹 서버 구성에서 이 문제를 가장 간편하게 해결하는 방법은 ngrok의 무료 플랜을 이용하는 것입니다. 아래 명령은 8080번 포트의 로컬 웹서버를 외부에서 접속할 수 있는 ngrok의 터널링 기능을 실행합니다.

정상적으로 8080 포트가 연결되면 아래와 같은 화면이 표시되고 ngrok에서 제공하는 forwarding https url(e.g. https://a79f5e53.ngrok.io)을 Letsee for Developers에서 해당 프로젝트의 도메인에 등록하신 후 접속이 가능합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c1337637-a0dc-4963-ac9c-c12d8a796fe4/ngrok_screen.png

모바일 접속 시 HTTPS 인증

브라우저를 통해 모바일 카메라에 엑세스 하기 위해서는 HTTPS 인증서가 필요하기 때문에 로컬호스트 환경에서 웹앱을 제공하는것은 불편할 수 있습니다. 튜토리얼에서는 편의상 위에서 언급한 Python이나 nodejs를 이용하여 로컬 https 웹 서버를 실행하는 방식으로 예제소스에 접속할 수 있습니다.