What is the web RTC and how to easily integrate it on iOS by Romain Pellen.

1. WEBRTC
COCOAHEADS PARIS
SEPTEMBRE 2016

2. WEBRTC
QU’EST-CE QUE WEBRTC ? - WEBRTC.ORG
▸ WebRTC est une technologie qui permet à des clients
(navigateurs internet, mobiles, IoT) de se partager en P2P
et en temps réel des medias (tels que de l’audio, de la
video) ou du transfert de données.
▸ Une technologie jeune (2011): Mozilla, Google et d’autres
organisations discutent encore de la finalisation des
règles, API et protocoles de webRTC.
▸ Chrome, Firefox et Opera supportent nativement WebRTC.
Apple travaille actuellement à intégrer WebRTC à Safari.
2

3. WEBRTC
QUE CONTIENT LA TECHNOLOGIE WEBRTC ?
WebRTC est un package qui rassemble notamment:
▸ Codecs audio et video
▸ Technologies de traitement du signal (echo cancellation,
reduction du bruit, accès hardware)
▸ Gestion de la communication réseau (établissement de la
connection P2P, protocoles de communication, etc…)
▸ etc…
3

4. WEBRTC
QUE CONTIENT LA TECHNOLOGIE WEBRTC ?
4
• Standard Web API
• Session Management using SDP (offer/answer)
• Royaly Free Codecs
• G7.11
• Opus
• VP8/VP9
• NAT Traversal Strategies - STUN/TURN/ICE
• RTP/RTCP
• Encrypted Media - DTLS SRTP @ AES 128 bit encryption
• RTCP-MUX/Bundle and RTCP-FB protocols
• Forward Error Correction for media
• SCTP for Data transmissions
• Jitter buffers
• Packet loss concealment
• Web Camera and Microphone sub system
• Video and voice engine for rendering and playing video/audio
• Audio Echo Cancellers
• Auto Gain Control and Noise reduction
• Network Congestion Control

5. WEBRTC
WEBRTC: QUELLES APPLICATIONS ?
▸ WebRTC est adapté pour développer des fonctionnalités
telles que:
• Call audio et/ou vidéo
• Conférence online
• Partage d’écran
• Présentations live
• Transfert de fichier direct (de client à client)
• Plus généralement, communication en temps réel entre
appareils (ordinateurs, smartphones, tablettes, objets
connectés) sans serveur centralisé
5

6. WEBRTC
WEBRTC: QUELLES APPLICATIONS ?
▸ WebRTC n’est pas forcément adapté pour développer des
fonctionnalités telles que:
• Streaming de musique ou de vidéos: WebRTC priorise la
vitesse de communication plutôt que la qualité
• Messagerie: les applications de chat nécessitent souvent
de délivrer les messages aux destinataires offline
• Jeu multi joueurs: le besoin de coordination des
communications ou les différentes conditions réseau des
joueurs font d’un système de distribution centralisé des
données un meilleur choix
6

7. WEBRTC
WEBRTC: EXEMPLES D’APPLICATION
7

8. WEBRTC
WEBRTC: EXEMPLES D’APPLICATION
8

9. WEBRTC
WEBRTC: MISE EN OEUVRE
WebRTC permet des communications en peer to peer
mais… WebRTC a quand meme besoin de serveurs pour:
▸ Que les clients s’échangent les informations nécessaires
pour coordonner la communication. On parle de signaling.
▸ Gérer les adresses réseau et firewall à l’aide de serveurs
TURN (pour relayer le trafic en cas d’erreur) et STUN (pour
obtenir les adresses externes).
9

10. WEBRTC
WEBRTC: MISE EN OEUVRE
10

11. WEBRTC
WEBRTC: MISE EN OEUVRE
11

12. WEBRTC
WEBRTC: MISE EN OEUVRE
12

13. WEBRTC
WEBRTC: MISE EN OEUVRE
WebRTC permet donc la communication entre plusieurs clients. Mais cela ne
représente que 50% du travail, pour construire une application, il faut:
▸ Développer, déployer et maintenir un serveur de signaling
▸ Designer et développer un protocole de signaling
▸ Gérer les incompatibilités de certains navigateurs
▸ Gérer certains éléments réseau
▸ Porter WebRTC sur mobile
▸ Développer des fonctionnalisés additionnelles. Etc…
➡ Il y a donc 2 options: construire from scratch et maintenir sa propre solution, ou
utiliser une PaaS, typiquement une SDK communiquant avec ses propres
serveurs.
13

