본문 바로가기
Develop/Zoom만들기

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

by 보보트레인 2023. 9. 9.

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와 접속 네트워크와 상관없이 잘 통신이 된다.

 

반응형

'Develop > Zoom만들기' 카테고리의 다른 글

Zoom. 기능 추가사항 ( +오류 해결 )  (0) 2023.09.11
Zoom 만들기 14. WebRTC (2)  (0) 2023.09.09
Zoom만들기 13. WebRTC  (0) 2023.09.05
Zoom 만들기 12. 비디오와 오디오 제어하기  (0) 2023.09.05
Zoom 만들기 .11 카메라 불러오기  (0) 2023.09.04

관련글

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*