introduction to webrtc on ios
TRANSCRIPT
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 OEUVREWebRTC 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-SampleLe 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
[email protected] [email protected]
24