Hyebin‘s blog
article thumbnail
Published 2023. 2. 25. 17:10
WebRTC ~ing Front-end/React

WebRTC 란 ? 

WEB Real-Time Communication 으로 실시간 커뮤니케이션을 가능하게 해주는 기술로 peer-to-peer방식이다.

 

peer-to-peer 방식 ? 

소켓은 peer-to-peer방식이 아니다.

상대방과 내가 소켓io로 연결된 상황일 경우, 내가 상대방에게 hello라고 보내면 그 hello는 서버로 보내지고, 서버는 다시 상대방에게 hello를 전달한다. 즉 언제나 서버를 사용해야한다.

나는 상대방에게 메세지를 보내지만 사실 서버한테 메세지를 보내고 서버가 상대방한테 메세지를 보낸다. 이는 peer-to-peer가 아닌 서버에 연결되어 있을 뿐이다.

 

하지만 webRTC는 더이상 서버가 필요없다. webRTC는 서버가 보내고 받을 필요가 없이, 내 브라우저가 직접 상대방의 브라우저에 연결돼 직접 전달이 되는것이다. 내 영상과 내 오디오, 텍스트가 서버로 가지 않고 상대방에게 직접가기 때문에 peer-to-peer , 커뮤니케이션이 가능하다. 서버가 필요 없기 때문에 실시간이 속도가 엄청 빠른 이유이다.

 

시그널링 (Signalling)

signaling은 서로 다른 네트워크에 있는 2개의 클라이언트 간 미디어 포맷등을 상호 연동하기 위한 협의과정(Negotiation)이다.

사실 webRTC도 서버가 필요하다. 서버가 필요한 이유는 상대방과 대화를 하고 싶은데 그럼 상대방의 브라우저가 어디있는지를 알 수 없다. 내 브라우저와 상대방과 peer-to-peer을 만들고 싶다면 상대방의 브라우저가 어디있는지 , ip주소가 무엇인지 , 방화벽이 존재하는지 , 회사 네트워크인지 아무것도 모른다.

따라서 우리 브라우저로 하여금 서버가 상대가 어디에 있는지 알게 하는 것이다. 따라서 내 브라우저는 서버에게 여기가 내가 있는 곳이라고 configuration만 전달한다. 그럼 서버는 우리에게 위치만 알려준다. 상대방이 여기에 있어!! 그러면 여기서 peer-to-peer 연결이 시작된다.

서버가 영상과 오디오를 직접 처리하는 것이 아닌 다른 사람이 어디있는지를 알려줄 뿐이다.

즉, 브라우저는 서버에게 인터넷에서 그들의 위치와 settings,configuration,방화벽, 라우터가 있는 지 등등을 서버에게 전달한다. 그리고 서버는 그 정보를 다른 브라우저에게 전달한다. 그렇게 되면 브라우저는 서로를 찾을 수 있게된다.

 

IceCandidate

우리가 offer와 answer을 가질 때, 그걸 받는걸 모두 끝냈을 때, peer-to-peer 연결의 양쪽에서 icecandidate라는 이벤트를 실행하기 시작한다.

IceCandidate는 Internaet Connectivity Establishment로 인터넷 연결 생성이다.

IceCandidate는 webRTC에 필요한 프로토콜들을 의미하는데 멀리 떨어진 장치와 소통 할 수 있게 하기 위함이다.

즉, 브라우저가 서로 소통할 수 있게 해주는 방법이다. 어떤 소통 방법이 가장 좋을 것인지를 제안할 때 쓰는 것이다. 다수의 후보들이 각각의 연결에서 제안되고 , 그들의 서로의 동의 하에 하나를 선택한다. 그리고 그것을 소통방식에 사용한다.

 

WebRTC 연결 프로세스

  1. (peerA) peerA의 getUserMedia로 영상과 카메라를 만든다.
  2. (peerA) peerA와 peerB의 연결점을 만든다, 영상과 오디오에서 오는 stream을 가져다가 연결 안에 넣는다.
  3. (peerA) createOffer 생성 (다른 브라우저가 참가할 수 있도록 초대장을 만드는 것과 같다. 우리가 누구이며 어디에 있고, 그런 것들을 설명한다.)
  4. (peerA) setLocalDescription (우리가 방금 만든 offer로 연결을 구성해야한다)
  5. (peerA) offer을 emit 한다.
  6. (server) 서버는 offer과 roomName을 받아서 offer을 emit한다. 
  7. (peerB) peerA에게 받은 offer로 멀리 떨어진 peerA의 description을 세팅한다.
  8. (peerB) peeB의 getUserMedia로 영상과 카메라를 만든다.
  9. (peerB) peerB가 answer을 생성한다.
  10. (peerB) answer을 가지고 setRemoteDescription을 한다.
  11. (peerB) answer을 emit 한다.
  12. (server) 서버는 answer과 roomName을 받아서 answer을 emit한다. 
  13. (peerA) peerA가 answer을 받고 이 answer을 가지고 setRemoteDescription 을 한다.
  14. (peerB

'Front-end > React' 카테고리의 다른 글

[SWR] 데이터 가져오기를 위한 React Hooks  (0) 2022.07.30
useContext  (0) 2022.03.14
useRef  (0) 2022.03.14
Custom hook  (0) 2022.03.14
styled-components  (0) 2022.03.14
profile

Hyebin‘s blog

@hyebin Lee

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그