14. WEBRTC
TEMASYS - TEMASYS.IO / SKYLINK.IO
▸ Plugin pour IE et Safari
▸ Skylink SDK pour Web, iOS, Andoid et C++ (IoT)
Simplifie le travail du dévelopeur et comprend
notamment:
• Signaling
• TURN
• Skylink Media Relay
• Recording (à venir)
14

15. WEBRTC
SKYLINK SDK POUR IOS: DEMO
▸ Comment développeriez vous une app de call vidéo ?
▸ skylink.io/ios
15

16. WEBRTC
SKYLINK SDK POUR IOS: DEMO
16
@interface VideoCallViewController ()
// IBOutlets
@property (weak, nonatomic) IBOutlet UIView *localVideoContainerView;
@property (weak, nonatomic) IBOutlet UIView *remotePeerVideoContainerView;
// Skylink properties
@property (strong, nonatomic) SKYLINKConnection *skylinkConnection;
@property (strong, nonatomic) NSString *remotePeerId;
// Other
@property (strong, nonatomic) UIView *peerVideoView;
@property (assign, nonatomic) CGSize peerVideoSize;
@end

17. WEBRTC
SKYLINK SDK POUR IOS: DEMO
17
-(void) viewDidLoad
{
[super viewDidLoad];
// Creating configuration
SKYLINKConnectionConfig *config = [SKYLINKConnectionConfig new];
config.video = YES;
config.audio = YES;
// Creating SKYLINKConnection
self.skylinkConnection = [[SKYLINKConnection alloc] initWithConfig:config appKey:@"MyAppKey"];
self.skylinkConnection.lifeCycleDelegate = self;
self.skylinkConnection.mediaDelegate = self;
self.skylinkConnection.remotePeerDelegate = self;
#ifdef DEBUG
[SKYLINKConnection setVerbose:TRUE];
#endif
// Connecting to a room
[self.skylinkConnection connectToRoomWithSecret:@"MySecret" roomName:@"MyRoomName" userInfo:nil];
}

18. WEBRTC
SKYLINK SDK POUR IOS: DEMO
18
#pragma mark - SKYLINKConnectionLifeCycleDelegate
- (void)connection:(SKYLINKConnection*)connection didConnectWithMessage:(NSString*)errorMessage success:
(BOOL)isSuccess
{
if (!isSuccess) [[[UIAlertView alloc] initWithTitle:@"Connection failed" message:errorMessage delegate:self
cancelButtonTitle:@"OK" otherButtonTitles:nil] show];
}
- (void)connection:(SKYLINKConnection*)connection didDisconnectWithMessage:(NSString*)errorMessage
{
[[[UIAlertView alloc] initWithTitle:@"Disconnected" message:errorMessage delegate:nil cancelButtonTitle:@"OK"
otherButtonTitles:nil] show];
}
- (void)connection:(SKYLINKConnection*)connection didRenderUserVideo:(UIView*)userVideoView
{
[self addRenderedVideo:userVideoView insideContainer:self.localVideoContainerView];
}
#pragma mark - Utils
-(void)addRenderedVideo:(UIView *)videoView insideContainer:(UIView *)containerView
{
videoView.frame = containerView.bounds;
for (UIView *subview in containerView.subviews) {
[subview removeFromSuperview];
}
[containerView insertSubview:videoView atIndex:0];
}

19. WEBRTC
SKYLINK SDK POUR IOS: DEMO
19
#pragma mark - SKYLINKConnectionRemotePeerDelegate
- (void)connection:(SKYLINKConnection*)connection didJoinPeer:(id)userInfo mediaProperties:
(SKYLINKPeerMediaProperties*)pmProperties peerId:(NSString*)peerId
{
self.remotePeerId = peerId;
}
- (void)connection:(SKYLINKConnection*)connection didLeavePeerWithMessage:(NSString*)errorMessage peerId:
(NSString*)peerId
{
self.remotePeerId = nil;
}
- (void)connection:(SKYLINKConnection*)connection didRenderPeerVideo:(UIView*)peerVideoView peerId:(NSString*)peerId
{
[self addRenderedVideo:peerVideoView insideContainer:self.remotePeerVideoContainerView mirror:NO];
}

