WTF is WebRTC and how to use it in your project

Quick practical talk on WebRTC

Transcript

1. WHAT THE F..K IS WEBRTC? And how to use it in your projects
2. WHO AM I? Sergey Kirillov, software developer/enterpreneur Remote.st / Shopium.ua sergey.kirillov@gmail.com https://www.facebook.com/serg.kirillov
3. SO, WTF IS WEBRTC? You should open in Google Chrome now. http://bit.ly/webrtc-meetup I had not enough time to prepare demo. Sorry. But you can check out and/or https://apprtc.appspot.com/ https://remote.st
4. IN THE OLD TIMES You had no choice other than Flash
5. BUT RECENTLY EVERYTHING IS CHANGED
6. WHAT IS WEBRTC Web Real-time Communication W3C standard Mainly developed by Google Peer-to-peer audio/video/data connections between browsers Supported by Chrome 23+, Firefox 22+
7. BLEEDING EDGE TECHNOLOGY
8. SO, HOW IT WORKS?
9. SO, HOW IT WORKS? just few basic steps to get it running
10. SO, HOW IT WORKS? Initiator Responder create PeerConnection object create PeerConnection object v a r p c = n e w R T C P e e r C o n n e c t i o n ( { " i c e S e r v e r s " : [ { " u r l " : " s t u n : s t u n . e x a m p l e . o r g " } ] } ) ; p c . o n a d d s t r e a m = f u n c t i o n ( e v t ) { r e m o t e V i e w . s r c = U R L . c r e a t e O b j e c t U R L ( e v t . s t r e a m ) ; } ; / / g e t a l o c a l s t r e a m , s h o w i t i n a s e l f - v i e w a n d a d d i t t o b e s e n t n a v i g a t o r . g e t U s e r M e d i a ( { " a u d i o " : t r u e , " v i d e o " : t r u e } , f u n c t i o n ( s t r e a m ) { s e l f V i e w . s r c = U R L . c r e a t e O b j e c t U R L ( s t r e a m ) ; p c . a d d S t r e a m ( s t r e a m ) ; } , l o g E r r o r ) ;
11. SO, HOW IT WORKS? Initiator Responder create offer and send offer waiting for offer f u n c t i o n l o c a l D e s c C r e a t e d ( d e s c ) { p c . s e t L o c a l D e s c r i p t i o n ( d e s c , f u n c t i o n ( ) { s i g n a l i n g C h a n n e l . s e n d ( J S O N . s t r i n g i f y ( { " s d p " : p c . l o c a l D e s c r i p t i o n } ) ) ; } , l o g E r r o r ) ; } p c . c r e a t e O f f e r ( l o c a l D e s c C r e a t e d , l o g E r r o r ) ;
12. SO, HOW IT WORKS? Initiator Responder waiting for answer got offer, create answer s i g n a l i n g C h a n n e l . o n _ o f f e r = f u n c t i o n ( s d p ) { p c . s e t R e m o t e D e s c r i p t i o n ( n e w R T C S e s s i o n D e s c r i p t i o n ( m e s s a g e . s d p ) , f u n c t i o n ( ) { / / i f w e r e c e i v e d a n o f f e r , w e n e e d t o a n s w e r i f ( p c . r e m o t e D e s c r i p t i o n . t y p e = = " o f f e r " ) p c . c r e a t e A n s w e r ( l o c a l D e s c C r e a t e d , l o g E r r o r ) ; } , l o g E r r o r ) ; }
13. SO, HOW IT WORKS? Initiator Responder got answer s i g n a l i n g C h a n n e l . o n _ a n s w e r = f u n c t i o n ( s d p ) { p c . s e t R e m o t e D e s c r i p t i o n ( n e w R T C S e s s i o n D e s c r i p t i o n ( m e s s a g e . s d p ) , f u n c t i o n ( ) { } , l o g E r r o r ) ; }
14. SO, HOW IT WORKS? Initiator Responder exchange ICE candidates exchange ICE candidates p c . o n i c e c a n d i d a t e = f u n c t i o n ( e v t ) { i f ( e v t . c a n d i d a t e ) s i g n a l i n g C h a n n e l . s e n d ( J S O N . s t r i n g i f y ( { " c a n d i d a t e " : e v t . c a n d i d a t e } ) ) ; } ; s i g n a l i n g C h a n n e l . o n _ i c e = f u n c t i o n ( m e s s a g e ) { p c . a d d I c e C a n d i d a t e ( n e w R T C I c e C a n d i d a t e ( m e s s a g e . c a n d i d a t e ) ) ; }
15. SO, HOW IT WORKS? Then look of iceConnectionState changes. When iceConnectionState is 'connected' you have a working peer-to- peer session. p c . o n i c e c o n n e c t i o n s t a t e c h a n g e = f u n c t i o n ( ) { i f ( p c . i c e C o n n e c t i o n S t a t e = = = ' c o n n e c t e d ' ) { / / d o s o m e t h i n g } } That's it.
16. THERE ARE HIGHER LEVEL ABSTRACTIONS http://simplewebrtc.com/ https://github.com/webRTC/webRTC.io
17. ALTHOUGH IT IS BLEEDING EDGE you can start using it RIGHT NOW and build new, interesting, innovative real-time apps
18. PS: yes, we are hiring sergey.kirillov@gmail.com https://www.facebook.com/serg.kirillov
19. RECOMMENDED READINGS (all discussions happen here) WebRTC Specification discuss-webrtc group apprtc.appspot.com sourcecode