본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


WEB-RTC

WEB-RTC 개발 준비

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 10. 13.

 

 

WEB-RTC는 Web Real-Time Communication를 줄여서 표현한 말로, 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API이다.

W3C에서 제시된 초안이며, 음성 통화, 영상 통화, P2P 파일 공유 등으로 활용될 수 있다.

조금 더 간단하게 이야기하면,

웹 브라우저만 활용해서 화상챗팅, 음성챗팅을 할 수 있다는 이야기이다.

아직은 웹 표준으로 자리잡지를 않아서 대부분의 브라우저에서 지원되는 것은 아니다.

 

* 지원되는 브라우저 현황

브라우저 명칭 버전
마이크로소프트 엣지 12+[6]
크롬 28+
파이어폭스 22+[7]
Safari 11+[8]
Opera 18+[9]
Vivaldi 1.9+

 

먼저 개념에 대해 간단히 정리하여 보았다.

1. WEB-RTC를 위해서는 서로 동일서버에서의 접속이 필요하다.(크로스도메인 이슈)

2. WEB-RTC의 첫번째 단계는 시그널링 서버를 통한 서로의 위치 및 상태를 확인하는 것 이다.

3. 서로의 위치가 확인된 경우, TURN, STURN서버를 활용하여 서로의 주소(IP Address)를 명시화 하는 것 이다.

 * TURN서버, STURN서버는 각각의 PC가 올바르게 이동하도록 길잡이(?) 역할을 하는 서버이다.

 * 우리가 사용하는 대부분의 IP가 내부망으로 할당된 IP 또는 고정IP가 아니므로 이러한 길을 찾을 수 있게 해주는 서버이다.

4. 서로의 주소가 명시가 되면 약속된 방법(WEB-RTC)을 통해 서로의 스트림을 주고 받는다.

 

크게 구분지으면 4가지 형태로 나눌 수 있다.

그러면 할 일을 요약하여 보자.

1번 작업은 아래 1가지로 개발이 끝난다.
 * 웹 서버를 만든다.

2번 작업은 서로의 접속 시그널을 주고받기 위해서 지속적인 통신이 필요한데, 
웹에서는 웹소캣을 활용해서 구현 가능 하다.
그러므로, 웹소캣이 구성된 서버가 필요하다.
 * 웹 소캣 서버를 만든다.
 * 웹 소캣 서버를 통해 서로의 상태를 계속 확인하도록 한다.

3번 작업은 TURN, STURN 서버가 필요한데...이를 직접 구현하는 것은 매우(?) 어렵다.
그러므로 공개된 TURN 또는 STURN 서버를 사용한다.
 * 구글 또는 다른 사이트에서 무료로 제공하는 서버를 사용하도록 한다.
 * 대부분의 공개된 서버는 상업적으로는 이용 불가능하며, 라이선스를 잘 확인 해야 한다.

4번 작업은 WEB-RTC에 관련된 소스코드를 작성하는 것 이다.

 * 웹 페이지로 접속한 클라이언트에 WEB-RTC에 관련된 소스코드를 작성 한다.

 

그러면 실제 개발을 할 내용은 1번, 2번, 4번이며 3번은 구현된 서버를 이용하는 것으로 볼 수 있다.

조금더 쉬운 이해를 위해서 그림으로 살펴보자.

 

첫번째 개발할 기능으로는, http서버이다.

주요 기능은 사용자 접속에 따라 클라이언트 페이지를 전달해주는 기능만 있으면 된다.

물론 나중에는 채팅방 개념도 들어가야 하겠지만 일단 단순하게 1개의 페이지만 사용자에게 전달하도록 개발하면 될 것 같다.

 

두번째 개발할 기능으로는 웹소캣 서버를 개발하는 것 이다.

첫번째로 만든 웹 페이지에서 웹 소캣 서버로 접속요청이 들어오면 해당 접속이 계속 이루어지도록, 신호가 유지되는 역할을 하는 기능을 만들면 될 것 같다.

 

세번째로 개발할 것은 웹 클라이언트 페이지 이다.

첫번째 페이지에서 만든 웹 서버가 리턴한 페이지에 아래 단계로 기능을 추가해야 한다.

1. 웹소캣 서버에 시그널링을 전달하는 기능을 작성한다.

2. TURN, STURN 서버로 위치를 찾을 수 있는 기능을 작성한다.

3. web-rtc에 필요한 미디어, 스트림 객체등을 서로 1번과 2번작업 후 주고받도록 한다.

 

난이도는 첫번째가 가장 쉽고, 다음이 두번째, 마지막이 세번째 이다.

그러면 천천히 한번 WEB-RTC 화상채팅 개발을 시작해 보도록 하자.

개발 언어는 Node.js로 할 예정이다.

다음시간에는 단순한 HTTP 서버와 웹 소캣 서버를 개발하는 과정에 대해서 기록 해 보도록 하겠다.

반응형

'WEB-RTC' 카테고리의 다른 글

WEB-RTC 개발 - 1 (WEB-RTC with Nodejs)  (2) 2019.10.15
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글