WebRTC 기술 및 API 활용

SK Telecom 최진호

1

2

WebRTC와 킬러서비스

Viblast

WebRTC 개발의 기본

TURN

STUN

Media

Signaling

HTTPS

Javascript App

Browser 1

Media

Streams

PeerConnec

tion

Javascript App

Browser 2

Media

Streams

PeerConnec

tion

navigator.getUserMedia()

video.src = localStream

RTCPeerConnection() for local,remote

addStream

create offer, answer

set Description for local and remote

onIceCandidate —> addIceCandidate

SIP, XMPP, WebSocket, DataChannel 등의 시그널링

WebRTC 서비스의 기본 flow SVC A App Browser B App Browser

로그인 로그인

방관리 방관리

Call B Media

PC

SDP offer

Alarm Media

PC

SDP Answer

Check Check

Media Media DTLS/ SCTP, SRTP

Realtime network transport

시그널링

Communication Logic

Presentation Logic

WebRTC 서비스의 일반 아키텍처

Client logic for Web or Native

API / Interface

Voice Video Network

Service Logic

Signaling (SIP, WS…)

STUN

TURN

MCU

API 인증

채널 lifecycle 관리 품질관리

모니터링

연계 과금 및 고객 관리

Business Logic

그러나! • 브라우저 지원 제약 - IE, Safari, Android Default Browser

… • Codec, 품질, Multiparty 연결 처리, 익숙치않은 개발 방식

과 개념…

제대로된 서비스를 만드려면 여전히 어려움

그러나?

PlayRTC !

• 클라이언트 라이브러리: 쉽고 빠른 개발 가능

• 시그널서버(WebSocket, SIP*)

• STUN, TURN 서버

• IMS 연계 지원(Web to Call 가능)

• Codec: VP8,OPUS, H.264*

• Browser: Chrome, Firefox, Internet Explorer(2014년 12월)

• Mobile OS: Android, iOS(2014년 11월초)

• 모니터링 및 분석 기능

• 풍부한 개발자 지원 가이드

PlayRTC의 주요 특징

PlayRTC.SDK

PlayRTC.ChannelServer

Presentation Logic

PlayRTC 아키텍처

Client logic for Web or Native

API / Interface

Voice Video Network

Service Logic

Signaling (SIP, WS…)

STUN

TURN

MCU

API 인증

채널 lifecycle 관리 품질관리

모니터링

연계 과금 및 고객 관리

Business Logic

PlayRTC.Broker

Svc

Server Browser/Android/i

OS

PlayRTC의 주요 개발 모델

Client Only

화면 로직, 간단한 통신로직 PlayRTC

Common

Broker

PlayRTC 채널서버 Browser/Android/i

OS

화면 로직, 간단한 통신로직

PlayRTC

Broker

PlayRTC 채널서버

Client and Service Logic

BaaS

Android/iOS

화면 로직, 간단한 통신로직 PlayRTC

채널서버

Client and BaaS

Svc

Server Browser/Android/i

OS

화면 로직, 간단한 통신로직 PlayRTC

채널서버

Client and Full Service Logic

<script src="http://www.playrtc.com/sdk/js/PlayRTC.js"></script> <form id="connectForm"> <input type="text" id=＂방번호" value=""> <input type="submit" name="submit" value="방 입장"> </form> <video id="localVideo"></video> <video id="remoteVideo"></video> <script type="text/javascript"> conn = new PlayRTC({ localVideoTarget: "localVideo", remoteVideoTarget: "remoteVideo"}); document.getElementById("connectForm").onsubmit = function(e){ conn.call(방번호); return false; }; </script>

PlayRTC.SDK ( javascript only model)

PlayRTC Roadmap

2014년 10월 20일 PlayRTC.com 오픈

2014년 10월 말 PlayRTC.broker 기능 오픈

2014년 11월 초 PlayRTC.android 오픈

2014년 11월 중 PlayRTC.iOS 오픈

facebook.com/playrtc twitter.com/playrtc

13

감사합니다.