SlideShare a Scribd company logo

WebRTC

Kitworks Team Study

1 of 18
Download to read offline
What is WebRTC?
윤정빈
WebRTC란 무엇인가?
Web Real-Time Communication의 약자로, 웹 브라우저에서 실시간 통신을 구현하기 위한 기술
구글에서 개발하는 프로젝트로 최초에는 비디오 대화만 가능했지만 점차 기능이 확장됨
화상 통화, 음성 통화, 데이터 등 다양한 실시간 형태의 통신 기능을 제공
풍부한 기능
W3C(WebRTC Working Group)에서 표준화되어, 크로스 플랫폼 및 브라우저 호환성을 보장
표준 기술
Secure RTP(SRTP)를 통해 암호화된 통신을 제공하여 보안 및 개인 정보 보호를 강화
보안과 개인 정보
1
2
3
WebRTC 등장 이전
플러그인 필요
호환성 문제
보안 이슈
제한된 기능
WebRTC 이전에는 웹 브라우저에서 실시간 통신을 위해서는 플러그인이 필요했음
가장 많이 사용되던 것은 Adobe Flash, Java 애플릿 등
WebRTC가 등장하기 전, 인터넷을 통한 실시간 음성 및 비디오 통신에 대한 표준이나 일반적인 솔루션이 없었음
브라우저에서 웹캠이나 마이크를 이용한 화상 통화를 구현하려면 플러그인이나 서드파티 솔루션을 사용해야 했음
각 브라우저마다 다른 플러그인을 사용해야 했기 때문에 웹 브라우저 간의 호환성 문제가 발생
사용자들은 특정 플러그인을 설치하고 유지해야 했음
플러그인은 보안 측면에서 취약할 수 있었음
악성 소프트웨어나 보안 취약점을 이용한 공격 등의 문제가 발생
기존 솔루션들은 주로 비디오 통화에 중점을 두고 있었으며, 다양한 기능과 품질의 화상 통화를 제공하기 어려웠음
WebRTC 등장
2011년
Google과 에릭슨사가 웹 브라우저 기반의 실시간 통신 기능을 추가할 수 있도록 진행한 프로젝트를
W3C가 API 정의를 진행
Peer 2 Peer 지원
별도 서버를 거치지 않고 브라우저와 브라우저간 통신을 처리하는 방식
WebRTC 등장
Peer 2 Peer
음성/영상 통화
WebRTC 등장
화상 통화, 화상 회의의 기능들을 여러 업체에서 앞다투어 출시

Recommended

WebRTC in 2014
WebRTC in 2014WebRTC in 2014
WebRTC in 2014Lee WonJae
 
w3c 2017 - WebRTC 기술 back to basic 발표자료
w3c 2017 - WebRTC 기술 back to basic 발표자료w3c 2017 - WebRTC 기술 back to basic 발표자료
w3c 2017 - WebRTC 기술 back to basic 발표자료동명 최
 
An Introduction to WebRTC
An Introduction to WebRTCAn Introduction to WebRTC
An Introduction to WebRTCMinJae Kang
 
WebRTC 현재와 미래 최진호 2016
WebRTC 현재와 미래 최진호 2016WebRTC 현재와 미래 최진호 2016
WebRTC 현재와 미래 최진호 2016Blisson Choi
 
Ch01 네트워크와+소켓+프로그래밍+[호환+모드]
Ch01 네트워크와+소켓+프로그래밍+[호환+모드]Ch01 네트워크와+소켓+프로그래밍+[호환+모드]
Ch01 네트워크와+소켓+프로그래밍+[호환+모드]지환 김
 
WebRTC 전망 최진호_webappscamp
WebRTC 전망 최진호_webappscampWebRTC 전망 최진호_webappscamp
WebRTC 전망 최진호_webappscampBlisson Choi
 
Tdevelopers forum web_rtc 기술 및 api 활용
Tdevelopers forum web_rtc 기술 및 api 활용Tdevelopers forum web_rtc 기술 및 api 활용
Tdevelopers forum web_rtc 기술 및 api 활용Tdev SKtelecom
 

More Related Content

Similar to WebRTC

어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅
어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅
어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅ksdc2019
 
원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영
원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영
원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영sung young son
 
WebRTC 품질 측정 기초
WebRTC 품질 측정 기초WebRTC 품질 측정 기초
WebRTC 품질 측정 기초Blisson Choi
 
소켓프로그래밍 기초요약
소켓프로그래밍 기초요약소켓프로그래밍 기초요약
소켓프로그래밍 기초요약세빈 정
 
3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)
3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)
3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)KH Park (박경훈)
 
[D2 CAMPUS]웹 개발자의 스펙 : HTTP
[D2 CAMPUS]웹 개발자의 스펙 : HTTP[D2 CAMPUS]웹 개발자의 스펙 : HTTP
[D2 CAMPUS]웹 개발자의 스펙 : HTTPNAVER D2
 
WebRTC 1.0 표준완성과 현재, 그리고 다음버전
WebRTC 1.0 표준완성과 현재, 그리고 다음버전WebRTC 1.0 표준완성과 현재, 그리고 다음버전
WebRTC 1.0 표준완성과 현재, 그리고 다음버전sung young son
 
