webRTC

webRTC는 peer to peer방식이다. 소켓의 경우 front -> back 으로 메시지를 보내고 back -> front로 다시 보내는 과정을 거쳤다. 메시지를 보내기 위해서는 서버가 반드시 필요하다. 하지만 webRTC는 사람과 사람간의 소통이므로 서버를 거쳐 소통하는 것이아닌 직접 소통하는 것이라 훨씬 빠르고 유용하다. 하지만 처음에 정보를 전달할 때는 서버의 도움이 필요하다. 이번에는 webRTC를 배워볼 것이다.

 

가장 처음에 우리는 방에 들어가면 나를 제외한 사람들에게 welcome이라는 이벤트를 준다.

그러면 우리는 nickname arrived를 출력하도록 하였다. 바로 이 때가 RTC process를 시작해도 될 때이다. 이제부터 

peer A를 먼저 실행 시킨 브라우저로 표현하고 peer B를 그 다음으로 실행시킨 브라우저로 표현하겠다. 

이 그림을 활용할 텐데. Peer A에서 먼저 방에 입장하고 그 다음 Peer B가 방에 입장하면 peer A는 알람을 받는다.

우리는 연결통로를 만들어 두 브라우저를 연결하는 것이 목표이다.

첫번째로 myPeerConnection를 전역변수로 설정하고 각 브라우저에 만들어 줘야한다.

addStream()을 해줘야하는데, 이건 낡아서 쓰지 않고 다른 방법으로 해줘야 한다.

 

 

 

myStream.getTracks()

이걸 콘솔에 출력하면 오디오 트랙과 비디오 트랙이 출력이 되는데 이 두개를 myPeerConnection에 넣어줘야한다..

우리는 peer A peer B 둘다 connection을 만들어주고 그 connection에 myStream의 오디오트랙과 비디오트랙 그리고 mystream값까지 같이 넣어주었다. (addStream() 완료 !)

콜백 함수로 getMedia를 불러온 다음 ( await으로 만들어질 때 까지 기다려줘야 오류가 나지 않음 )

makeConnection을 실행해야 함

 

이 다음에는 createOffer를 만들어야 하는데 그림을 보면 peer A가 offer를 생성한다. peer A는 먼저 방에 들어와있던 놈이다. 그리고 peer B는 createAnswer를 만든다.

peer A peer B 기준은 먼저 알림을 받는 쪽이 A이다. 따라서 알림을 받을 때(welcome 이벤트 보낼 때 )실행시키면 된다.

 

Peer A에서 RTC offer만들고 이걸 setLocalDescription을 해주면 된다. 이걸 peerB에게 보낸다. 

peerB는 이걸 setRemoteDescription을 해줘야한다. 우리가 멀리 떨어진 peer description을 세팅한다는 뜻이다.

근데 오류가 난다. 오류가 나는 이유는 너무나도 순식간에 이루어지기 때문에 내 offer가 도착한 순간,

peer B의 myPeerConnection은 아직 존재하지 않는다.

이전에 우리는 enter_room 이벤트 통해서 방에 참가한 후에 getMedia와 makeConnection을 했는데 그 대신에

이벤트를 보내기 전에 미리 getMedia()를 해주었다. 영상을 보면 makeConnection도 미리 실행시켜주었는데 일단 오류가 나지 않기에 getMedia만 보내주었다. 오류나면 수정할게요!

 

app.js

server.js

app.js

이 offer event는 peer B가 받는다.

peer B는 setRemote를 해주고 answer을 만들고 

answer를 setLocal로 지정해준다. 그리고 answer이벤트와함께 answer, roomName을 같이 보내준다.

 

server.js

peer B가 answer event를 peer A에게 보낸다. 

 

app.js

peer A는 answer를 setRemote해준다.

 

지금까지 우리가 설정한 것을 차근차근 이야기해보면

처음 방에 들어갈 때 getMedia와 makeConnection을 통해서 myPeerConnection을 생성해둔다.

이건 모든 peer 공통이다. 그리고 

peer A가 먼저 방에 들어와있고 그 다음 peer B가 들어왔다면 

peer B가 welcome event를 peer A에게 보냄 -> peer A가 welecome event를 받고 offer를  생성 후 setLocal한 뒤 offer event를 peer B에게 보냄 -> peer B는 offer event를 받아 setRemote하고 answer생성 후 asnwer을 setLocal한 뒤 peer A에게 answer event를 보냄 -> peer A는 answer event를 받아 answer를 setRemote함