거기어때 | WebRTC

WebRTC란

• web Real-Time Communication
• 실시간 커뮤니케이션은 가능하게 해주는 기술
• peer-to-peer

        💡 peer-to-peer 가 아닌 경우
        [Chat with socket IO 실습 - 노마드코더 줌 클론코딩]
        - 한 서버에 많은 web socket들이 연결되어 있었음
        - 한 web socket이 메세지를 보냈을 때, 
           > 그 메세지는 해당 web socket에서 서버로 보내졌음
           > 서버는 받은 메세지를 다시 모두에게 전달함 (broadcasting)

webRTC & peer-to-peer

peer-to-peer 방식은 사용자의 오디오와 텍스트가 서버로 가지 않는다. 오디오, 텍스트 등은 상대편의 브라우저에게 직접 전달된다. 따라서 서버를 거치지 않기 때문에 실시간(real time)이 속도가 엄청 빠르다.

단, web RTC에서 서버의 역할이 아예 없어지는 것은 아니다. Signaling 을 하기 위해 서버가 필요하다. Signaling이 끝나면 peer-to-peer 연결이 된다.

Signaling

처음 연결을 시도할 때 상대편의 브라우저가 어디있는지 알아내기 위한 작업!

IP주소는? 어떤 IP주소가 public이야?? port번호는? 방화벽(firewall)이 있는지? 회사 네트워크 안에 있는지?? 라우터가 있는지? 이러한 것들을 알아내는 것이 webRTC에서 서버(Signaling Server)의 역할이다.

과정은 다음과 같다. 구글 크롬 브라우저가 서버에게 [ IP주소, 오픈 port 등 ] 인터넷에서의 위치, settings, configuration을 전달한다. 또한 연결을 희망하는 파이어폭스도 서버에게 [ IP주소, 오픈 port 등 ] 인터넷에서의 위치, settings, configuration을 전달한다. 그럼 서버는 각각의 정보를 상대편에게 전달한다. 그럼 peer-to-peer 연결이 시작된다. 🤪🙉😲

이처럼 서버는 영상과 오디오를 처리하는 것이 아니고, 상대편 브라우저의 위치를 알려줄 뿐이다. 영상과 오디오는 브라우저 간에 직접 전달된다.

구현

💡 노마드코더의 줌 클론코딩 #3

• socket.IO 사용
• signaling을 위해 webSocket 사용
• peer-to-peer로 stream을 전송

💡 React - SpringBoot 직접 구현
github