SlideShare a Scribd company logo

Going Mobile with React Native and WebRTC

•
•
Saúl Ibarra Corretgé
Saúl Ibarra Corretgé

Talk given at OpenSIPs summit 2019. Video: https://www.youtube.com/watch?v=VwfCkLEZ5U4&list=PLMMZA6ketvKpnVs9a1ViR06JkZPEYzE8N&index=11&t=0s

Related slideshows

Cisco Trustsec & Security Group Tagging
Cisco Trustsec & Security Group TaggingCisco Trustsec & Security Group Tagging
Cisco Trustsec & Security Group Tagging
 
GitLab.pptx
GitLab.pptxGitLab.pptx
GitLab.pptx
 
Introducing GitLab (September 2018)
Introducing GitLab (September 2018)Introducing GitLab (September 2018)
Introducing GitLab (September 2018)
 
1 of 30
Download to read offline
Going Mobile with React Native and WebRTC
GoingMobile withReactNativeandWebRTC SAÚL IBARRA CORRETGÉ | @SAGHUL | @JITSINEWS
Set of Open Source projects Easily deploy scalable and secure video conferencing infrastructure. APIs and mobile SDKs Effortlessly integrate Jitsi into existing products to add video conferencing capabilities. Community Open Source enthusiasts from all around the world contribute to Jitsi.
Going Mobile with React Native and WebRTC
Going Mobile with React Native and WebRTC
HD audio / video conferencing Screen sharing Calendar integration Record meetings Dial in / out Authentication Mobile apps Detailed individual audio controls Raise your hand Join anonymouslyModeration controls Live streaming Speaker stats "Follow me" mode Cascaded routing Room passwords Stage vs Tile layouts Mobile SDKs Shared document editing Call quality management Chat Push to talk Language selection Stats
Going mobile
ARCHITECTURE … Jitsi Meet Main UI, uses lib-jitsi-meet for the heavy lifting. strophe.jsWebRTC lib-jitsi-meet Signaling, stream management, simulcast, analytics, … ~40k LoC ~30k LoC
Experiments with native on mobile ~20K LoC gave us 10% of the features. ☠ What if we could share all the logic in lib-jitsi-meet (and potentially some of the UI logic)? 🤔 We also wanted to migrate away from jQuery and React looked like a solid plan. 🤓 React Native emerged to bridge the gap between React and mobile. 📱
It’s not a web view Full access to native APIs, and you get native views and the performance of native code. Thriving ecosystem Tons of modules to expose native APIs to JavaScript. It’s just React and JavaScript Logic can be easily shared between web and mobile apps. Web developers can do mobile too! React Native
How does React Native work?
React Native bridge JavaScript thread
 (JSC — JavaScriptCore) Native thread
Going Mobile with React Native and WebRTC
WebRTC on React Native
WebRTC APIs Use WebRTC APIs like you would in a browser. ** Battle-tested We’ve been running it on Jitsi Meet for years. Others have too! Up to date Currently on M69. Generally very close to upstream stable. react-native-webrtc
React Native: all that glitter is not gold You’ll need to write native code The cake was a lie. Codecs Some devices don’t support H.264, some have HW accelerated VP8, … Audio routing You’ll need to implement it yourself.
 See react-native-incall-manager. Timers Timers don’t run in the background! Use react-native-background-timer. CallKit / ConnectionService They greatly simplify call management. See react-native-callkeep. Cross platform shenanigans Android can only have 3 OpenGL layers, iOS doesn’t have PiP, …
