🎢 WebRTC Mesh ‐ 험난한 여정

Sequence Diagram(Two Clients) 접기/펼치기

sequenceDiagram
    participant C1 as Client 1
    participant SS as Signaling Server
    participant C2 as Client 2

    Note over C1,C2: 1. 음성 채팅방 입장 단계

    C1->>C1: Request microphone permission
    activate C1
    Note right of C1: getUserMedia()로<br/>마이크 권한 요청
    C1-->>C1: Setup local stream
    deactivate C1

    C1->>SS: join_room
    activate SS
    Note right of SS: 방 정보에 Client 1 추가
    SS-->>C1: room_info
    deactivate SS
    Note right of C1: 방 정보 수신<br/>(현재는 Client 1만 존재)

    C1->>SS: room_info_received
    Note right of SS: Client 1이 방 정보를<br/>정상적으로 수신했음을 확인

    Note over C1,C2: 2. 두 번째 사용자 입장

    C2->>C2: Request microphone permission
    activate C2
    Note right of C2: getUserMedia()로<br/>마이크 권한 요청
    C2-->>C2: Setup local stream
    deactivate C2

    C2->>SS: join_room
    activate SS
    Note right of SS: 방 정보에 Client 2 추가
    SS-->>C1: room_info
    SS-->>C2: room_info
    deactivate SS
    Note right of C2: 업데이트된 방 정보 수신<br/>(Client 1, 2 정보 포함)

    C1->>SS: room_info_received
    C2->>SS: room_info_received
    Note right of SS: 모든 클라이언트가<br/>방 정보를 수신했음을 확인

    Note over C1,C2: 3. P2P 연결 시작

    SS->>C1: start_connections
    SS->>C2: start_connections
    Note right of SS: 서버가 연결 계획 전송<br/>(누가 누구에게 Offer할지)

    Note over C1,C2: 4. WebRTC 시그널링 단계

    C1->>C1: Create RTCPeerConnection
    activate C1
    Note right of C1: STUN/TURN 서버 설정<br/>로컬 스트림 추가
    C1-->>C1: Create Offer
    deactivate C1

    C1->>SS: webrtc_offer
    SS->>C2: webrtc_offer
    Note right of C2: Offer SDP 수신

    C2->>C2: Create RTCPeerConnection
    activate C2
    Note right of C2: STUN/TURN 서버 설정<br/>로컬 스트림 추가
    C2-->>C2: Create Answer
    deactivate C2

    C2->>SS: webrtc_answer
    SS->>C1: webrtc_answer
    Note right of C1: Answer SDP 수신

    Note over C1,C2: 5. ICE Candidate 교환

    par ICE Candidate Exchange
        C1->>SS: webrtc_ice_candidate
        SS->>C2: webrtc_ice_candidate
    and
        C2->>SS: webrtc_ice_candidate
        SS->>C1: webrtc_ice_candidate
    end
    Note over C1,C2: 양방향 ICE Candidate 교환<br/>최적의 네트워크 경로 설정

    Note over C1,C2: 6. P2P 연결 완료

    par Media Stream Exchange
        C1-->>C2: Send audio stream
        C2-->>C1: Send audio stream
    end
    Note over C1,C2: 양방향 음성 스트림 전송 시작<br/>실시간 음성 통화 가능

    Note over C1,C2: 7. 연결 상태 모니터링

    loop Connection Monitoring
        C1->>C1: Monitor connection state
        C2->>C2: Monitor connection state
        Note over C1,C2: connectionStateChange,<br/>iceConnectionStateChange<br/>이벤트 모니터링
    end

    Note over C1,C2: 8. 사용자 퇴장 시나리오

    C2->>SS: disconnect
    activate SS
    SS-->>C1: user_disconnected
    deactivate SS

    C1->>C1: Clean up connection
    activate C1
    Note right of C1: Peer Connection 정리<br/>오디오 엘리먼트 제거
    deactivate C1

Loading

Sequence Diagram(Three Clients) 접기/펼치기

