일단 내가 이 프로젝트를 왜 시작했는지부터 이야기하자면 시스템 종합설계 수업에서 진행하는 팀 프로젝트이기 때문이다. 이렇게 큰 틀을 가진 프로젝트를 이전에 진행해본 적이 없기 때문에 공부 내용이나 개발 과정 등을 기록으로 남기면 후에 이야깃거리로 사용하기 쉬울 것 같아 해당 내용을 포스팅하기로 했다. 처음에는 이론 내용부터 정리하고 이후 필요한 내용과 개발 내용들을 정리해보고자 한다.
이번에 팀원들과 함께 기획한 주제는 WebRTC를 통한 파티 애플리케이션이다. 기존에 있는 화상 영상 서비스에 여러 가지 엔터테인먼트 요소들을 추가할 예정이다.
간단하게 목표부터 말하면 다음과 같다.
1. 서버 구축 : web 화상채팅에 필요한 서버 구축
2. 웹 구현 : 리액트로 진행할 예정이다.
3. Multi 화상 채팅 개발 : 최대 4명이서 대화 가능한 화상 채팅 구현
4. 비디오 필터 구현
5. 간단한 미니 게임 구현 : 룰렛, 사다리 타기, 주사위 굴리기 등
WebRTC란
Web Real-Time Communication의 약자로 웹 애플리케이션 및 사이트들이 별도의 소프트웨어 없이 음성, 영상 미디어 혹은 텍스트, 파일 같은 데이터를 브라우저끼리 주고받을 수 있게 만든 기술
-> 별도의 플러그인이나 소프트웨어 없이 P2P 화상 회의 및 데이터 공유 가능(이를 통해 음성채팅, 화상채팅, 데이터 교환 가능)
3가지 클래스에 의한 실시간 데이터 교환
1. MediaStream : 카메라/마이크 등 데이터 스트림 접근 -> 사용자가 자신의 디바이스를 스트림할 수 있도록 허가하는 API인 getUserMedia 사용
2. RTCPeerConnection : 암호화 및 대역폭 관리, 오디오 또는 비디오 연결 -> 시그널링(해당 객체가 데이터 교환을 적절하게 처리하는 과정)
<A와 B의 RTCPeerConnection 과정>
1) A가 RTCPeerConnection 객체 생성
2) A가 createOffer() 메소드를 사용해 제안(SDP, Session Description) 생성
3) A가 setLocalDescription() 메소드 호출
4) A가 SDP를 문자열 화하고 시그널링을 통해 B에게 전송
5) B는 A의 SDP를 받아 setRemoteDescription() 메소드를 호출해 A의 설정 확인
6) B는 createAnswer()를 호출해 이에 대한 로컬 세션 정보(Local Session Description), 즉 응답을 인자로 전달하는 성공 콜백 함수 호출
7) B는 setLocalDescription() 메소드 호출을 통해 응답을 로컬 기술(Description)로 설정
8) B가 시그널링을 통해 문자열 화한 응답을 A에게 다시 전송
9) A가 setRemoteDescription() 메소드 호출을 통해 B의 응답을 원격 세션 기술(Description)로 설정
3. RTCDataChannel : 일반적인 데이터 P2P 통신
Signaling
서로 다른 네트워크에 있는 클라이언트 간 미디어 포맷 등을 상호 연동하기 위한 협의 과정(Negotiation)이 필요한데 이 프로세스를 시그널링이라 한다.(간단히 말해 국가도 문화도 다른 두 사람의 통신을 돕는 통역사 역할이라고 하면 될 것 같다. 뭐 이런 단어를 써야 한다던가 이렇게 행동하면 안 된다던가 하는....)
두 명의 유저가 스트림을 주고받으면 연결 요청 caller와 연결 수신 callee가 설정되어 둘의 통신을 위한 중간 역할 서버가 필요하다. 해당 서버를 통해 SessionDescription을 주고받는다.
signaling server에서 클라이언트가 교환하는 정보는 다음과 같다.
- Session Control Message : 통신을 열고 닫기 위한 세션 컨트롤 메시지
- Error Message
- Codec
- Bandwidth
- Media Type
- IP Address
- Security key
signaling server는 본인이 직접 구축해도 되고 Cloud Message Platfrom을 이용해도 된다.(Pusher, Kaazing, PubNub 등) 나는 공부를 위해 직접 서버를 구축해보고자 한다.(일단 이론으로 전체 맥락부터 확인하고 이후 실습해보겠다.)
다음에는 stun 서버와 turn 서버에 대해 알아보자.
'STUDY > PROJECT' 카테고리의 다른 글
[WebRTC를 이용한 화상영상 서비스-(2)] (0) | 2021.11.23 |
---|