SlideShare une entreprise Scribd logo
1  sur  24
Télécharger pour lire hors ligne
WEBRTC
COCOAHEADS PARIS
SEPTEMBRE 2016
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
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
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
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
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
WEBRTC
WEBRTC: EXEMPLES D’APPLICATION
7
WEBRTC
WEBRTC: EXEMPLES D’APPLICATION
8
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
WEBRTC
WEBRTC: MISE EN OEUVRE
10
WEBRTC
WEBRTC: MISE EN OEUVRE
11
WEBRTC
WEBRTC: MISE EN OEUVRE
12
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
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
WEBRTC
SKYLINK SDK POUR IOS: DEMO
▸ Comment développeriez vous une app de call vidéo ?
▸ skylink.io/ios
15
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
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];
}
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];
}
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];
}
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;
}
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];
}];
}
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];
}
}
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
WEBRTC
MERCI
webrtc.org
temasys.io
skylink.io
github.com/Temasys
romain.pellen@temasys.io 

romain.pellen@gmail.com
sales@temasys.com.sg
24

Contenu connexe

Tendances

Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...Cédric Leblond
 
Présentation docker et kubernetes
Présentation docker et kubernetesPrésentation docker et kubernetes
Présentation docker et kubernetesKiwi Backup
 
Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]
Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]
Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]Silicon Comté
 
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?ALTER WAY
 
Docker le buzz est il justifié ?
Docker le buzz est il justifié ? Docker le buzz est il justifié ?
Docker le buzz est il justifié ? Romain Chalumeau
 
Présentation de Carthage par Simone Civetta
Présentation de Carthage par Simone CivettaPrésentation de Carthage par Simone Civetta
Présentation de Carthage par Simone CivettaCocoaHeads France
 
NightClazz Docker Découverte
NightClazz Docker Découverte NightClazz Docker Découverte
NightClazz Docker Découverte Zenika
 
Docker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à DockerDocker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à DockerThibaut Marmin
 
What's Next Replay - IC / Jenkins
What's Next Replay - IC / JenkinsWhat's Next Replay - IC / Jenkins
What's Next Replay - IC / JenkinsZenikaOuest
 
Midi technique - présentation docker
Midi technique - présentation dockerMidi technique - présentation docker
Midi technique - présentation dockerOlivier Eeckhoutte
 
Oxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassinOxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassinLudovic Piot
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+ekino
 
SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...
SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...
SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...Damien Duportal
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de JhipsterKokou Gaglo
 
Gérer son environnement de développement avec Docker
Gérer son environnement de développement avec DockerGérer son environnement de développement avec Docker
Gérer son environnement de développement avec DockerJulien Dubois
 

Tendances (20)

Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
 
Présentation docker et kubernetes
Présentation docker et kubernetesPrésentation docker et kubernetes
Présentation docker et kubernetes
 
Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]
Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]
Docker ! De la découverte à la mise en production / Digital apéro [19/03/2015]
 
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
 
Docker le buzz est il justifié ?
Docker le buzz est il justifié ? Docker le buzz est il justifié ?
Docker le buzz est il justifié ?
 
Présentation de Carthage par Simone Civetta
Présentation de Carthage par Simone CivettaPrésentation de Carthage par Simone Civetta
Présentation de Carthage par Simone Civetta
 
Intro docker
Intro dockerIntro docker
Intro docker
 
Docker - YaJUG
Docker  - YaJUGDocker  - YaJUG
Docker - YaJUG
 
NightClazz Docker Découverte
NightClazz Docker Découverte NightClazz Docker Découverte
NightClazz Docker Découverte
 
Docker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à DockerDocker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à Docker
 
What's Next Replay - IC / Jenkins
What's Next Replay - IC / JenkinsWhat's Next Replay - IC / Jenkins
What's Next Replay - IC / Jenkins
 
Midi technique - présentation docker
Midi technique - présentation dockerMidi technique - présentation docker
Midi technique - présentation docker
 
Oxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassinOxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassin
 
La révolution Docker
La révolution DockerLa révolution Docker
La révolution Docker
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
 
SDN OpenDaylight
SDN OpenDaylightSDN OpenDaylight
SDN OpenDaylight
 
SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...
SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...
SnowCamp IO Grenoble 2017 - Bâtissons ensemble un pipeline avec Jenkins et Do...
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de Jhipster
 
