개발/기타

webRtc란

최동규 2021. 7. 12. 02:21

1. webrtc란

WebRTC(Web Real-Time Communications)

  • 웹 브라우저 상에서는 어떠한 플러그인도 필요 없이 음성 채팅과 화상채팅, 데이터 교환까지도 가능하게 하는 기술
  1. RTCPeerConnection
  2. 서로 어떤 형식의 데이터를 주고 받을 지를 협의(negotiation)이 필요 (이러한 negotioation이 필요하다고 판단될시) negotiationneeded이벤트를 발생시킴
  3. negotiationneeded 이벤트의 핸들러에서 이 협의 절차를 수행해주어야함

  • SDP offer / answer 교환 (협의절차)

Untitled 1


위 다이어그램처럼 message를 주고 받기 위해서는 signaling server 가 구현되어야 한다.

webRTC로 p2p 통신을 시작하기 전, 서로 어떻게 정보를 주고받아야 할지 협상을 거치는 단계에서도 각 클라이언트간에 통신이 필요하다. 즉 SDP를 주고받아야 하는 메소드가 필요(sendMessage, onMessage)

위 메소드들이 호출되는 상황에서는 아직 양 클라이언트들은 상대방에게 어떻게 접속해야할지 알지 못하므로 직접 통신을 할 수 없다.

p2p통신이 불가능한 상황에서 이 메시지들은 어떻게 주고 받아야 할까?

signaling server라 불리는 서버가 그 역할을 한다. signling server는 서비스 성격에 따라서 매우 다양한 역할을 수행해야 하기 때문에 표준으로 정해진 구현이 없고,

서비스의 요구사항과 상황에 따라 구현하게 된다. 일반적으로 서버와 브루아주간 양방향 메시지 전달이 필요하기 때문에 websocket등을 이용해서 구현하게 된다

signaling server 구현 후 실행 해보면 localvideo 만 나오고 remote video는 나오지 않음

왜냐하면 여태까지 두 peer사이에서 오간 정보는 미디어 데이터 형식에 대한 것 뿐, 서로를 네트워크 상에서 어떻게 식별해야하는지를 알지 못하기 때문에 데이터를 어디로 보내야 할지 알 수가 없음.

이문제를 해결하기 위한 프레임워크가 바로 ICE

두개의 peer가 처해있는 네트워크 상황(라우터, 방화벽 등) 에 따라 여러가지 방식으로 서로 통신이 가능하기때문에 ICE는 ICE candidates라고 불리는 여러개의 후보군을 주고 받고, 이중에서 서로 가능한 방식이 있을때 최적이라고 판단되는 candidate를 골라서 이를 통해 connection을 수립하게 된다.

우리는 위에서 구축한 Signaling Server를 통해서 ICE candidates를 서로 전달해주기만 하면 된다.


완성된 로직 다이어그램

Untitled

webrtc 에서 사용되는 프로토콜 방식

https://seunghyum.github.io/webrtc/WebRTC/#

webrtc 예제

https://codelabs.developers.google.com/codelabs/webrtc-web/#0