webrtc 허영남 20150528
TRANSCRIPT
How to make WebRTC App 2015.05.28
허 영남
웹 클라이언트 개발자
그리고!! Full Stack for PlayRTC Developer..
http://facebook.com/cryingnavi
발표자 소개
누구를 위한 발표인가
• 신기술에 관심 있는 Web 개발자
• 웹브라우저를 통한 실시간 통신에 관심 있는 web 개
발자
Agenda
• WebRTC 개요
• WebRTC Main APIs
• DataChannel 사용하기 및 팁
• PlayRTC란 무엇인가?
• WebRTC 품질 분석하기
• Test 자동화
WebRTC is
STUN
• Session Traversal Utilities for NAT
TURN
• Traversal Using Relays around NAT
SDP
• 미디어에 대한 메타 데이터로 해상도, 코덱 등을 기
술
• peer 간의 미디어 데이터를 이해하는데 사용
• offer 와 answer 로 구분
Candidate
• 미디어를 수신할 수 있는 가능성을 가진 네트워크 경
로에 대한 후보군
Signaling
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..
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){ });
getUserMedia
UserMedia({video: true, audio: true}, function(stream){ video.src = URL.createObjectURL(stream); video.play(); video.mute = true; }, function(e){ });
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 } ] });
PeerConnection • Method
• addStream - Local Stream
• createOffer - Offer SDP
• setLocalDescription
• createAnswer - Answer SDP
• setRemoteDescription
• addIceCandidate
• Event
• onicecandidate - Candidate
• onaddstream - Remote Stream
Signal Server Answer Offer
HA
ND
SH
AK
E
CO
NN
EC
TIO
N
Connect
Create Peer
Create Offer Create Peer
Create Answer
Set Offer
Set Answer
Candidate Candidate
Connect Connect
Candidate
new
Checking
Connected
new
Checking
Connected
Disconnected
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
Connect { "header":{ "command":"connect", "token":"TKS11431908983594" }, "body":{ "channelId":"CHS11431908983591" } }
Signal Offer
{ "header":{ "command":"connect", "token":"TKS11431916414390" }, "body":{ "othersCount":"0", "channelId":"CHS11431916414387", "others":[] } }
SDP
Offer Signal Answer
{ "header":{ "command":“sdp", "token":"TKS11432169940272" }," body":{ “type”: “offer” “sdp":"{\"sdp\":\"v=0\\r\\no=- 7623322749329858714 2 IN IP4 127.0.0.1...." } }
{ "header":{ "command":“sdp", "token":"TKS11432169940272", "sender":"TKS11432169945602" }," body":{ “type”: “answer” “sdp":"{\"sdp\":\"v=0\\r\\no=- 7623322749329858714 2 IN IP4 127.0.0.1...." } }
Offer
Answer
SDP pc.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
Candidate { "header":{ "command":“candidate", "token":"TKS11432169940272" }," body":{ “candidate":" {\"sdpMLineIndex\":1,\"sdpMid\":\"video\",\"candidate\":\"candidate:1816031214 ....." } }
{ "header":{ "command":“candidate ", "token":"TKS11432169940272", "sender":"TKS11432169945602" }," body":{ “candidate ":" {\"sdpMLineIndex\":0,\"sdpMid\":\"audio\",\"candidate\":\"candidate:2629291569..... " } }
Offer Signal Answer
Candidate pc.onicecandidate = function(e){ if(e.candidate){ ws.send(JSON.stringify({ "header":{ "command":“candidate", "token":"TKS11432169940272" }," body":{ “candidate": e.candidate } }); }; };
DataChannel
• SCTP or RTP
• Unreliable or reliable
• WebSocket 과 같은 API
• 대용량 파일 전송 시 Worker, File API 사용
• 타 플랫폼과의 파일 교환 시엔 base64 또는
ByteArray 를 사용
Datachannel 생성
var pc = new PeerConnection({ iceServers: [] }, { optional: [ { RtpDataChannels: false } ] }); var data = pc.createDataChannel("webrtc_test", { });
Worker
Worker
worker = new Worker("worker.js"); worker.onmessage = function(event alert(event.data); }; worker.postMessage(“Hello Worker!!");
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)); } };
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);
Typed Array
• Binary Data handling
• Buffer and View
• Buffer 는 길이가 정해진 이진 데이터 버퍼
• View 는 Buffer 로 부터 값을 읽거나 쓸 수 있도
록 로우 레벨 인터페이스 제공
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);
대용량 파일 보내기
1. Worker와 File API 를 통해 파일을 ArrayBuffer변환
2. ArrayBuffer 를 적절한 사이즈로 잘라서 배열로 보관
3. Typed Array 를 활용하여 파일 개요를 담은 Header
를 생성
4. Header 와 잘라진 파일 배열을 결합하여 전송
5. 배열을 끝날 때까지 반복하여 전송
Header Body 전송
대용량 파일 보내기
WebRTC 구현 끝! 하지만..
IOS
Android
Internet Expolor
Codec
H.264
Monitoring
TURN
Signaling
1:N
N:N 성능
과금
broadcasting
품질
IOS
Android
Internet Expolor
Codec
H.264
Monitoring
TURN
Signaling
1:N
N:N 성능
과금
broadcasting
품질
PlayRTC
PlayRTC
• WebRTC 서비스 플랫폼
• WebRTC 개발을 잘 모르는 비전문가도 쉽게 새로운
비즈니스를 만들어갈 수 있도록 플랫폼과 API를 제공
• Web browser 외에 다양한 스마트 디바이스를 지원
(Android, IOS, IE)
• http://playrtc.com
• https://github.com/playrtc
PlayRTC Coding
• Live Coding
WebRTC Internals • chrome://webrtc-internals
WebRTC Internals
• Peer CandidateType
• bwe
• bandwidth estimation
• Packet Lost, RTT, Jitter 등으로 네트웍 상태를 파악
• Video Frame Width, Frame Height, Frame Rate 등 확
인
테스트
• selenium
• web app 를 위한 테
스팅 프레임워크
• 자동화 테스트를 위한
기능을 제공
• nightwatch.js
• selenium 을 node.js 에서 사
용할 수 있도록 제공
설치 • JDK 6 이상 설치
• node.js 설치
• nightwatch 설치
• npm install nightwatch
• selenium 설치
• selenium-server-standalone-x.x.x.jar 를 다운받아서
원하는 폴더에 저장
• 브라우저 드라이버 설치
• Driver 저장소에서 원하는 브라우저 드라이버를 다운받
아 원하는 폴더에 저장
테스트 코드 실행
• node ./bin/nightwatch.js --env chrome,chrome
-g single-page
Q n A