![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 }
]
});](https://image.slidesharecdn.com/webrtc20150528-150608055450-lva1-app6891/85/Webrtc-20150528-14-320.jpg)
![Connect
{
"header":{
"command":"connect",
"token":"TKS11431908983594"
},
"body":{
"channelId":"CHS11431908983591"
}
}
SignalOffer
{
"header":{
"command":"connect",
"token":"TKS11431916414390"
},
"body":{
"othersCount":"0",
"channelId":"CHS11431916414387",
"others":[]
}
}](https://image.slidesharecdn.com/webrtc20150528-150608055450-lva1-app6891/85/Webrtc-20150528-17-320.jpg)
![Datachannel 생성
var pc = new PeerConnection({
iceServers: []
}, {
optional: [
{ RtpDataChannels: false }
]
});
var data = pc.createDataChannel("webrtc_test", { });](https://image.slidesharecdn.com/webrtc20150528-150608055450-lva1-app6891/85/Webrtc-20150528-23-320.jpg)
![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);](https://image.slidesharecdn.com/webrtc20150528-150608055450-lva1-app6891/85/Webrtc-20150528-27-320.jpg)
![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);](https://image.slidesharecdn.com/webrtc20150528-150608055450-lva1-app6891/85/Webrtc-20150528-29-320.jpg)
![[1D2]아이비컨과 공유기 해킹을 통한 인도어 IOT 삽질기](https://cdn.slidesharecdn.com/ss_thumbnails/1d2iot-140927230515-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[1D5]모바일 p2p 미디어 스트리밍 방법](https://cdn.slidesharecdn.com/ss_thumbnails/1d5p2p-140927232736-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[1A4]자바스크립트 라이브러리 개발 운영 경험기](https://cdn.slidesharecdn.com/ss_thumbnails/1a4-140928080702-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[MeetUp][2nd] 오리뎅이의_쿠버네티스_네트워킹_v1.2](https://cdn.slidesharecdn.com/ss_thumbnails/3-191220022100-thumbnail.jpg?width=560&fit=bounds)
![[1C2]webrtc 개발, 현재와 미래](https://cdn.slidesharecdn.com/ss_thumbnails/1c2webrtc-140927230503-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (8)
Viewers also liked (12)
Similar to Webrtc 허영남 20150528 (20)
![[243]kaleido 노현걸](https://cdn.slidesharecdn.com/ss_thumbnails/243kaleido-161025011559-thumbnail.jpg?width=560&fit=bounds)
![[Step UP! 마이그레이션] RAD 업그레이드 마이그레이션_점검과 수행](https://cdn.slidesharecdn.com/ss_thumbnails/stepup-140821015017-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기](https://cdn.slidesharecdn.com/ss_thumbnails/wjkqukgsqgm2vger5dnt-signature-2cf736e9b897e2aaaa6315f9d31d6951ba19fae7560fe278cefb4644ac0753c6-poli-170428114140-thumbnail.jpg?width=560&fit=bounds)
Webrtc 허영남 20150528
- 1. How to make WebRTC App 2015.05.28
- 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 = /slideshow/webrtc-20150528/49107364/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
- 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 전송 대용량 파일 보내기
- 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
- 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