Ansible et Jenkins
Ansible et JenkinsAnsible et Jenkins
Ansible et Jenkins
 
Gérer son environnement de développement avec Docker
Gérer son environnement de développement avec DockerGérer son environnement de développement avec Docker
Gérer son environnement de développement avec Docker
 

En vedette

En vedette (20)

Firebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiFirebase par nicolas lehovetzki
Firebase par nicolas lehovetzki
 
Alamofire
AlamofireAlamofire
Alamofire
 
Chainable datasource
Chainable datasourceChainable datasource
Chainable datasource
 
MVC-RS par Grégoire Lhotelier
MVC-RS par Grégoire LhotelierMVC-RS par Grégoire Lhotelier
MVC-RS par Grégoire Lhotelier
 
What's new in iOS9
What's new in iOS9What's new in iOS9
What's new in iOS9
 
Rebranding an ios application
Rebranding an ios applicationRebranding an ios application
Rebranding an ios application
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
 
Design like a developer
Design like a developerDesign like a developer
Design like a developer
 
Programme MFI retour d'expérience
Programme MFI retour d'expérienceProgramme MFI retour d'expérience
Programme MFI retour d'expérience
 
How to communicate with Smart things?
How to communicate with Smart things?How to communicate with Smart things?
How to communicate with Smart things?
 
SwiftyGPIO
SwiftyGPIOSwiftyGPIO
SwiftyGPIO
 
Handle the error
Handle the errorHandle the error
Handle the error
 
CONTINUOUS DELIVERY WITH FASTLANE
CONTINUOUS DELIVERY WITH FASTLANECONTINUOUS DELIVERY WITH FASTLANE
CONTINUOUS DELIVERY WITH FASTLANE
 
Découvrir dtrace en ligne de commande.
Découvrir dtrace en ligne de commande.Découvrir dtrace en ligne de commande.
Découvrir dtrace en ligne de commande.
 
Safari app extensions cleared up by Sanaa Squalli
Safari app extensions cleared up by Sanaa SqualliSafari app extensions cleared up by Sanaa Squalli
Safari app extensions cleared up by Sanaa Squalli
 
Quoi de neuf dans iOS 10.3
Quoi de neuf dans iOS 10.3Quoi de neuf dans iOS 10.3
Quoi de neuf dans iOS 10.3
 
Monads in Swift
Monads in SwiftMonads in Swift
Monads in Swift
 
Un retour d'expérience sur Apple Pay
Un retour d'expérience sur Apple PayUn retour d'expérience sur Apple Pay
Un retour d'expérience sur Apple Pay
 
Tout savoir pour devenir Freelance
Tout savoir pour devenir FreelanceTout savoir pour devenir Freelance
Tout savoir pour devenir Freelance
 
Super combinators
Super combinatorsSuper combinators
Super combinators
 

Similaire à Introduction to WebRTC on iOS

Web rtc présentation-Devfest Yde 2013
Web rtc présentation-Devfest Yde 2013Web rtc présentation-Devfest Yde 2013
Web rtc présentation-Devfest Yde 2013gdgyaounde
 
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYENWeb rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYENmalik3rdH
 
Introduction à DotNetNuke
Introduction à DotNetNukeIntroduction à DotNetNuke
Introduction à DotNetNukeMicrosoft
 
DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012Cyril P
 
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et MonacoCycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et MonacoMicrosoft
 
System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco
System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco
System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco Microsoft Technet France
 
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Microsoft Technet France
 
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Microsoft Décideurs IT
 
Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...
Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...
Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...Microsoft Technet France
 
Web real time communication @UXRepublic
Web real time communication @UXRepublicWeb real time communication @UXRepublic
Web real time communication @UXRepublicUX REPUBLIC
 