20. WEBRTC
SKYLINK SDK POUR IOS: DEMO
20
#pragma mark - SKYLINKConnectionMediaDelegate
- (void)connection:(SKYLINKConnection*)connection didChangeVideoSize:(CGSize)videoSize videoView:(UIView*)videoView
{
if (videoSize.height > 0 && videoSize.width > 0) {
UIView *correspondingContainerView;
if ([videoView isDescendantOfView:self.localVideoContainerView]) {
correspondingContainerView = self.localVideoContainerView;
}
else {
correspondingContainerView = self.remotePeerVideoContainerView;
self.peerVideoView = videoView;
self.peerVideoSize = videoSize;
}
videoView.frame = [self aspectFillRectForSize:videoSize containedInRect:correspondingContainerView.frame];
// for aspect fit, use AVMakeRectWithAspectRatioInsideRect(videoSize, correspondingContainerView.bounds);
}
}
#pragma mark - Utils
-(CGRect)aspectFillRectForSize:(CGSize)insideSize containedInRect:(CGRect)containerRect
{
CGFloat maxFloat = MAX(containerRect.size.height, containerRect.size.width);
CGFloat aspectRatio = insideSize.width / insideSize.height;
CGRect frame = CGRectMake(0, 0, containerRect.size.width, containerRect.size.height);
if (insideSize.width < insideSize.height) {
frame.size.width = maxFloat;
frame.size.height = frame.size.width / aspectRatio;
} else {
frame.size.height = maxFloat;
frame.size.width = frame.size.height * aspectRatio;
}
frame.origin.x = (containerRect.size.width - frame.size.width) / 2;
frame.origin.y = (containerRect.size.height - frame.size.height) / 2;
return frame;
}

21. WEBRTC
SKYLINK SDK POUR IOS: DEMO
21
#pragma mark - IBActions
- (IBAction)toogleVideoTap:(UIButton *)sender
{
[self.skylinkConnection muteVideo:!self.skylinkConnection.isVideoMuted];
[sender setImage:[UIImage imageNamed:( (self.skylinkConnection.isVideoMuted) ? @"VideoOff.png" : @"VideoOn.png")]
forState:UIControlStateNormal];
self.localVideoContainerView.hidden = (self.skylinkConnection.isVideoMuted);
}
- (IBAction)toogleAudioTap:(UIButton *)sender
{
[self.skylinkConnection muteAudio:!self.skylinkConnection.isAudioMuted];
[sender setImage:[UIImage imageNamed:( (self.skylinkConnection.isAudioMuted) ? @"MicOff.png" : @"MicOn.png")]
forState:UIControlStateNormal];
}
- (IBAction)switchCameraTap:(UIButton *)sender
{
[self.skylinkConnection switchCamera];
}
- (IBAction)refreshTap:(UIButton *)sender
{
if (self.remotePeerId) [self.skylinkConnection refreshConnection:self.remotePeerId];
}
- (IBAction)disconnectTap:(UIButton *)sender
[self.activityIndicator startAnimating];
if (self.skylinkConnection) [self.skylinkConnection disconnect:^{
[self.activityIndicator stopAnimating];
[self.navigationController popViewControllerAnimated:YES];
}];
}

22. WEBRTC
SKYLINK SDK POUR IOS: DEMO
22
- (void)viewWillLayoutSubviews
{
[super viewWillLayoutSubviews];
if (self.peerVideoView) {
self.peerVideoView.frame = [self aspectFillRectForSize:self.peerVideoSize
containedInRect:self.remotePeerVideoContainerView.frame];
}
}

23. WEBRTC
SKYLINK SDK POUR IOS: SAMPLE APP
github.com/Temasys/SkylinkSDK-iOS-Sample
Le repo sert d’exemple pour réaliser les fonctionnalités suivantes
sur iOS avec Skylink:
▸ Video call
▸ Audio call
▸ Chat en temps réel
▸ Transfert de fichier direct (photos, videos, musiques)
▸ Transfert de données
23

24. WEBRTC
MERCI
webrtc.org
temasys.io
skylink.io
github.com/Temasys
romain.pellen@temasys.io
romain.pellen@gmail.com
sales@temasys.com.sg
24