WebRTC How to make webrtc application.

1. How to make WebRTC
App
2015.05.28

2. 허영남
웹클라이언트개발자
그리고!! FullStackforPlayRTCDeveloper..
cryingnavi@gmail.com
http://facebook.com/cryingnavi
발표자 소개

3. 누구를 위한 발표인가
• 신기술에 관심 있는 Web 개발자
• 웹브라우저를 통한 실시간 통신에 관심 있는 web 개
발자

4. Agenda
• WebRTC 개요
• WebRTC Main APIs
• DataChannel 사용하기 및 팁
• PlayRTC란 무엇인가?
• WebRTC 품질 분석하기
• Test 자동화

5. WebRTC is

6. STUN
• Session Traversal Utilities for NAT

7. TURN
• Traversal Using Relays around NAT

8. SDP
• 미디어에 대한 메타 데이터로 해상도, 코덱 등을 기
술
• peer 간의 미디어 데이터를 이해하는데 사용
• offer 와 answer 로 구분

9. Candidate
• 미디어를 수신할 수 있는 가능성을 가진 네트워크 경
로에 대한 후보군

10. Signaling

11. Main APIs
• getUserMedia
• Access to Camera, Microphone
• PeerConnection
• signal processing, Security, encode, decode,
NAT traversal, packet send/receive,
bandwidth estimation etc..
• DataChannel
• text message, binary data..

12. getUserMedia
var UserMedia = (function (){
var getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
return getUserMedia;
})();
UserMedia({video: true, audio: true},
function(stream){
}, function(e){
});

13. getUserMedia
UserMedia({video: true, audio: true},
function(stream){
video.src = URL.createObjectURL(stream);
video.play();
video.mute = true;
}, function(e){
});

14. PeerConnection
var PeerConnection = (function(){
var PeerConnection = window.PeerConnection ||
window.webkitPeerConnection00 ||
window.webkitRTCPeerConnection ||
window.mozRTCPeerConnection ||
window.RTCPeerConnection;
return PeerConnection;
})();
var pc = new PeerConnection({
iceServers: [
{"url": "stun:23.21.150.121" },
{"url": "stun:stun.l.google.com:19302"}
]}, {
optional: [
{ DtlsSrtpKeyAgreement: true },
{ RtpDataChannels: false }
]
});

15. PeerConnection
• Method
• addStream - Local Stream
• createOffer - Offer SDP
• setLocalDescription
• createAnswer - Answer SDP
• setRemoteDescription
• addIceCandidate
• Event
• onicecandidate - Candidate
• onaddstream - Remote Stream

16. Signal Server AnswerOfferHANDSHAKECONNECTION
Connect
Create Peer
Create
Offer Create Peer
Create
Answer
Set Offer
Set Answer
Candidate Candidate
Connect Connect
Candidate
new
Checking
Connected
new
Checking
Connected
Disconnect
ed
close close
Failed Failed
Completed Completed
1 1
2
3
4
5
6
Offer SDP
Websocket
Connect
Offer SDP
Answer SDP
Answer SDP
Candidate Candidate
Websocket
Connect

17. Connect
{
"header":{
"command":"connect",
"token":"TKS11431908983594"
},
"body":{
"channelId":"CHS11431908983591"
}
}
SignalOffer
{
"header":{
"command":"connect",
"token":"TKS11431916414390"
},
"body":{
"othersCount":"0",
"channelId":"CHS11431916414387",
"others":[]
}
}

18. SDP
Offer Signal Answer
{
"header":{
"command":“sdp",
"token":"TKS11432169940272"
},"
body":{
“type”: “offer”
“sdp":"{"sdp":"v=0rno=-
7623322749329858714 2 IN IP4 127.0.0.1...."
}
}
{
"header":{
"command":“sdp",
"token":"TKS11432169940272",
"sender":"TKS11432169945602"
},"
body":{
“type”: “answer”
“sdp":"{"sdp":"v=0rno=-
7623322749329858714 2 IN IP4 127.0.0.1...."
}
}
Offer
Answer

19. SDPpc.createOffer(function(sessionDesc) {
pc.setLocalDescription(sessionDesc);
ws.send(JSON.stringify({
"header":{
"command":“sdp", "token":"TKS11432169940272"
},"
body":{
“type”: “offer”, “sdp": sessionDesc
}
});
}, function(e){ console.log("error"); });
pc. createAnswer(function(sessionDesc) {
pc.setLocalDescription(sessionDesc);
ws.send(JSON.stringify({
"header":{
"command":“sdp", "token":" TKS11432169940272 "
},"
body":{
“type”: “answer”, “sdp": sessionDesc
}
});
}, function(e){ console.log("error"); });
Offer
Answer

20. Candidate
{
"header":{
"command":“candidate",
"token":"TKS11432169940272"
},"
body":{
“candidate":"
{"sdpMLineIndex":1,"sdpMid":"video","cand
idate":"candidate:1816031214 ....."
}
}
{
"header":{
"command":“candidate ",
"token":"TKS11432169940272",
"sender":"TKS11432169945602"
},"
body":{
“candidate ":"
{"sdpMLineIndex":0,"sdpMid":"audio","can
didate":"candidate:2629291569..... "
}
}
Offer Signal Answer

