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

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

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

7. Going mobile

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, …

17. github.com/react-native-webrtc
react-native-webrtc.discourse.group

18. Jitsi Meet SDK

19. JitsiMeetView
RTCRootView

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);
}

24. github.com/jitsi/jitsi-meet-sdk-samples

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

26. <Toolbox />

28. JitsiMeet

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