sequenceDiagram
    participant C1 as Client 1
    participant SS as Signaling Server
    participant C2 as Client 2
    participant C3 as Client 3

    Note over C1,C2: 1. 초기 두 클라이언트 연결 수립

    C1->>SS: join_room
    Note right of SS: Client 1 방 참가
    SS-->>C1: room_info
    C1->>SS: room_info_received

    C2->>SS: join_room
    Note right of SS: Client 2 방 참가
    SS-->>C1: room_info
    SS-->>C2: room_info
    C1->>SS: room_info_received
    C2->>SS: room_info_received

    SS->>C1: start_connections
    SS->>C2: start_connections
    Note right of SS: C1 ↔ C2 연결 계획 전송

    Note over C1,C2: WebRTC C1 ↔ C2 연결 수립

    C1->>SS: webrtc_offer (to C2)
    SS->>C2: webrtc_offer (from C1)
    C2->>SS: webrtc_answer (to C1)
    SS->>C1: webrtc_answer (from C2)

    par ICE Candidate Exchange C1 ↔ C2
        C1->>SS: ice_candidate (to C2)
        SS->>C2: ice_candidate (from C1)
    and
        C2->>SS: ice_candidate (to C1)
        SS->>C1: ice_candidate (from C2)
    end

    Note over C1,C2: C1 ↔ C2 P2P 연결 완료

    Note over C1,C3: 2. 세 번째 클라이언트 입장

    C3->>SS: join_room
    Note right of SS: Client 3 방 참가
    SS-->>C1: room_info
    SS-->>C2: room_info
    SS-->>C3: room_info
    Note right of SS: 3명의 클라이언트 정보 포함

    C1->>SS: room_info_received
    C2->>SS: room_info_received
    C3->>SS: room_info_received

    SS->>C1: start_connections
    SS->>C2: start_connections
    SS->>C3: start_connections
    Note right of SS: C1 ↔ C3, C2 ↔ C3<br/>새로운 연결 계획 전송

    Note over C1,C3: WebRTC C1 ↔ C3 연결 수립

    C1->>SS: webrtc_offer (to C3)
    SS->>C3: webrtc_offer (from C1)
    C3->>SS: webrtc_answer (to C1)
    SS->>C1: webrtc_answer (from C3)

    par ICE Candidate Exchange C1 ↔ C3
        C1->>SS: ice_candidate (to C3)
        SS->>C3: ice_candidate (from C1)
    and
        C3->>SS: ice_candidate (to C1)
        SS->>C1: ice_candidate (from C3)
    end

    Note over C2,C3: WebRTC C2 ↔ C3 연결 수립

    C2->>SS: webrtc_offer (to C3)
    SS->>C3: webrtc_offer (from C2)
    C3->>SS: webrtc_answer (to C2)
    SS->>C2: webrtc_answer (from C3)

    par ICE Candidate Exchange C2 ↔ C3
        C2->>SS: ice_candidate (to C3)
        SS->>C3: ice_candidate (from C2)
    and
        C3->>SS: ice_candidate (to C2)
        SS->>C2: ice_candidate (from C3)
    end

    Note over C1,C3: 3명의 Full Mesh P2P 연결 완료

    Note over C1,C3: 3. Client 2 퇴장

    C2->>SS: disconnect
    Note right of SS: Client 2 연결 해제 처리

    SS-->>C1: user_disconnected (C2)
    SS-->>C3: user_disconnected (C2)

    par Connection Cleanup
        C1->>C1: Clean up C2 connection
        Note right of C1: - C2와의 Peer Connection 종료<br/>- C2의 오디오 엘리먼트 제거
    and
        C3->>C3: Clean up C2 connection
        Note right of C3: - C2와의 Peer Connection 종료<br/>- C2의 오디오 엘리먼트 제거
    end

    SS-->>C1: room_info
    SS-->>C3: room_info
    Note right of SS: 2명의 클라이언트 정보로 업데이트

    C1->>SS: room_info_received
    C3->>SS: room_info_received

    Note over C1,C3: C1 ↔ C3 P2P 연결 유지<br/>2명의 클라이언트로 음성 채팅 계속

Loading

---

WebRTC 기반의 음성 통화 서비스를 개발하면서, 저희는 Mesh 방식을 선택하게 되었습니다.

Mesh 방식을 선택한 이유와 근거는 📊 WebRTC Mesh ‐ 트래픽 계산을 참고해 주세요!

이 글에서는 개발 과정에서 어떤 어려움이 있었는지, 어떻게 해결했는지를 공유하고자 합니다.

겪었던 문제들 🐞

개발을 진행하면서 예상치 못한 문제들이 발생했습니다.

1. 3명 이상의 사용자 연결 불안정 😵