github.com/react-native-webrtc react-native-webrtc.discourse.group
Jitsi Meet SDK
JitsiMeetView RTCRootView
Available for Android and iOS Easy to integrate into existing native applications. Example: 8x8 Virtual Office, Riot.IM, Los Reyes Magos TV, … Everything taken care of Audio routing, CallKit, recording, … completely React Native agnostic. Version 2 released! Revamped native API. Better. Faster. Stronger.
- (void)viewDidLoad { [super viewDidLoad]; JitsiMeetView *view = (JitsiMeetView *) self.view; view.delegate = self; JitsiMeetConferenceOptions *options = [JitsiMeetConferenceOptions fromBuilder:^(JitsiMeetConferenceOptionsBuilder *builder) { builder.room = @“test123”; builder.audioMuted = NO; builder.videoMuted = YES; }]; [view join:options]; }
- (void)conferenceJoined:(NSDictionary *)data { // You are now in the conference! } - (void)conferenceTerminated:(NSDictionary *)data { // The conference ended, dismiss this controller! }
public void onButtonClick(View v) { JitsiMeetConferenceOptions options = new JitsiMeetConferenceOptions.Builder() .setRoom(“test123”) .setAudioMuted(false) .setVideoMuted(true) .build(); JitsiMeetActivity.launch(this, options); }
github.com/jitsi/jitsi-meet-sdk-samples
HOW DID IT GO? … Jitsi Meet Main UI, uses lib-jitsi-meet for the heavy lifting. strophe.jsWebRTC lib-jitsi-meet Signaling, stream management, simulcast, analytics, … ~40k LoC ~30k LoC 100% code share 85% code share
<Toolbox />
Going Mobile with React Native and WebRTC
JitsiMeet
React Native
 is ready It’s a solid development platform which will accelerate your development. Jitsi Meet SDK is here to help Use Jitsi Meet SDK and save some time, we got this. Conclusions
jitsi.org SAÚL IBARRA CORRETGÉ | @SAGHUL | @JITSINEWS

More Related Content

Going Mobile with React Native and WebRTC

  • 3. Set of Open Source projects Easily deploy scalable and secure video conferencing infrastructure. APIs and mobile SDKs Effortlessly integrate Jitsi into existing products to add video conferencing capabilities. Community Open Source enthusiasts from all around the world contribute to Jitsi.
  • 6. HD audio / video conferencing Screen sharing Calendar integration Record meetings Dial in / out Authentication Mobile apps Detailed individual audio controls Raise your hand Join anonymouslyModeration controls Live streaming Speaker stats "Follow me" mode Cascaded routing Room passwords Stage vs Tile layouts Mobile SDKs Shared document editing Call quality management Chat Push to talk Language selection Stats
  • 8. ARCHITECTURE … Jitsi Meet Main UI, uses lib-jitsi-meet for the heavy lifting. strophe.jsWebRTC lib-jitsi-meet Signaling, stream management, simulcast, analytics, … ~40k LoC ~30k LoC
  • 9. Experiments with native on mobile ~20K LoC gave us 10% of the features. ☠ What if we could share all the logic in lib-jitsi-meet (and potentially some of the UI logic)? 🤔 We also wanted to migrate away from jQuery and React looked like a solid plan. 🤓 React Native emerged to bridge the gap between React and mobile. 📱
  • 10. It’s not a web view Full access to native APIs, and you get native views and the performance of native code. Thriving ecosystem Tons of modules to expose native APIs to JavaScript. It’s just React and JavaScript Logic can be easily shared between web and mobile apps. Web developers can do mobile too! React Native
  • 11. How does React Native work?
  • 12. React Native bridge JavaScript thread
 (JSC — JavaScriptCore) Native thread
  • 14. WebRTC on React Native
  • 15. WebRTC APIs Use WebRTC APIs like you would in a browser. ** Battle-tested We’ve been running it on Jitsi Meet for years. Others have too! Up to date Currently on M69. Generally very close to upstream stable. react-native-webrtc
  • 16. React Native: all that glitter is not gold You’ll need to write native code The cake was a lie. Codecs Some devices don’t support H.264, some have HW accelerated VP8, … Audio routing You’ll need to implement it yourself.
 See react-native-incall-manager. Timers Timers don’t run in the background! Use react-native-background-timer. CallKit / ConnectionService They greatly simplify call management. See react-native-callkeep. Cross platform shenanigans Android can only have 3 OpenGL layers, iOS doesn’t have PiP, …
  • 20. Available for Android and iOS Easy to integrate into existing native applications. Example: 8x8 Virtual Office, Riot.IM, Los Reyes Magos TV, … Everything taken care of Audio routing, CallKit, recording, … completely React Native agnostic. Version 2 released! Revamped native API. Better. Faster. Stronger.
  • 21. - (void)viewDidLoad { [super viewDidLoad]; JitsiMeetView *view = (JitsiMeetView *) self.view; view.delegate = self; JitsiMeetConferenceOptions *options = [JitsiMeetConferenceOptions fromBuilder:^(JitsiMeetConferenceOptionsBuilder *builder) { builder.room = @“test123”; builder.audioMuted = NO; builder.videoMuted = YES; }]; [view join:options]; }
  • 22. - (void)conferenceJoined:(NSDictionary *)data { // You are now in the conference! } - (void)conferenceTerminated:(NSDictionary *)data { // The conference ended, dismiss this controller! }
  • 23. public void onButtonClick(View v) { JitsiMeetConferenceOptions options = new JitsiMeetConferenceOptions.Builder() .setRoom(“test123”) .setAudioMuted(false) .setVideoMuted(true) .build(); JitsiMeetActivity.launch(this, options); }
  • 25. HOW DID IT GO? … Jitsi Meet Main UI, uses lib-jitsi-meet for the heavy lifting. strophe.jsWebRTC lib-jitsi-meet Signaling, stream management, simulcast, analytics, … ~40k LoC ~30k LoC 100% code share 85% code share
  • 29. React Native
 is ready It’s a solid development platform which will accelerate your development. Jitsi Meet SDK is here to help Use Jitsi Meet SDK and save some time, we got this. Conclusions
  • 30. jitsi.org SAÚL IBARRA CORRETGÉ | @SAGHUL | @JITSINEWS