Recommended
More Related Content
Similar to WebRTC
Similar to WebRTC (20)
More from Wonjun Hwang
More from Wonjun Hwang (20)
WebRTC
- 2. WebRTC란 무엇인가? Web Real-Time Communication의 약자로, 웹 브라우저에서 실시간 통신을 구현하기 위한 기술 구글에서 개발하는 프로젝트로 최초에는 비디오 대화만 가능했지만 점차 기능이 확장됨 화상 통화, 음성 통화, 데이터 등 다양한 실시간 형태의 통신 기능을 제공 풍부한 기능 W3C(WebRTC Working Group)에서 표준화되어, 크로스 플랫폼 및 브라우저 호환성을 보장 표준 기술 Secure RTP(SRTP)를 통해 암호화된 통신을 제공하여 보안 및 개인 정보 보호를 강화 보안과 개인 정보 1 2 3
- 3. WebRTC 등장 이전 플러그인 필요 호환성 문제 보안 이슈 제한된 기능 WebRTC 이전에는 웹 브라우저에서 실시간 통신을 위해서는 플러그인이 필요했음 가장 많이 사용되던 것은 Adobe Flash, Java 애플릿 등 WebRTC가 등장하기 전, 인터넷을 통한 실시간 음성 및 비디오 통신에 대한 표준이나 일반적인 솔루션이 없었음 브라우저에서 웹캠이나 마이크를 이용한 화상 통화를 구현하려면 플러그인이나 서드파티 솔루션을 사용해야 했음 각 브라우저마다 다른 플러그인을 사용해야 했기 때문에 웹 브라우저 간의 호환성 문제가 발생 사용자들은 특정 플러그인을 설치하고 유지해야 했음 플러그인은 보안 측면에서 취약할 수 있었음 악성 소프트웨어나 보안 취약점을 이용한 공격 등의 문제가 발생 기존 솔루션들은 주로 비디오 통화에 중점을 두고 있었으며, 다양한 기능과 품질의 화상 통화를 제공하기 어려웠음
- 4. WebRTC 등장 2011년 Google과 에릭슨사가 웹 브라우저 기반의 실시간 통신 기능을 추가할 수 있도록 진행한 프로젝트를 W3C가 API 정의를 진행 Peer 2 Peer 지원 별도 서버를 거치지 않고 브라우저와 브라우저간 통신을 처리하는 방식
- 5. WebRTC 등장 Peer 2 Peer 음성/영상 통화
- 6. WebRTC 등장 화상 통화, 화상 회의의 기능들을 여러 업체에서 앞다투어 출시
- 7. Peer 2 Peer WebRTC 등장 1:1 통화 회의 통화 인터넷 방송 N:N 1:N 1:1 음성/영상 통신 Peer 2 Peer 통신 방식으로 서버 부하 문제와 비용문제 해소 통화에 관련한 모든 기능 구현 기존 SIP 프로토콜만을 이용한 방식에 비해 보다 쉬운 구현이 가능
- 8. JavaScript API Peer Connection Signalling Transport Voice Engine Video Engine Peer 2 Peer WebRTC 구조 Peer 2 Peer 연결을 가능하게 함 IP/Port/Codec 등 통화환경을 WebSocket등을 이용하여 처리 Peer간 미디어 전송 처리
- 9. WebSocket 서버를 통한 실시간 통신 WebRTC 브라우저 간의 실시간 통신 데이터가 서버에 전달되지 않음 WebRTC 통신 과정
- 10. WebRTC 통신 과정 WebSocket 통화요청 및 Peer간 접속을 위한 정보 전달 역할 TURN Peer 간 직접 통신이 불가능한 경우 데이터를 전달하는 릴레이 역할 연결이 끊기면, TURN 서버를 통해 중계된 데이터를 사용하여 통신을 유지하려고 시도 STUN 클라이언트의 공인 IP 주소와 포트를 알려주는 역할 ICE라는 규격을 이용하여 상대방이 접속을 할 수 있게 지원 NAT ICE Bind Request Src: 192.168.1.1:5060 Dst: 192.168.1.2:3478 Binding Response MAPPED-ADDRESS IP 11.22.33.44 Port 10080 Src: 192.168.1.1:3478 Dst: 192.168.1.1:5060
- 11. WebRTC 통신 과정 ICE Candidate STUN, TURN 서버를 이용해서 획득했던 IP 주소와 프로토콜, 포트의 조합으로 구성된 연결 가능한 네트워크 주소들을 후보(Candidate)라고 부름 PeerConnection 객체를 생성하면 candidate 를 얻을 수 있음 ICE Bind Request Src: 192.168.1.1:5060 Dst: 192.168.1.2:3478 Binding Response MAPPED-ADDRESS IP 11.22.33.44 Port 10080 Src: 192.168.1.1:3478 Dst: 192.168.1.1:5060 이 모든 과정은 ICE(Interactive Connectivity Establishment)라는 프레임워크 위에서 이루어짐 ICE는 두 개의 단말이 P2P 연결을 가능하게 하도록 최적의 경로를 찾아주는 프레임워크 ICE 는 STUN 과 TURN 을 활용하여 여러 Candidate 를 검출하고 이들 중 하나를 선택하여 Peer 간 연결을 수행 이렇게 후보들을 수집하면 일반적으로 3개의 주소를 얻게 됨 자신의 사설 IP와 포트 넘버 자신의 공인 IP와 포트 넘버 (STUN, TURN 서버로부터 획득 가능) TURN 서버의 IP와 포트 넘버 (TURN 서버로부터 획득 가능)
- 12. WebRTC 통신 과정 발신자 수신자 WebSocket STUN WebSocket Connection ICE Bind Response ICE Bind Request Offer ICE Bind Response WebSocket Connection ICE Bind Request Answer Offer Peer 2 Peer Answer ICE Bind Request Src: 192.168.1.1:5060 Dst: 192.168.1.2:3478 Binding Response MAPPED-ADDRESS IP 11.22.33.44 Port 10080 Src: 192.168.1.1:3478 Dst: 192.168.1.1:5060
- 13. WebRTC의 기술적 측면 웹RTC의 기본 개념은 P2P(피어 투 피어) 통신을 기반 함 이를 통해 브라우저 간에 직접 연결하여 데이터를 주고받을 수 있음 화상 통화, 음성 통화, 데이터 등 다양한 실시간 형태의 통신 미디어 스트리밍 중간 서버 없이 브라우저 간 직접 통신 P2P(peer to peer) 통신 전송 및 기타 데이터 교환을 위한 채널 제공 데이터 채널 WebRTC 핵심 기능 통신을 위한 메타데이터 교환을 도와주는 서버와의 소통 시그널링 STUN (Session Traversal Utilities for NAT) 및 TURN (Traversal Using Relays around NAT) 서버 네트워크 환경에서 피어들 간의 연결을 용이하게 하는 역할 기술적 동작원리
- 14. 화상 채팅 연결 과정 getUserMedia 웹 카메라, 마이크 등의 미디어를 스트림 형태로 전송 RTCPeerConnection 피어 간에 연결을 설정하고 데이터를 주고받음 미디어 액세스 및 스트리밍 설정 WebRTC 초기화 및 피어 연결 설정 Offer 및 ICE candidate 교환 시그널링 1 상대방과의 연결 수락과 설정 2 3 4
- 15. 화상 채팅 연결 과정 WebSocket을 통해 Peer 2 Peer 연결을 위한 정보 전달 app.js server.js
- 16. 화상 채팅 연결 과정 카메라, 마이크 등의 미디어를 스트림 형태로 노출 app.js
- 17. 화상 채팅 연결 과정 같은 방에 접속 시 Peer 들간의 정보 전달 Peer A Peer A Peer A Peer B Peer B Peer B Peer A: 통화 요청 Peer B: 통화 수락