• 새로운 사용자가 들어오거나 기존 사용자가 나가는 등 변화가 지속적으로 발생하는 상황에서 Mesh 네트워크의 안정성이 떨어지는 문제가 있었습니다.
• 특히, 타이밍 이슈로 인해 연결 설정 및 해제가 제대로 이루어지지 않는 경우가 빈번했습니다.

2. 모바일 네트워크에서의 작동 불가 📵

• LTE나 5G와 같은 모바일 네트워크에서는 서비스가 정상적으로 동작하지 않았습니다.
• 이는 ISP의 방화벽 문제로 추측되었으며, TURN 서버의 필요성을 느끼게 되었습니다.

3. 방장 재접속 시 연결 끊김 🔌

• 방을 개설한 사용자가 재접속하면 모든 연결이 끊기는 현상이 발생했습니다.
• 이는 방장에게 특정 권한이나 역할이 부여되어 있어 발생한 문제로 판단되었습니다.

문제 해결 과정 🛠

Coturn을 활용한 STUN/TURN 서버 구축 🛰

모바일 네트워크에서의 연결 문제를 해결하기 위해 Coturn을 활용하여 자체적인 STUN/TURN 서버를 구축했습니다. 이를 통해 NAT 방화벽을 우회하여 모바일 네트워크에서도 안정적인 연결이 가능해졌습니다.

로직 개선 및 수신 확인 추가 📝

• 타이밍 문제를 해결하기 위해 전체적인 시그널링 로직을 개선했습니다.
• 클라이언트와 서버 간에 수신 확인(ACK) 메커니즘을 도입하여 메시지 전달의 신뢰성을 높였습니다.
• 이를 통해 새로운 사용자의 입장이나 기존 사용자의 퇴장 시 발생하던 불안정성을 해소했습니다.

방장 개념 제거 🚫

• 방장에게 부여된 특별한 역할을 제거하여 모든 사용자가 대등한 역할을 가지도록 변경했습니다.
• 이를 통해 방장이 재접속하거나 퇴장하더라도 전체 연결에 영향을 주지 않도록 개선했습니다.

개선된 연결 흐름 📈

개선된 로직에 따라 WebRTC P2P Mesh 음성 통화의 전체적인 흐름은 다음과 같습니다.

1. 클라이언트 초기화: 각 클라이언트는 마이크 권한을 요청하고 로컬 스트림을 설정합니다.
2. 방 참가: 시그널링 서버에 join_room 이벤트를 통해 방 참가를 요청합니다.
3. 방 정보 수신 및 확인: 서버로부터 방 정보를 수신하고 room_info_received 이벤트로 수신 확인을 보냅니다.
4. P2P 연결 설정: 서버로부터 start_connections 이벤트를 받아 연결 계획에 따라 Offer/Answer 교환을 시작합니다. 연결 계획에는 어떤 클라이언트가(From) 어떤 클라이언트(To)에게 Offer를 보낼지가 명시되어 있습니다.
5. ICE Candidate 교환: P2P 연결을 위한 최적의 경로를 설정하기 위해 ICE Candidate를 교환합니다.
6. 미디어 스트림 교환: 연결이 완료되면 양방향으로 음성 스트림을 전송하여 실시간 통화가 가능합니다.
7. 연결 상태 모니터링: 각 클라이언트는 연결 상태와 ICE 상태 변화를 모니터링하여 연결이 끊어지면 재설정합니다.
8. 사용자 퇴장 처리: 사용자가 퇴장하면 user_disconnected 이벤트를 통해 다른 클라이언트가 해당 사용자와의 연결을 정리합니다.

결론 🎉

WebRTC P2P Mesh 방식을 활용한 음성 통화 서비스를 구현하면서 많은 어려움이 있었지만, 지속적인 문제 해결과 로직 개선을 통해 안정적인 서비스를 제공할 수 있게 되었습니다. 특히, Coturn을 활용한 STUN/TURN 서버 구축과 타이밍 문제 해결을 위한 로직 개선이 큰 역할을 했습니다.

이번 경험을 통해 실시간 통신 서비스에서의 네트워크 환경과 프로토콜의 중요성을 다시 한번 느낄 수 있었습니다.

🙏 감사합니다

여기까지 읽어주셔서 감사합니다! 혹시 비슷한 문제를 겪고 계시다면 이 글이 도움이 되었으면 좋겠습니다.