Getting started with WebRTC

7,171 views

Published on

JSLounge 네 번째 세미나의 Getting Started with WebRTC 발표 자료입니다. WebRTC에 대해 간략히 알 수 있습니다. 이 자료는 http://www.html5rocks.com/en/tutorials/webrtc/basics/ 페이지를 기초로 만들었습니다.

Published in: Technology
3 Comments
6 Likes
Statistics
Notes
  • @nundefined
    Thanks, I got an hint form someone on stackoverflow.com a few days ago and could now run it with socket.io (nodeJS). Wasn´t clear at the beginning that createSignalingChannel() was pseudo code...
    Now my next aim is to build a multiuser videochat (and even multiroom conference videchat) later on. Will see what is possible.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @maximiliangrossde Do you mean createSignalingChannel function from the sample code in this slide? It's not a real function and assumes that some signaling mechanism exists. You can find the code and explanation from http://www.html5rocks.com/en/tutorials/webrtc/basics/ or http://www.w3.org/TR/webrtc/#simple-example .
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Do you have any solution for: 'Uncaught ReferenceError: createSignalingChannel is not defined'
    I'm using Chrome 26.0.1410.33 beta-m
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,171
On SlideShare
0
From Embeds
0
Number of Embeds
4,122
Actions
Shares
0
Downloads
88
Comments
3
Likes
6
Embeds 0
No embeds

No notes for slide

