webRTC 정리

webRTC 정리

라이브 커머스 프로젝트를 위한 webRTC 정리이다.

 

내가 구현하려는 서비스의 핵심 기술정도는 이해해주고 진행해야 프로젝트를 하는 것에 의의가 있기 때문에 한번 정리를 해보고자 한다.

 

webRTC로 검색을 하면 감사하게도 여러 블로그에서 정리를 해주셨지만, 일단 webrtc 공식 사이트에서의 설명을 정리해본다.

webRTC란?

• Web Real-Time Commuication
• 웹에서 실시간 통신 기능을 구현할 수 있는 API이다.
• 실시간 통신에서는 서버를 통해 클라이언트가 데이터를 주고받지만, webRTC는 P2P 연결을 통해 데이터 교환이 가능하다.

• 위 사진은 webRTC의 구조인데 api 요청을 보내면 voice, video engine으로 오디오와 비디오 캡처를 진행한 후 transport를 진행하는 것을 알 수 있다.
  • 여기서 알아야 할 핵심 기술은 Transport 부분이다.
  • P2P를 위한 STUN + TURN + ICE에 대한 이해가 되어있어야 전체 구조를 이해할 수 있다.

ICE

• webRTC는 P2P 프로토콜을 사용하기 때문에 peer간 연결 수단이 필요하다.
• 서로 다른 클라이언트가 서로의 정보를 어떻게 알고 연결을 하겠는가.
• P2P 방식을 위해 웹 브라우저는 다음의 절차를 밟는다.
  • 각 클라이언트의 브라우저가 P2P 통신에 동의
  • 클라이언트끼리 주소 공유
  • 방화벽 우회
  • 데이터 교환

 

• 여기서 필요한 것이 ICE (Interactive Connectivity Establishment) 프레임워크이다.
  • ICE가 peer간 연결을 시켜주기 위해서는 특정 구조의 서버가 필요하다.
  • 서버 구성은 STUN 혹은 TURN 서버이며, 원격 클라이언트로 전송되는 각 클라이언트에 ICE Candidate를 제공하는 역할을 한다.
  • Candidate는 후보를 의미하며, 연결 가능한 네트워크 주소를 뜻한다.

STUN (Session Traversal Utilities for NAT)

 

• NAT는 Network Address Translation으로, public IP와 private IP 변환을 뜻한다.
• peer는 STUN서버로 요청을 보내 자신의 public IP와 접근 가능 여부를 확인한다.
• 단, NAT가 Symmetric NAT의 경우 네트워크 연결 제한이 있기 때문에 TURN 서버를 대안으로 사용해야 한다.
• 나의 경우 STUN으로 개발을 일단 진행해볼 예정이라 STUN 서버를 이용할 예정이다.

라이브 커머스를 P2P로?

여기까지 webRTC를 봤을 때 의문점이 생겼다.

 

라이브커머스를 구현하는데 webRTC 쓴다며?

근데 이거 P2P인데?

나는 1:N으로 통신해야 하는거 아닌가?

한명의 호스트가 여러명의 클라이언트과 연결 작업을 거치고 데이터를 broadcast 처럼 쏘는 건데 이게 효율적이라고?

 

아니다 다를까 1:N을 위한 구현방식이 따로 있다는 것을 알게 되었다.

 

Peer의 수가 늘어날수록 클라이언트쪽 부하가 커지기 때문에 결국 중계 역할을 하는 서버가 필요하다.

webRTC 구현방식에는 크게 Mesh, SFU, MCU 방식이 있는데,

SFU 방식은 클라이언트가 Media Server에 데이터를 쏘면, 서버가 각각의 peer에게 재배포 해주는 멀티미디어 미들웨어를 활용하는 방식이다.

 

SFU (Selective Forwarding Unit)

• 사진으로만 봐도 나는 SFU를 구현해야 한다는 느낌이 강하게 온다.
• 프로젝트 구현을 위한 정리이므로 SFU 위주로 작성하겠다.
• 사실상 SFU는 P2P 방식이 아니고, server와 다중 peer간의 연결이다.
• 서버가 데이터를 받고 자신과 연결된 peer에게 데이터를 전송한다.

 

 

결론

• webRTC는 javscript api이기 때문에 나는 프론트를 해야한다. (그래서 요새 리액트를 공부중이다.)
• STUN과 SFU 서버의 개발이 필요하다. (이게 중요)
  • 사설로 운영되는 STUN 서버가 있다고는 하는데, 직접 개발할지 그걸 이용할지는 아직 잘 모르겠다.
• 개발 순서 (아마도)
  • step 1 : webRTC를 통해 media 데이터를 받아오기
  • step 2 : STUN 서버를 통해 연결정보 받아오기 (STUN 서버 구현 및 front단과의 연결)
  • step 3 : webRTC를 통해 받아온 media 데이터 전송 준비
  • step 4 : SFU 서버 개발 및 front단과의 연결
  • step 5 : front => SFU 서버 데이터 전송
  • step 6 : SFU 서버 -> client 데이터 전송

 

 

이렇게 총 여섯 스텝이 핵심이고, 이걸 서비스화 시킨다고 했을때 로그인, 보안 등의 짜잘한 건 메인 기능 개발 이후에 진행해야 할 것같다.

여러 레퍼런스에서 구현 난이도가 참 높다고들 하는데 난 꼭 구현해보고 싶으니까 어떻게든 들이박아 봐야겠다.

 

 

 

ref

• webrtc.org
• https://velog.io/@ymlee3218/WebRTC-%EB%B0%8F-SFU
• https://wormwlrm.github.io/2021/01/24/Introducing-WebRTC.html
• https://velog.io/@jsb100800/%EA%B0%9C%EB%B0%9C-WebRTC-SpringBoot-Vue.js%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-Group-Video-Call