Going Mobile with React Native and WebRTC
Download as PDF, PPTX2 likes2,355 views
The document discusses the implementation of Jitsi, an open-source video conferencing solution, using React Native and WebRTC for mobile applications. It highlights the benefits of React Native, such as native performance and a shared codebase for web and mobile, as well as the challenges associated with integrating various features like audio routing and background timers. The Jitsi Meet SDK is also showcased as a ready-to-use development platform aimed at simplifying the integration process for app developers.
![- (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];
}](https://image.slidesharecdn.com/opensipssummit2019-190509092500/85/Going-Mobile-with-React-Native-and-WebRTC-21-320.jpg)
More Related Content
Similar to Going Mobile with React Native and WebRTC (20)
![From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-3-250903141006-a3917e1a-thumbnail.jpg?width=560&fit=bounds)
![Strategic Picks — Prioritising the Right Agentic Use Cases [2/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-2-250902135931-4c97717a-thumbnail.jpg?width=560&fit=bounds)
Going Mobile with React Native and WebRTC
- 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, …
- 18. Jitsi Meet SDK
- 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
- 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