Getting started with WebRTC

  1. 1. Getting
  2. 2.  Started
  3. 3.  with
  4. 4.   WebRTC 장정환
  5. 5. about
  6. 6.  me•장정환•nundefined@nundefined.com•http://nundefined.com•@nundefined
  7. 7. 들어가며•Getting
  8. 8.  Started
  9. 9.  with
  10. 10.  WebRTC•http://www.html5rocks.com/en/ tutorials/webrtc/basics/
  11. 11. RTC•Real-Time
  12. 12.  Communication•실시간
  13. 13.  통신•복잡하고
  14. 14.  직접
  15. 15.  개발하기에는
  16. 16.  비쌈 •라이센스,
  17. 17.  개발비
  18. 18.  등•앱을
  19. 19.  설치하거나
  20. 20.  플러그인
  21. 21.  설치가
  22. 22.  필요•Google
  23. 23.  Hangouts,
  24. 24.  Skype
  25. 25.  ...
  26. 26. WebRTC•Web
  27. 27.  +
  28. 28.  RTC•브라우저를
  29. 29.  통해
  30. 30.  실시간
  31. 31.  통신을
  32. 32.  하는
  33. 33.  것•비디오,
  34. 34.  오디오
  35. 35.  외에도
  36. 36.  다양한
  37. 37.  데이터를
  38. 38.   교환•플러그인
  39. 39.  불필요
  40. 40. WebRTC
  41. 41.  히스토리•구글에서
  42. 42.  관련
  43. 43.  기술을
  44. 44.  오픈소스화•IETF와
  45. 45.  W3C에서
  46. 46.  표준화
  47. 47.  작업•현재
  48. 48.  Working
  49. 49.  Draft
  50. 50.  상태•Chrome과
  51. 51.  FireFox간의
  52. 52.  통신
  53. 53.  성공
  54. 54.   (2013/02) •http://youtu.be/MsAWR_rJ5n8
  55. 55. WebRTC
  56. 56.  표준
  57. 57.  현황•Editor’s
  58. 58.  Draft
  59. 59.  /
  60. 60.  Working
  61. 61.  Draft
  62. 62.  (WD)•Candidate
  63. 63.  Recommendation
  64. 64.  (CR)•Proposed
  65. 65.  Recommendation
  66. 66.  (PR)•W3C
  67. 67.  Recommendation
  68. 68.  (REC)
  69. 69. 전체
  70. 70.  구조https://sites.google.com/site/webrtc/reference/architecture
  71. 71. WebRTC
  72. 72.  관련
  73. 73.  API•MediaStream
  74. 74.  (getUserMedia)•RTCPeerConnection•RTCDataChannel
  75. 75. API와
  76. 76.  전체
  77. 77.  흐름 ? ?blah blah blah blah MediaStream MediaStream RTCPeerConnection / RTCDataChannel
  78. 78. MediaStream•getUserMedia()•미디어의
  79. 79.  동기화된
  80. 80.  스트림을
  81. 81.  제공•카메라
  82. 82.  화면
  83. 83.  +
  84. 84.  마이크
  85. 85.  소리 •오디오는
  86. 86.  chrome://flags에서
  87. 87.  설정
  88. 88.  후
  89. 89.   사용
  90. 90.  가능•항상
  91. 91.  사용자의
  92. 92.  권한
  93. 93.  확인을
  94. 94.  요구함
  95. 95. !doctype HTMLhtmlbodyvideo autoplay/videoscriptvar onFail = function(e){ console.log(Rejected: , e);}// because of webkit prefix, this code work on Chrome onlynavigator.webkitGetUserMedia({video: true, audio: true}, function(localMediaStream){ var video = document.querySelector(video); video.src = window.URL.createObjectURL(localMediaStream); video.onloadedmetadata = function(e){ console.log(meta data loaded: , e); };}, onFail);/script/body/html
  96. 96. Signaling•양쪽의
  97. 97.  연결을
  98. 98.  위해
  99. 99.  필요한
  100. 100.  모든
  101. 101.  과정•WebRTC에서
  102. 102.  정의한
  103. 103.  내용은
  104. 104.  없음 •시그널을
  105. 105.  주고
  106. 106.  받는
  107. 107.  방법이나
  108. 108.  규칙은
  109. 109.  개 발자의
  110. 110.  역할 •SIP,
  111. 111.  XMPP
  112. 112.  ... •XHR,
  113. 113.  Channel
  114. 114.  API,
  115. 115.  Web
  116. 116.  Socket
  117. 117.  ...•이
  118. 118.  과정이
  119. 119.  완료되어야
  120. 120.  통신
  121. 121.  가능
  122. 122. Signaling
  123. 123.  -
  124. 124.  교환
  125. 125.  정보 •Session
  126. 126.  Control
  127. 127.  Message •통신
  128. 128.  시작,
  129. 129.  종료,
  130. 130.  에러 •Network
  131. 131.  Configuration •IP
  132. 132.  address,
  133. 133.  port
  134. 134.  # •Media
  135. 135.  capabilities •codecs,
  136. 136.  resolutions
  137. 137. var signalingChannel = createSignalingChannel();var pc;var configuration = ...;// run start(true) to initiate a callfunction start(isCaller) { pc = new RTCPeerConnection(configuration); // send any ice candidates to the other peer pc.onicecandidate = function (evt) { signalingChannel.send(JSON.stringify({ candidate: evt.candidate })); (1) }; // once remote stream arrives, show it in the remote video element pc.onaddstream = function (evt) { remoteView.src = URL.createObjectURL(evt.stream); }; // get the local stream, show it in the local video element and send it navigator.getUserMedia({ audio: true, video: true }, function (stream) { selfView.src = URL.createObjectURL(stream); pc.addStream(stream); if (isCaller) pc.createOffer(gotDescription); else pc.createAnswer(pc.remoteDescription, gotDescription); function gotDescription(desc) { pc.setLocalDescription(desc); signalingChannel.send(JSON.stringify({ sdp: desc })); } });}
  138. 138. signalingChannel.onmessage = function (evt) { if (!pc) start(false); var signal = JSON.parse(evt.data); if (signal.sdp) pc.setRemoteDescription(new RTCSessionDescription(signal.sdp)); else pc.addIceCandidate(new RTCIceCandidate(signal.candidate)); (2)};
  139. 139. var signalingChannel = createSignalingChannel();var pc;var configuration = ...;// run start(true) to initiate a callfunction start(isCaller) { pc = new RTCPeerConnection(configuration); (1) // send any ice candidates to the other peer pc.onicecandidate = function (evt) { signalingChannel.send(JSON.stringify({ candidate: evt.candidate })); }; // once remote stream arrives, show it in the remote video element pc.onaddstream = function (evt) { remoteView.src = URL.createObjectURL(evt.stream); }; // get the local stream, show it in the local video element and send it navigator.getUserMedia({ audio: true, video: true }, function (stream) { selfView.src = URL.createObjectURL(stream); pc.addStream(stream); if (isCaller) pc.createOffer(gotDescription); (2) else pc.createAnswer(pc.remoteDescription, gotDescription); function gotDescription(desc) { pc.setLocalDescription(desc); signalingChannel.send(JSON.stringify({ sdp: desc })); } });}
  140. 140. signalingChannel.onmessage = function (evt) { if (!pc) start(false); var signal = JSON.parse(evt.data); if (signal.sdp) pc.setRemoteDescription(new RTCSessionDescription(signal.sdp)); (3) else pc.addIceCandidate(new RTCIceCandidate(signal.candidate));};
  141. 141. Signaling
  142. 142.  -
  143. 143.  순서 offer candidate offer Server CalleeCaller answer candidate answer stream
  144. 144. JSEPJavaScript Session Establishment Protocol(JSEP) architecture
  145. 145. RTCPeerConnection•안정적이고
  146. 146.  효과적인
  147. 147.  통신을
  148. 148.  담당•복잡한
  149. 149.  내용은
  150. 150.  신경쓸
  151. 151.  필요
  152. 152.  없다 •브라우저
  153. 153.  개발자의
  154. 154.  몫
  155. 155. 전체
  156. 156.  구조https://sites.google.com/site/webrtc/reference/architecture
  157. 157.
  158. 158.  페이지
  159. 159.  내에서의RTCPeerConnection MediaStream RTCPeerConnection
  160. 160. 서버를
  161. 161.  통한
  162. 162.  RTCPeerConnection•서버의
  163. 163.  역할 •통신할
  164. 164.  사용자를
  165. 165.  찾는
  166. 166.  일 •Signaling •NAT/firewall
  167. 167.  traversal •P2P가
  168. 168.  실패할
  169. 169.  경우
  170. 170.  연결해주는
  171. 171.  일
  172. 172. RTCDataChannel•임의의
  173. 173.  데이터
  174. 174.  교환을
  175. 175.  위한
  176. 176.  API•low
  177. 177.  latency,
  178. 178.  high
  179. 179.  throughput•Web
  180. 180.  Socket과
  181. 181.  유사
  182. 182. Security•RTC
  183. 183.  프로그램의
  184. 184.  일반적인
  185. 185.  보안
  186. 186.  문제 •암호화되지
  187. 187.  않은
  188. 188.  데이터를
  189. 189.  중간에서
  190. 190.  누 군가가
  191. 191.  가로챌
  192. 192.  수
  193. 193.  있는
  194. 194.  문제 •사용자가
  195. 195.  인식하지
  196. 196.  못한
  197. 197.  채로
  198. 198.  데이터가
  199. 199.   녹화되고
  200. 200.  배포될
  201. 201.  수
  202. 202.  있는
  203. 203.  문제 •악성
  204. 204.  프로그램이
  205. 205.  설치될
  206. 206.  수
  207. 207.  있는
  208. 208.  문제
  209. 209. Security•WebRTC의
  210. 210.  회피
  211. 211.  노력 •보안
  212. 212.  프로토콜의
  213. 213.  사용 •암호화
  214. 214.  필수 •별도의
  215. 215.  설치가
  216. 216.  필요
  217. 217.  없으며
  218. 218.  브라우저의
  219. 219.   샌드박스에서
  220. 220.  실행 •카메라와
  221. 221.  마이크의
  222. 222.  명시적인
  223. 223.  사용
  224. 224.  허락 과
  225. 225.  사용
  226. 226.  상태를
  227. 227.  UI에
  228. 228.  표시
  229. 229. WebRTC
  230. 230.  일정•첫
  231. 231.  번째
  232. 232.  Working
  233. 233.  Draft:
  234. 234.  2011-10-27•현재
  235. 235.  Working
  236. 236.  Draft:
  237. 237.  2012-08-21•Last
  238. 238.  Call
  239. 239.  Working
  240. 240.  Draft:
  241. 241.   •Q1
  242. 242.  2013
  243. 243.  
  244. 244.  Q3
  245. 245.  2013•Candidate
  246. 246.  Recommendation:
  247. 247.   •Q4
  248. 248.  2012
  249. 249.  
  250. 250.  Q1
  251. 251.  2014
  252. 252. getUserMedia
  253. 253.  일정•첫
  254. 254.  번째
  255. 255.  Working
  256. 256.  Draft:
  257. 257.  2011-10-27•현재
  258. 258.  Working
  259. 259.  Draft:
  260. 260.  2012-06-28•Last
  261. 261.  Call
  262. 262.  Working
  263. 263.  Draft •Q2
  264. 264.  2013
  265. 265. Potentially,
  266. 266.  WebRTC
  267. 267.  and
  268. 268.  HTML5
  269. 269.  could
  270. 270.  enable
  271. 271.  the
  272. 272.  same
  273. 273.  transformation
  274. 274.  for
  275. 275.  real-time
  276. 276.  communications
  277. 277.  that
  278. 278.  the
  279. 279.  original
  280. 280.  browser
  281. 281.  did
  282. 282.  for
  283. 283.  information. -
  284. 284.  Phil
  285. 285.  Edholm,
  286. 286.  the
  287. 287.  President
  288. 288.  and
  289. 289.  Founder
  290. 290.  of
  291. 291.  PKE
  292. 292.  Consulting
  293. 293. Questions?
  294. 294. 감사합니다nundefined@nundefined.com
  295. 295. 참고
  296. 296.  자료• Getting
  297. 297.  Started
  298. 298.  with
  299. 299.  WebRTC • http://www.html5rocks.com/en/tutorials/webrtc/basics/• Google
  300. 300.  I/O
  301. 301.  2012
  302. 302.  -
  303. 303.  WebRTC:
  304. 304.  Real-time
  305. 305.  Audio/Video
  306. 306.  and
  307. 307.  P2P
  308. 308.  in
  309. 309.  HTML5 • https://www.youtube.com/watch?v=E8C8ouiXHHk• WebRTC
  310. 310.  Working
  311. 311.  Draft
  312. 312.  21 • http://www.w3.org/TR/2012/WD-webrtc-20120821/• http://www.nojitter.com/post/232901042/webrtc-is-it-a-game- changer• Source
  313. 313.  Code • https://github.com/inomies/WebRTCDemo

×