[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5Thomas Bassetto
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...Microsoft Technet France
 
La diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud AzureLa diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud AzureMicrosoft
 
LabVIEW™ internet and network applications
LabVIEW™ internet and network applicationsLabVIEW™ internet and network applications
LabVIEW™ internet and network applicationsAlexandre STANURSKI
 
TelCar : Solution de lecture des informations de bord de véhicule
TelCar : Solution de lecture des informations de bord de véhiculeTelCar : Solution de lecture des informations de bord de véhicule
TelCar : Solution de lecture des informations de bord de véhiculeGhassen Chaieb
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assemblyJérémy Buget
 
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...Microsoft Technet France
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphipprem
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesTristan Nitot
 

Similaire à Introduction to WebRTC on iOS (20)

Web rtc présentation-Devfest Yde 2013
Web rtc présentation-Devfest Yde 2013Web rtc présentation-Devfest Yde 2013
Web rtc présentation-Devfest Yde 2013
 
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYENWeb rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
 
Introduction à DotNetNuke
Introduction à DotNetNukeIntroduction à DotNetNuke
Introduction à DotNetNuke
 
DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012
 
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et MonacoCycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
 
System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco
System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco
System Center 2012 : Montez votre Cloud Privé avec NetApp et Cisco
 
Mon CV Detaillé
Mon CV Detaillé Mon CV Detaillé
Mon CV Detaillé
 
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
 
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
 
Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...
Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...
Architecture Réseau des clouds privés avec Hyper-V et System Center Virtual M...
 
Web real time communication @UXRepublic
Web real time communication @UXRepublicWeb real time communication @UXRepublic
Web real time communication @UXRepublic
 
[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5[FR] Capture vidéo avec HTML5
[FR] Capture vidéo avec HTML5
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
 
La diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud AzureLa diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud Azure
 
LabVIEW™ internet and network applications
LabVIEW™ internet and network applicationsLabVIEW™ internet and network applications
LabVIEW™ internet and network applications
 
TelCar : Solution de lecture des informations de bord de véhicule
TelCar : Solution de lecture des informations de bord de véhiculeTelCar : Solution de lecture des informations de bord de véhicule
TelCar : Solution de lecture des informations de bord de véhicule
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 

Plus de CocoaHeads France

Mutation testing for a safer Future
Mutation testing for a safer FutureMutation testing for a safer Future
Mutation testing for a safer FutureCocoaHeads France
 
Visual accessibility in iOS11
Visual accessibility in iOS11Visual accessibility in iOS11
Visual accessibility in iOS11CocoaHeads France
 
My script - One year of CocoaHeads
My script - One year of CocoaHeadsMy script - One year of CocoaHeads
My script - One year of CocoaHeadsCocoaHeads France
 
Ui testing dealing with push notifications
Ui testing dealing with push notificationsUi testing dealing with push notifications
Ui testing dealing with push notificationsCocoaHeads France
 
Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPodsCocoaHeads France
 
Comment faire de HLS votre solution vidéo préférée ?
Comment faire de HLS votre solution vidéo préférée ?Comment faire de HLS votre solution vidéo préférée ?
Comment faire de HLS votre solution vidéo préférée ?CocoaHeads France
 

Plus de CocoaHeads France (14)

Mutation testing for a safer Future
Mutation testing for a safer FutureMutation testing for a safer Future
Mutation testing for a safer Future
 
iOS App Group for Debugging
iOS App Group for DebuggingiOS App Group for Debugging
iOS App Group for Debugging
 
Asynchronous swift
Asynchronous swiftAsynchronous swift
Asynchronous swift
 
Visual accessibility in iOS11
Visual accessibility in iOS11Visual accessibility in iOS11
Visual accessibility in iOS11
 
My script - One year of CocoaHeads
My script - One year of CocoaHeadsMy script - One year of CocoaHeads
My script - One year of CocoaHeads
 
Ui testing dealing with push notifications
Ui testing dealing with push notificationsUi testing dealing with push notifications
Ui testing dealing with push notifications
 
IoT Best practices
 IoT Best practices IoT Best practices
IoT Best practices
 
Présentation de HomeKit
Présentation de HomeKitPrésentation de HomeKit
Présentation de HomeKit
 
Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPods
 
Let's migrate to Swift 3.0
Let's migrate to Swift 3.0Let's migrate to Swift 3.0
Let's migrate to Swift 3.0
 
Project Entourage
Project EntourageProject Entourage
Project Entourage
 
BitTorrent on iOS
BitTorrent on iOSBitTorrent on iOS
BitTorrent on iOS
 
CloudKit as a backend
CloudKit as a backendCloudKit as a backend
CloudKit as a backend
 
Comment faire de HLS votre solution vidéo préférée ?
Comment faire de HLS votre solution vidéo préférée ?Comment faire de HLS votre solution vidéo préférée ?
Comment faire de HLS votre solution vidéo préférée ?
 

Introduction to WebRTC on iOS

  • 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
  • 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
  • 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