Slides from the talk given at FOSDEM 2019 on how Jitsi Meet was brought from the web to mobile and how we built a native SDK using React Native. Video: https://fosdem.org/2019/schedule/event/jitsi_mobile_webrtc/

1. GoingMobile
withReactNativeandWebRTC
SAÚL IBARRA CORRETGÉ | @SAGHUL | @JITSINEWS

2. Set of Open Source
Easily deploy scalable and secure video
conferencing solutions.
APIs and mobile SDKs
Integrate Jitsi into existing products to add video
conferencing capabilities.
Community
Open Source enthusiasts from all around the world
contribute to Jitsi.

5. 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

6. Going mobile

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

8. 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 was 🔥 🔥 🔥
React Native was 🔥 🔥 🔥 🔥 🔥

9. It’s not a web view
Full access to native APIs, and you get 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

10. WebRTC on React Native

11. 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

12. Performance

13. 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.
Timers
Timers don’t run in the background!
Use react-native-background-timer.
CallKit /
ConnectionService
They greatly simplify call
management. See react-native-callkit.
Cross platform
shenanigans
Android can only have 3 OpenGL
layers, iOS doesn’t have PiP, …

15. Jitsi Meet SDK

16. JitsiMeetView
RTCRootView

17. Available for Android and iOS
Easy to integrate into existing native applications.
Example: Riot.IM.
Everything taken care of
Audio routing, CallKit, recording, … completely
React Native agnostic.
Version 2.0 coming up
Revamped native API in progress.

18. - (void)viewDidLoad {
[super viewDidLoad];
JitsiMeetView *view = (JitsiMeetView *) self.view;
view.delegate = self;
[view join:@{@"url" : @"https://meet.jit.si/test123"}];
}

19. - (void)conferenceJoined:(NSDictionary *)data {
// You are now in the conference!
}
- (void)conferenceLeft:(NSDictionary *)data {
// The conference ended, dismiss this controller!
}

20. @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set the Activity's content view.
setContentView(R.layout.main_layout);
// Load a meeting URL in the Jitsi Meet fragment
JitsiMeetFragment fragment = (JitsiMeetFragment)
getSupportFragmentManager()
.findFragmentById(R.id.jitsiFragment);
fragment.getJitsiView().join("https://meet.jit.si/test123");
}

21. 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

22. <Toolbox />

23. React Native
is ready
It’s a solid development
platform which will accelerate
your development.
It’s possible to build
an SDK
Use Jitsi Meet SDK and save
some time? 😎
Conclusions

24. jitsi.org
SAÚL IBARRA CORRETGÉ | @SAGHUL | @JITSINEWS