본문 바로가기
T.I.L. :: Today I Learned/항해99 14기 본과정

Day 52. webRTC가 그러니깐.. 뭐냐면

by DaSsom 2023. 5. 24.

우리 프로젝트의 메인 기능인 화상채팅 + 화면공유 + 위치기반..! 을 위해서 webRTC라는 기술을 처음 접하게 되었다. 이것저것 참고 레퍼런스를 찾아보면서 코드를 구현해나가는 과정에서 일단 webRTC가 뭐길래 화상채팅을 할 수 있게 하는건지 공부를 해보았다. 

 

 

WebRTC는 Web Real-Time Communication이다. 말그대로 브라우저 간에 오디오, 영상 미디어를 스트리밍하며 데이터 교환을 할 수 있도록 하는 기술이다. 이 녀석이 실시간으로 웹에서 데이터를 교환할 수 있는 이유는 '시그널링'이라는 NAT 우회 과정을 거치기 때문이란다.

STUN 서버에 의해 NAT 트래버셜 작업이 이루어지고 이 STUN 서버에 요청을 보내면 NAT 뒤에 있는 Peer 들이 서로 연결할 수 있는 IP와 포트를 찾아준다. (그러니까, STUN서버가 각 사용자들을 연결해준다는 것 같음) 근데 이 STUN 서버에서 항상 연결을 해주는게 아니기 때문에 이때 대안으로 TURN 서버를 사용한다. (근데 이 TURN 서버는 시간 지연이 필수적으로 발생하니 최후의 수단으로 쓰는 것이 좋다고 하네)

이렇게 포트와 ip를 찾고 사용자들을 찾으면 ICE 라는 프레임워크에서 두 단말이 p2p 연결을 하도록 해준다. 연결이 되면 SDP 규약에 맞춰 서로 연결이 됨.

 

이러한 과정을 '시그널링'이라고 하고 이 시그널링 서버를 직접 구축하거나 외부 솔루션을 사용할 수 있음. 시그널링 서버를 직접 구축하려면 웹소켓, 서버전송이벤트 방법을 적용할 수 있다고 함.

 

우리 프로젝트에서는 openVidu 라는 오픈소스 플랫폼을 사용하여 webRTC 기술을 사용하려고 한다. 웹, 모바일 환경에서 영상 통화를 쉽게 추가할 수 있어서 우리가 도전해볼만하다고 생각했다. openVidu가 webRTC를 위한 시그널링까지 제공을 해주고 있으니 얼마나 다행인지!!

 

이렇게 메인 기능인 화상 채팅과 화면 공유는 해결이 될 것 같다. 

 

 

https://2jinishappy.tistory.com/335

 

화상 미팅을 간단하게 구현할 수 있는 Kurento와 Openvidu 프레임워크

https://2jinishappy.tistory.com/248?category=948597 WebRTC - 웹 브라우저 간 실시간 미디어 통신 기술 WebRTC: Web Real-Time Communication 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API 2020

2jinishappy.tistory.com

https://wormwlrm.github.io/2021/01/24/Introducing-WebRTC.html

 

WebRTC는 어떻게 실시간으로 데이터를 교환할 수 있을까? - 재그지그의 개발 블로그

WebRTC 연결 절차에 대해 알아보고, 이 과정에서 접할 수 있는 낯선 용어들에 대해 정리해봅니다.

wormwlrm.github.io

https://awabot.com/en/webrtc-telepresence-teleoperation/

 

Telepresence and teleoperation: what is WebRTC? | Awabot

As experts in robotic teleaction, the Awabot Intelligence team uses the WebRTC framework for many projects. Explanations.

awabot.com