21. Candidate
pc.onicecandidate = function(e){
if(e.candidate){
ws.send(JSON.stringify({
"header":{
"command":“candidate",
"token":"TKS11432169940272"
},"
body":{
“candidate": e.candidate
}
});
};
};

22. DataChannel
• SCTP or RTP
• Unreliable or reliable
• WebSocket 과 같은 API
• 대용량 파일 전송 시 Worker, File API 사용
• 타 플랫폼과의 파일 교환 시엔 base64 또는
ByteArray 를 사용

23. Datachannel 생성
var pc = new PeerConnection({
iceServers: []
}, {
optional: [
{ RtpDataChannels: false }
]
});
var data = pc.createDataChannel("webrtc_test", { });

24. Worker

25. Worker
worker = new Worker("worker.js");
worker.onmessage = function(event
alert(event.data);
};
worker.postMessage(“Hello Worker!!");

26. Worker
onmessage = function(e){
var data = e.data, reader = null;
if(!FileReaderSync) {
reader = new FileReader();
reader.onload = function(e){
postMessage(e.target.result);
};
reader.readAsArrayBuffer(data);
} else{
reader = new FileReaderSync();
postMessage(reader.readAsArrayBuffer(data));
}
};

27. Worker
var javascript = function(e){
var data = e.data, reader = null;
if(!FileReaderSync) {
//
} else{
//
}
};
var blob = new Blob([ "onmessage = " + javascript.toString() ], {
type: "application/javascript"
});
blob = URL.createObjectURL(blob);
var worker = new Worker(blob);

28. Typed Array
• Binary Data handling
• Buffer and View
• Buffer 는 길이가 정해진 이진 데이터 버퍼
• View 는 Buffer 로 부터 값을 읽거나 쓸 수 있도
록 로우 레벨 인터페이스 제공

29. var buf = new ArrayBuffer(text.length * 2),
view = new Uint8Array(buf), i = 0, char = null,
len = text.length, j = 0;
for(;i < len; i++) {
char = text.charCodeAt(i);
view[j] = char >>> 8;
view[j + 1] = char & 0xFF;
j = j + 2;
}
var arr = this.packetSplit(buf, 66488),
hbuf = new ArrayBuffer(36),
dv = new DataView(hbuf);
dv.setFloat64(0, id);
dv.setInt32(8, 0);
dv.setFloat64(12, buf.byteLength);
dv.setInt32(20, 0);
dv.setInt32(24, arr.length);
dv.setInt32(28, 0);
dv.setInt32(32, arr[0].byteLength);
send(dv.buffer, arr, 0);

30. 대용량 파일 보내기
1. Worker와 File API 를 통해 파일을 ArrayBuffer변환
2. ArrayBuffer 를 적절한 사이즈로 잘라서 배열로 보관
3. Typed Array 를 활용하여 파일 개요를 담은 Header
를 생성
4. Header 와 잘라진 파일 배열을 결합하여 전송
5. 배열을 끝날 때까지 반복하여 전송

31. Header Body 전송
대용량 파일 보내기

32. WebRTC 구현 끝!
하지만..

33. IOS
Android
Internet Expolor
Codec
H.264
Monitoring
TURN
Signaling
1:N
N:N 성능
과금
broadcasting
품질

34. IOS
Android
Internet Expolor
Codec
H.264
Monitorin
g
TURN
Signaling
1:N
N:N 성능
과금
broadcasting
품질

35. PlayRTC

36. PlayRTC
• WebRTC 서비스 플랫폼
• WebRTC 개발을 잘 모르는 비전문가도 쉽게 새로운
비즈니스를 만들어갈 수 있도록 플랫폼과 API를 제공
• Web browser 외에 다양한 스마트 디바이스를 지원
(Android, IOS, IE)
• http://playrtc.com
• https://github.com/playrtc

37. PlayRTC Coding
• Live Coding

38. WebRTC Internals
• chrome://webrtc-internals

39. WebRTC Internals
• Peer CandidateType
• bwe
• bandwidth estimation
• Packet Lost, RTT, Jitter 등으로 네트웍 상태를 파악
• Video Frame Width, Frame Height, Frame Rate 등 확
인

40. 테스트
• selenium
• web app 를 위한 테
스팅 프레임워크
• 자동화 테스트를 위한
기능을 제공
• nightwatch.js
• selenium 을 node.js 에서 사
용할 수 있도록 제공

41. 설치
• JDK 6 이상 설치
• node.js 설치
• nightwatch 설치
• npm install nightwatch
• selenium 설치
• selenium-server-standalone-x.x.x.jar 를 다운받아서
원하는 폴더에 저장
• 브라우저 드라이버 설치
• Driver 저장소에서 원하는 브라우저 드라이버를 다운받
아 원하는 폴더에 저장

42. 테스트 코드 실행
• node ./bin/nightwatch.js --env chrome,chrome
-g single-page

43. Q n A