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

1. Getting

2. Started

3. with

4.
WebRTC
장정환

5. about

6. me
•장정환
•nundefined@nundefined.com
•http://nundefined.com
•@nundefined

7. 들어가며
•Getting

8. Started

9. with

10. WebRTC
•http://www.html5rocks.com/en/
tutorials/webrtc/basics/

11. RTC
•Real-Time

12. Communication
•실시간

13. 통신
•복잡하고

14. 직접

15. 개발하기에는

16. 비쌈
•라이센스,

17. 개발비

18. 등
•앱을

19. 설치하거나

20. 플러그인

21. 설치가

22. 필요
•Google

23. Hangouts,

24. Skype

25. ...

26. WebRTC
•Web

27. +

28. RTC
•브라우저를

29. 통해

30. 실시간

31. 통신을

32. 하는

33. 것
•비디오,

34. 오디오

35. 외에도

36. 다양한

37. 데이터를

38.
교환
•플러그인

39. 불필요

40. WebRTC

41. 히스토리
•구글에서

42. 관련

43. 기술을

44. 오픈소스화
•IETF와

45. W3C에서

46. 표준화

47. 작업
•현재

48. Working

49. Draft

50. 상태
•Chrome과

51. FireFox간의

52. 통신

53. 성공

54.
(2013/02)
•http://youtu.be/MsAWR_rJ5n8

55. WebRTC

56. 표준

57. 현황
•Editor’s

58. Draft

59. /

60. Working

61. Draft

62. (WD)
•Candidate

63. Recommendation

64. (CR)
•Proposed

65. Recommendation

66. (PR)
•W3C

67. Recommendation

68. (REC)

69. 전체

70. 구조
https://sites.google.com/site/webrtc/reference/architecture

71. WebRTC

72. 관련

73. API
•MediaStream

74. (getUserMedia)
•RTCPeerConnection
•RTCDataChannel

75. API와

76. 전체

77. 흐름
? ?
blah blah
blah blah
MediaStream MediaStream
RTCPeerConnection
/ RTCDataChannel

78. MediaStream
•getUserMedia()
•미디어의

79. 동기화된

80. 스트림을

81. 제공
•카메라

82. 화면

83. +

84. 마이크

85. 소리
•오디오는

86. chrome://flags에서

87. 설정

88. 후

89.
사용

90. 가능
•항상

91. 사용자의

92. 권한

93. 확인을

94. 요구함

95. !doctype HTML
html
body
video autoplay/video
script
var onFail = function(e){
console.log('Rejected: ', e);
}
// because of webkit prefix, this code work on Chrome only
navigator.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. Signaling
•양쪽의

97. 연결을

98. 위해

99. 필요한

100. 모든

101. 과정
•WebRTC에서

102. 정의한

103. 내용은

104. 없음
•시그널을

105. 주고

106. 받는

107. 방법이나

108. 규칙은

109. 개
발자의

110. 역할
•SIP,

111. XMPP

112. ...
•XHR,

113. Channel

114. API,

115. Web

116. Socket

117. ...
•이

118. 과정이

119. 완료되어야

120. 통신

121. 가능

122. Signaling

123. -

124. 교환

125. 정보
•Session

126. Control

127. Message
•통신

128. 시작,

129. 종료,

130. 에러
•Network

131. Configuration
•IP

132. address,

133. port

134. #
•Media

135. capabilities
•codecs,

136. resolutions

137. var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function 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. 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. var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function 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. 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. Signaling

142. -

143. 순서
offer
candidate
offer
Server
Callee
Caller answer
candidate
answer
stream

144. JSEP
JavaScript Session Establishment Protocol(JSEP) architecture

145. RTCPeerConnection
•안정적이고

146. 효과적인

147. 통신을

148. 담당
•복잡한

149. 내용은

150. 신경쓸

151. 필요

152. 없다
•브라우저

153. 개발자의

154. 몫

155. 전체

156. 구조
https://sites.google.com/site/webrtc/reference/architecture

157. 한

158. 페이지

159. 내에서의
RTCPeerConnection
MediaStream
RTCPeerConnection

160. 서버를

161. 통한

162.
RTCPeerConnection
•서버의

163. 역할
•통신할

164. 사용자를

165. 찾는

166. 일
•Signaling
•NAT/firewall

167. traversal
•P2P가

168. 실패할

169. 경우

170. 연결해주는

171. 일

172. RTCDataChannel
•임의의

173. 데이터

174. 교환을

175. 위한

176. API
•low

177. latency,

178. high

179. throughput
•Web

180. Socket과

181. 유사

182. Security
•RTC

183. 프로그램의

184. 일반적인

185. 보안

186. 문제
•암호화되지

187. 않은

188. 데이터를

189. 중간에서

190. 누
군가가

191. 가로챌

192. 수

193. 있는

194. 문제
•사용자가

195. 인식하지

196. 못한

197. 채로

198. 데이터가

199.
녹화되고

200. 배포될

201. 수

202. 있는

203. 문제
•악성

204. 프로그램이

205. 설치될

206. 수

207. 있는

208. 문제

209. Security
•WebRTC의

210. 회피

211. 노력
•보안

212. 프로토콜의

213. 사용
•암호화

214. 필수
•별도의

215. 설치가

216. 필요

217. 없으며

218. 브라우저의

219.
샌드박스에서

220. 실행
•카메라와

221. 마이크의

222. 명시적인

223. 사용

224. 허락
과

225. 사용

226. 상태를

227. UI에

228. 표시

229. WebRTC

230. 일정
•첫

231. 번째

232. Working

233. Draft:

234. 2011-10-27
•현재

235. Working

236. Draft:

237. 2012-08-21
•Last

238. Call

239. Working

240. Draft:

241.
•Q1

242. 2013

244. Q3

245. 2013
•Candidate

246. Recommendation:

247.
•Q4

248. 2012

250. Q1

251. 2014

252. getUserMedia

253. 일정
•첫

254. 번째

255. Working

256. Draft:

257. 2011-10-27
•현재

258. Working

259. Draft:

260. 2012-06-28
•Last

261. Call

262. Working

263. Draft
•Q2

264. 2013

265. 'Potentially,

266. WebRTC

267. and

268. HTML5

269. could

270.
enable

271. the

272. same

273. transformation

274. for

275.
real-time

276. communications

277. that

278. the

279.
original

280. browser

281. did

282. for

283. information.'
-

284. Phil

285. Edholm,

286. the

287. President

288. and

289. Founder

290. of

291. PKE

292. Consulting

293. Questions?

294. 감사합니다
nundefined@nundefined.com

295. 참고

296. 자료
• Getting

297. Started

298. with

299. WebRTC
• http://www.html5rocks.com/en/tutorials/webrtc/basics/
• Google

300. I/O

301. 2012

302. -

303. WebRTC:

304. Real-time

305. Audio/Video

306. and

307. P2P

308. in

309. HTML5
• https://www.youtube.com/watch?v=E8C8ouiXHHk
• WebRTC

310. Working

311. Draft

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. Code
• https://github.com/inomies/WebRTCDemo