Web rtc meetup_korea_1st(20161115)
Web rtc meetup_korea_1st(20161115)Web rtc meetup_korea_1st(20161115)
Web rtc meetup_korea_1st(20161115)Rang-Hyuck Lee
 
Block chain bidding_System
Block chain bidding_SystemBlock chain bidding_System
Block chain bidding_System환석 주
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술JungHyuk Kwon
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술정혁 권
 
Interface and Protocol
Interface and ProtocolInterface and Protocol
Interface and ProtocolWonjun Hwang
 
웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서
웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서
웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서Justin Shin
 
웹기반원격감시제어 2010 CPD
웹기반원격감시제어 2010 CPD웹기반원격감시제어 2010 CPD
웹기반원격감시제어 2010 CPD활 김
 
Encrypted media extention
Encrypted media extentionEncrypted media extention
Encrypted media extentionTaehyun Kim
 
Python으로 채팅 구현하기
Python으로 채팅 구현하기Python으로 채팅 구현하기
Python으로 채팅 구현하기Tae Young Lee
 
Block chain architecture and hyperledger fabric overview
Block chain architecture and hyperledger fabric overviewBlock chain architecture and hyperledger fabric overview
Block chain architecture and hyperledger fabric overview병준 김
 
Vidio system 1
Vidio system 1Vidio system 1
Vidio system 1요섭 김
 
신동형의 발로 뛰는 ICT Insight Vol3
신동형의 발로 뛰는 ICT Insight Vol3신동형의 발로 뛰는 ICT Insight Vol3
신동형의 발로 뛰는 ICT Insight Vol3Donghyung Shin
 

Similar to WebRTC (20)

어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅
어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅
어려웠다, WebRTC를 활용한 360º 영상통화 트러블 슈팅
 
원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영
원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영
원격회의 분야의 실감형 콘텐츠 표준활용 동향_WebRTC 융합_손성영
 
WebRTC 품질 측정 기초
WebRTC 품질 측정 기초WebRTC 품질 측정 기초
WebRTC 품질 측정 기초
 
소켓프로그래밍 기초요약
소켓프로그래밍 기초요약소켓프로그래밍 기초요약
소켓프로그래밍 기초요약
 
3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)
3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)
3일차-닷넷 분산 기술의 이해 (인피니트 강의자료)
 
[D2 CAMPUS]웹 개발자의 스펙 : HTTP
[D2 CAMPUS]웹 개발자의 스펙 : HTTP[D2 CAMPUS]웹 개발자의 스펙 : HTTP
[D2 CAMPUS]웹 개발자의 스펙 : HTTP
 
WebRTC 1.0 표준완성과 현재, 그리고 다음버전
WebRTC 1.0 표준완성과 현재, 그리고 다음버전WebRTC 1.0 표준완성과 현재, 그리고 다음버전
WebRTC 1.0 표준완성과 현재, 그리고 다음버전
 
Web rtc meetup_korea_1st(20161115)
Web rtc meetup_korea_1st(20161115)Web rtc meetup_korea_1st(20161115)
Web rtc meetup_korea_1st(20161115)
 
Block chain bidding_System
Block chain bidding_SystemBlock chain bidding_System
Block chain bidding_System
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술
 
Interface and Protocol
Interface and ProtocolInterface and Protocol
Interface and Protocol
 
웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서
웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서
웹톡스 - WebTalks 모바일 음성변환 솔루션 제안서
 
웹기반원격감시제어 2010 CPD
웹기반원격감시제어 2010 CPD웹기반원격감시제어 2010 CPD
웹기반원격감시제어 2010 CPD
 
Encrypted media extention
Encrypted media extentionEncrypted media extention
Encrypted media extention
 
실시간통신
실시간통신실시간통신
실시간통신
 
Python으로 채팅 구현하기
Python으로 채팅 구현하기Python으로 채팅 구현하기
Python으로 채팅 구현하기
 
Block chain architecture and hyperledger fabric overview
Block chain architecture and hyperledger fabric overviewBlock chain architecture and hyperledger fabric overview
Block chain architecture and hyperledger fabric overview
 
Vidio system 1
Vidio system 1Vidio system 1
Vidio system 1
 
신동형의 발로 뛰는 ICT Insight Vol3
신동형의 발로 뛰는 ICT Insight Vol3신동형의 발로 뛰는 ICT Insight Vol3
신동형의 발로 뛰는 ICT Insight Vol3
 

More from Wonjun Hwang

JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)Wonjun Hwang
 
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Wonjun Hwang
 
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyWonjun Hwang
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyWonjun Hwang
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사Wonjun Hwang
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Wonjun Hwang
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음Wonjun Hwang
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드Wonjun Hwang
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링Wonjun Hwang
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업Wonjun Hwang
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기Wonjun Hwang
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드Wonjun Hwang
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기Wonjun Hwang
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계Wonjun Hwang
 

More from Wonjun Hwang (20)

JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)
 
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)
 
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
 
PWA
PWAPWA
PWA
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링
 
Passkey
PasskeyPasskey
Passkey
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업
 
AI News '23.12
AI News '23.12AI News '23.12
AI News '23.12
 
Google Analytics
Google AnalyticsGoogle Analytics
Google Analytics
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드
 
상속과 구현
상속과 구현상속과 구현
상속과 구현
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계
 
성능 테스트
성능 테스트성능 테스트
성능 테스트
 

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: 통화 수락