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