What is web rtc

2,201 views

Published on

WebRTC 소개와

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,201
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
79
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

What is web rtc

  1. 1. What is WebRTC?기술연구소 / 정기철
  2. 2. 동기• IT News 에 WebRTC 라는 용어가자주 나옴• 앞으로 뜰거 같아서
  3. 3. without plugin
  4. 4. 20142014 년 초반되면년 초반되면 ......
  5. 5. Roadmap• WebRTC 소개• WebRTC API• WebRTC 를 활용한 주요 서비스
  6. 6. WebRTC 소개
  7. 7. WebRTC 란 ?• Real-Time Communications (RTC)Web+RTC• 자바스크립트 API 를 통해서• Google Mozilla, Opera 의 지원을 받는오픈 프로젝트• Mission : HTML5+Javascript API 를 통해서높은 수준의 RTC Application 이 개발 될수 있도록 하는 것
  8. 8. History• 2011 년 5 월Ericsson 에 의해 처음 구현• 2011 년 10 월W3C 에 처음 공식 드래프팅• 2012 년 2 월 ,WebRTC Native APIs 2.0 (libjingle r115)
  9. 9. History• 2012 년 6 월Google I/O WebRTC Session 발표• 2013 년 2 월 ,Firefox와 Chrome간 통신 성공• 2013 년 5 월Google I/O WebRTC Session 다시 발표
  10. 10. WebRTC API주요 역할• Audio,Video 얻기• Audio,Video 통신• 기타 임의 데이터를 통신
  11. 11. WebRTC APIs• MediaStreamCamera, Mic, 화면으로부터스트림을 얻음• PeerConnection오디오 , 비디오를 호출네트워크와 관련• DataChannel일반적인 데이터 전송WebSocket 과 유사
  12. 12. WebRTC APIs
  13. 13. MediaStream?• 데이터 스트림에 접근할 수 있게 함Camera, Mic , Screen, ...• navigator.getUserMedia()• 맥의 Photobooth 와 같은 어플리케이션을 웹에서 구현 가능• Chrome, FF, Opera 최신버전에서 지원
  14. 14. API support summary
  15. 15. MediaStream활용• + Canvas + CSS : Snapshot, 필터 효과 , ...• + Audio API : 녹음기 , ...• + JS : 얼굴인식 , 모션캡쳐 , ...• + PeerConnection API : 원격 화상회의 , ......
  16. 16. MediaStream 의 흐름
  17. 17. MediaStream 의 흐름WebRTC 아키텍쳐
  18. 18. MediaStreamCode
  19. 19. MediaStreamAscii Camera• http://idevelop.ro/ascii-camera/
  20. 20. MediaStreamWebCamToy• http://webcamtoy.com/app/
  21. 21. MediaStreamFacekat• http://shinydemos.com/facekat/
  22. 22. MediaStreamTracking• https://github.com/eduardolundgren/tracking.js
  23. 23. MediaStreamAudioRecorder• http://www.webaudiodemos.appspot.com/AudioRe
  24. 24. MediaStreamScreen share• https://html5-demos.appspot.com/static/getuserme• 웹서버 - SSL 필요• chrome://flags/
  25. 25. PeerConnection?• Signal processing• Codec handling• P2P CommunicationPeer 생성과 전달• Security• Bandwidth management...
  26. 26. Signaling?• Peer 간에 세션정보를 교환하는 것SDP(Session Description Protocol) rfc3264• PeerConnection API 에 속하지 않는 영역• SIP, XMPP,Websocket, 등 ... 적절한 방법• P2P 스트리밍이 시작되기 전에 시그널링을 통해 정보 교환이 정상적으로 완료되어야 함 .
  27. 27. SDP교환하는 3 가지 정보• 세션 컨트롤 메세지통신을 초기화 , 종료에러 보고• 네트워크 설정• 미디어 재생 능력코덱 , 해상도
  28. 28. JSEP Architecture
  29. 29. 연결후보 찾기
  30. 30. 서버 없는 구성 예제
  31. 31. 서버 있는 구성 예제WebSocket
  32. 32. DataChannels• 웹소켓과 유사하지만 P2P• audio/video 를 제외한다른 데이터 타입을 전송하기 위한 채널• 게임 , 문자채팅 , 파일전송 , ...
  33. 33. DataChannel 예제
  34. 34. DataChannel DemoSharefest• https://github.com/Peer5/ShareFest
  35. 35. WebRTC 상태보기• chrome://webrtc-internals
  36. 36. WebRTC Service
  37. 37. OpenTokVideo Chat• http://www.tokbox.com/• 통합을 위한 개발 가능
  38. 38. • https://vline.com/• 통합을 위한 개발 가능vLineVideo Chat
  39. 39. VeckonVideo Chat• http://www.veckon.com/• IE( 크롬프레임 ), FF, Chrome 간 통신 성공• 모든 API 를 사용• 가입없이 사용 가능• 한국 회사
  40. 40. TowTruck• https://towtruck.mozillalabs.com/• 실시간 협업• 음성채팅 기능에서 WebRTC 사용
  41. 41. PeerCDN• https://peercdn.com/• DataChannel API 를 이용한 P2P CDN• 비공개 베타• 크롬만 지원
  42. 42. Recap
  43. 43. Reference• WebRTC 공식 사이트• Getting Started with WebRTC• WebRTC WebAPI Spec - W3C• Ericcson Lab• ICE,TURN and STUN for NAT Traversal
  44. 44. Thanks

×