WebRTC
음성 채팅 어플리케이션 - TOVE ON
🤓 개요 스마일게이트 스토브에서 DEV CAMP 인턴 활동을 진행하며 만든 프로젝트이다. 음성 채팅, 텍스트 채팅을 내장한 어플리케이션이며 웹과 앱으로 사용가능하도록 웹 버전, 모바일 버전으로 개발했다. 기술 스택 Front-end : VueJS(Web), Android(Mobile), WebRTC(음성 피어 연결) Back-end : Spring boot, Spring WebSocket (STOMP Pub/Sub), Spring Security, Redis, MariaDB, CoTRUN Infra : Aws S3, Aws RDS, Aws Elastic LoadBalance, Nginx 협업 : GIT, GitLab, Zira 역할 시그널링 서버 구축 WebRTC 전송 정보 중계 로직 구현 ( 참고 : ..
[스마게 인턴] 시그널링 서버 다중 인스턴스 환경 구축하기
WebRTC를 연결하기 위한 사용자의 미디어 정보와 ICE 프레임워크를 통해 나온 네트워크 정보들을 중계해주는 역할을 하는 시그널링 서버를 구축했다. 이때 다수의 사용자들이 서버에 접속하기 위한 트래픽을 견디기 위해서는 Scale out이 필요했는데,이를 위해서는 다중 인스턴스를 고려해야했었다. TCP를 연결하는 소켓 서버이기 때문에 다중 인스턴스로 설계할때 어떤 방식으로 설계해야하는지가 정말 중요했다. 만약 제대로 설계하지 않는다면 세션 컨트롤에 많은 문제점이 생겼을 것이다. 우선 우리 팀이 생각한 방식은 아래 그림과 같다. 그림을 설명하자면,각 시그널링 서버의 인스턴스에서 사용자와 연결된 세션 수를 Redis에 캐싱을 하고, Channel 서버에서는 캐시를 확인해서 사용자가 새로운 음성 채팅 룸을 생..
[WebRTC] TURN 서버의 필요성
WebRTC 기술을 사용해 음성 애플리케이션을 만들어 테스트하는 중 P2P 연결이 잘 안 되는 문제가 있었다. 원인을 찾아보려고 코드를 계속 수정했지만 실행이 되지 않았다. 그러던 중 LTE를 사용하고 있던 Test 폰을 와이파이를 연결해보니 잘 동작했었고, LTE 환경에서 P2P 연결이 안 된다는 것을 알 수 있었다!! 🧐 Why? WebRTC에서 P2P 연결을 위해 최적의 ICE를 찾으며 연결해야할 사용자에게 갈 수 있는 최적의 네트워크 경로를 찾는다. 이때 최적의 경로는 어떻게 찾게 되는 걸까? 보통은 NAT환경에 있는 사용자를 찾기 위해 STUN서버를 사용하고 이를 통해 NAT 뒤의 종단(사용자)을 파악할 수 있다. 하지만 이때 STUN 서버를 거쳐도 NAT 뒤에 누군가가 있는지 (IP정보가 무엇..
[Netty] 차근차근 시그널링 서버 ( Signaling Server ) 만들기 ( feat. WebRTC ) - (1) 설계
💡 개요 WebRTC를 사용하기 위해서는 사용자의 연결 정보를 전달해주기 위한 시그널링 서버가 필요하다. 네티를 이용해 시그널링 서버를 개발해보자 시그널링 서버를 만들기 전에 우선 WebRTC가 시그널링 서버를 필요로 하는 이유를 알아보자 withseungryu.tistory.com/130 [WebRTC] Signaling Server ( 시그널링 서버 ) WebRTC에 대해서 이야기를 해봤는데 WebRTC를 유기적으로 잘 사용하기 위해서는 아래와 같은 서버가 필요하다. Signaling - Always needed NAT Traversal - need for production Media - depends on the app 이번.. withseungryu.tistory.com 🔍 설계 WebRTC를 ..
[WebRTC] Signaling Server ( 시그널링 서버 )
WebRTC에 대해서 이야기를 해봤는데 WebRTC를 유기적으로 잘 사용하기 위해서는 아래와 같은 서버가 필요하다. Signaling - Always needed NAT Traversal - need for production Media - depends on the app 이번 포스트는 Signaling Server에 대해 다뤄볼 것이다. 😃 Signaling Server란? 이전 글에서 알 수 있듯이 WebRTC란 사용자 간의 P2P Connection을 통해 Object를 교환하는 방식이다. 그런데 그냥 P2P Connection만 존재하면 다 통신이 가능해지는 것일까???? 물론 아니다! 우리는 상대방과 통신을 하기 위해서는 상대방(보낼 주체)이 누구인지를 먼저 파악해야 한다. 이를 위해 Sign..
[WebRTC] WebRTC란?
😊 WebRTC란?? 브라우저에서 별도의 소프트웨어 없이 실시간으로 통신을 가능하게 해주는 웹을 위한 오픈 프레임워크이다. 비디오와 음성 채팅 어플리케이션에서 사용되는 오디오와 비디오와 같이 높은 퀄리티의 의사소통을 위한 기본적인 것들을 포함한다. 보통 브라우저에서 실행할때 JavaScript API를 통해 실행할 수 있어 개발자들로 하여금 쉽게 RTC web app을 실행하는 것이 가능하다. 또한 WebRTC는 W3C와 IETF에서 API레벨과 Protocol 레벨을 표준화했다. 그리고 무엇보다 세계 최고 IT기업인 Google과 Mozila, Opera에서 든든하게 지원을 해준다. 🧐 WebRTC는 어떤 방식으로 동작할까? 한번 WebRTC API를 살펴보자 🔍 getUserMedia 사용자가 자신의..