Zoom 만들기 15. 모바일에서 사용하기

1. 모바일에서도 사용할 수 있게 하기.

1-1) local tunnel 사용하기

localtunnel은 서버를 전 세계와 공유할 수 있게 해준다.

localhost:3000에서만 되던 것을 누구나 접근해서 볼 수 있도록 URL을 생성해 주기 때문이다.

 

npm i -g localtunnel

local tunnel을 다음과 같은 명령어로 다운받으면 LT명령어를 사용할 수 있다.

터미널에 'lt'를 입력하면 사용법을 확인할 수 있다.

lt명령어를 이해하자.

1-2) 포트 공유하기

터미널에서 'npm run dev'로 서버를 실행시키고

'lt --port 3000' 이라는 명령어를 실행하면

특정 url을 제공해준다.

생성되는 url은 랜덤이다.

저 링크로 들어가면 모바일로도 마치 내 localhost:3000 ip로 들어간것과 같게 처리된다.

모바일과 pc가 동시에 같이 접속하여 화상대화가 가능하다.

 

1-3) STUN서버 적용하기

 

혹시라도 같은 와이파이가 아니거나 데이터 ip가 다른 경우를 대비해서 구글이 무료로 제공하는 STUN서버를 사용하여 우리코드에 제공하도록하자.  ( 서로다른 기기, 서로다른 IP더라도 오류없이 원활한 통신이 가능하다. 

 

//RTC Code

function makeConnection() {

    myPeerConnection = new RTCPeerConnection({

    iceServers: [

        {

            urls: [

                "stun:stun.l.google.com:19302",

                "stun:stun1.l.google.com:19302",

                "stun:stun2.l.google.com:19302",

                "stun:stun3.l.google.com:19302",

                "stun:stun4.l.google.com:19302",

            ]

        }

    ]

    });

    myPeerConnection.addEventListener("icecandidate", handleIce);

    myPeerConnection.addEventListener("addstream", handleAddStream);

    myStream.getTracks()

    .forEach(track => myPeerConnection.addTrack(track, myStream));

}

<결과 화면>

나와 멀리 떨어져 사는 여자친구가 테스터로 참여해주었다. IP와 접속 네트워크와 상관없이 잘 통신이 된다.