Upload
jeonghwan-jang
View
6.025
Download
1
Embed Size (px)
DESCRIPTION
JSLounge 네 번째 세미나의 Getting Started with WebRTC 발표 자료입니다. WebRTC에 대해 간략히 알 수 있습니다. 이 자료는 http://www.html5rocks.com/en/tutorials/webrtc/basics/ 페이지를 기초로 만들었습니다.
Citation preview
Getting����������� ������������������ Started����������� ������������������ with����������� ������������������ WebRTC
장정환
들어가며
•Getting����������� ������������������ Started����������� ������������������ with����������� ������������������ WebRTC
•http://www.html5rocks.com/en/tutorials/webrtc/basics/
RTC
•Real-Time����������� ������������������ Communication
•실시간����������� ������������������ 통신
•복잡하고����������� ������������������ 직접����������� ������������������ 개발하기에는����������� ������������������ 비쌈
•라이센스,����������� ������������������ 개발비����������� ������������������ 등
•앱을����������� ������������������ 설치하거나����������� ������������������ 플러그인����������� ������������������ 설치가����������� ������������������ 필요
•Google����������� ������������������ Hangouts,����������� ������������������ Skype����������� ������������������ ...
WebRTC
•Web����������� ������������������ +����������� ������������������ RTC
•브라우저를����������� ������������������ 통해����������� ������������������ 실시간����������� ������������������ 통신을����������� ������������������ 하는����������� ������������������ 것
•비디오,����������� ������������������ 오디오����������� ������������������ 외에도����������� ������������������ 다양한����������� ������������������ 데이터를����������� ������������������ 교환
•플러그인����������� ������������������ 불필요
WebRTC����������� ������������������ 히스토리
•구글에서����������� ������������������ 관련����������� ������������������ 기술을����������� ������������������ 오픈소스화
•IETF와����������� ������������������ W3C에서����������� ������������������ 표준화����������� ������������������ 작업
•현재����������� ������������������ Working����������� ������������������ Draft����������� ������������������ 상태
•Chrome과����������� ������������������ FireFox간의����������� ������������������ 통신����������� ������������������ 성공����������� ������������������ (2013/02)
•http://youtu.be/MsAWR_rJ5n8
WebRTC����������� ������������������ 표준����������� ������������������ 현황
•Editor’s����������� ������������������ Draft����������� ������������������ /����������� ������������������ Working����������� ������������������ Draft����������� ������������������ (WD)
•Candidate����������� ������������������ Recommendation����������� ������������������ (CR)
•Proposed����������� ������������������ Recommendation����������� ������������������ (PR)
•W3C����������� ������������������ Recommendation����������� ������������������ (REC)
전체����������� ������������������ 구조
https://sites.google.com/site/webrtc/reference/architecture
WebRTC����������� ������������������ 관련����������� ������������������ API
•MediaStream����������� ������������������ (getUserMedia)
•RTCPeerConnection
•RTCDataChannel
API와����������� ������������������ 전체����������� ������������������ 흐름
MediaStream MediaStream
RTCPeerConnection/ RTCDataChannel
??blah
blahblahblah
MediaStream
•getUserMedia()
•미디어의����������� ������������������ 동기화된����������� ������������������ 스트림을����������� ������������������ 제공
•카메라����������� ������������������ 화면����������� ������������������ +����������� ������������������ 마이크����������� ������������������ 소리
•오디오는����������� ������������������ chrome://flags에서����������� ������������������ 설정����������� ������������������ 후����������� ������������������ 사용����������� ������������������ 가능
•항상����������� ������������������ 사용자의����������� ������������������ 권한����������� ������������������ 확인을����������� ������������������ 요구함
<!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 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>
Signaling
•양쪽의����������� ������������������ 연결을����������� ������������������ 위해����������� ������������������ 필요한����������� ������������������ 모든����������� ������������������ 과정
•WebRTC에서����������� ������������������ 정의한����������� ������������������ 내용은����������� ������������������ 없음
•시그널을����������� ������������������ 주고����������� ������������������ 받는����������� ������������������ 방법이나����������� ������������������ 규칙은����������� ������������������ 개발자의����������� ������������������ 역할
•SIP,����������� ������������������ XMPP����������� ������������������ ...
•XHR,����������� ������������������ Channel����������� ������������������ API,����������� ������������������ Web����������� ������������������ Socket����������� ������������������ ...
•이����������� ������������������ 과정이����������� ������������������ 완료되어야����������� ������������������ 통신����������� ������������������ 가능
Signaling����������� ������������������ -����������� ������������������ 교환����������� ������������������ 정보
•Session����������� ������������������ Control����������� ������������������ Message
•통신����������� ������������������ 시작,����������� ������������������ 종료,����������� ������������������ 에러
•Network����������� ������������������ Configuration
•IP����������� ������������������ address,����������� ������������������ port����������� ������������������ #
•Media����������� ������������������ capabilities
•codecs,����������� ������������������ resolutions
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 })); };
// 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 })); } });}
(1)
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)
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 })); };
// 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 })); } });}
(2)
(1)
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));};
(3)
Signaling����������� ������������������ -����������� ������������������ 순서
Caller
ServerCallee
offer
candidate
offer
answer
candidate
answer
stream
JSEP
JavaScript Session Establishment Protocol(JSEP) architecture
RTCPeerConnection
•안정적이고����������� ������������������ 효과적인����������� ������������������ 통신을����������� ������������������ 담당
•복잡한����������� ������������������ 내용은����������� ������������������ 신경쓸����������� ������������������ 필요����������� ������������������ 없다
•브라우저����������� ������������������ 개발자의����������� ������������������ 몫
전체����������� ������������������ 구조
https://sites.google.com/site/webrtc/reference/architecture
한����������� ������������������ 페이지����������� ������������������ 내에서의RTCPeerConnection
MediaStream
RTCPeerConnection
서버를����������� ������������������ 통한����������� ������������������ RTCPeerConnection
•서버의����������� ������������������ 역할
•통신할����������� ������������������ 사용자를����������� ������������������ 찾는����������� ������������������ 일
•Signaling
•NAT/firewall����������� ������������������ traversal
•P2P가����������� ������������������ 실패할����������� ������������������ 경우����������� ������������������ 연결해주는����������� ������������������ 일
RTCDataChannel
•임의의����������� ������������������ 데이터����������� ������������������ 교환을����������� ������������������ 위한����������� ������������������ API
•low����������� ������������������ latency,����������� ������������������ high����������� ������������������ throughput
•Web����������� ������������������ Socket과����������� ������������������ 유사
Security
•RTC����������� ������������������ 프로그램의����������� ������������������ 일반적인����������� ������������������ 보안����������� ������������������ 문제
•암호화되지����������� ������������������ 않은����������� ������������������ 데이터를����������� ������������������ 중간에서����������� ������������������ 누군가가����������� ������������������ 가로챌����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 문제
•사용자가����������� ������������������ 인식하지����������� ������������������ 못한����������� ������������������ 채로����������� ������������������ 데이터가����������� ������������������ 녹화되고����������� ������������������ 배포될����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 문제
•악성����������� ������������������ 프로그램이����������� ������������������ 설치될����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 문제
Security
•WebRTC의����������� ������������������ 회피����������� ������������������ 노력
•보안����������� ������������������ 프로토콜의����������� ������������������ 사용
•암호화����������� ������������������ 필수
•별도의����������� ������������������ 설치가����������� ������������������ 필요����������� ������������������ 없으며����������� ������������������ 브라우저의����������� ������������������ 샌드박스에서����������� ������������������ 실행
•카메라와����������� ������������������ 마이크의����������� ������������������ 명시적인����������� ������������������ 사용����������� ������������������ 허락과����������� ������������������ 사용����������� ������������������ 상태를����������� ������������������ UI에����������� ������������������ 표시
WebRTC����������� ������������������ 일정
•첫����������� ������������������ 번째����������� ������������������ Working����������� ������������������ Draft:����������� ������������������ 2011-10-27
•현재����������� ������������������ Working����������� ������������������ Draft:����������� ������������������ 2012-08-21
•Last����������� ������������������ Call����������� ������������������ Working����������� ������������������ Draft:����������� ������������������
•Q1����������� ������������������ 2013����������� ������������������ >����������� ������������������ Q3����������� ������������������ 2013
•Candidate����������� ������������������ Recommendation:����������� ������������������
•Q4����������� ������������������ 2012����������� ������������������ >����������� ������������������ Q1����������� ������������������ 2014
getUserMedia����������� ������������������ 일정
•첫����������� ������������������ 번째����������� ������������������ Working����������� ������������������ Draft:����������� ������������������ 2011-10-27
•현재����������� ������������������ Working����������� ������������������ Draft:����������� ������������������ 2012-06-28
•Last����������� ������������������ Call����������� ������������������ Working����������� ������������������ Draft
•Q2����������� ������������������ 2013
'Potentially,����������� ������������������ WebRTC����������� ������������������ and����������� ������������������ HTML5����������� ������������������ could����������� ������������������ enable����������� ������������������ the����������� ������������������ same����������� ������������������ transformation����������� ������������������ for����������� ������������������ real-time����������� ������������������ communications����������� ������������������ that����������� ������������������ the����������� ������������������ original����������� ������������������ browser����������� ������������������ did����������� ������������������ for����������� ������������������ information.'
-����������� ������������������ Phil����������� ������������������ Edholm,����������� ������������������ the����������� ������������������ President����������� ������������������ and����������� ������������������ Founder����������� ������������������ of����������� ������������������ PKE����������� ������������������ Consulting
Questions?
감사합니다[email protected]
참고����������� ������������������ 자료
• Getting����������� ������������������ Started����������� ������������������ with����������� ������������������ WebRTC
• http://www.html5rocks.com/en/tutorials/webrtc/basics/
• Google����������� ������������������ I/O����������� ������������������ 2012����������� ������������������ -����������� ������������������ WebRTC:����������� ������������������ Real-time����������� ������������������ Audio/Video����������� ������������������ and����������� ������������������ P2P����������� ������������������ in����������� ������������������ HTML5
• https://www.youtube.com/watch?v=E8C8ouiXHHk
• WebRTC����������� ������������������ Working����������� ������������������ Draft����������� ������������������ 21
• http://www.w3.org/TR/2012/WD-webrtc-20120821/
• http://www.nojitter.com/post/232901042/webrtc-is-it-a-game-changer
• Source����������� ������������������ Code
• https://github.com/inomies/WebRTCDemo