How to build a Live Streaming React Native application using Ant Media Server?
Our guest is Vitor Silva, Developer at Ubistart, and he will talk about their journey to build a React Native application using rn-antmedia.
What type of project generated the need to create lib rn-antmedia?
A project with a frontend dashboard and mobile application for users, this project is a platform that allows patients and doctors to connect with each other and schedule consultations by video, among other features.
Why did you choose AntMedia for this project?
The purpose of choosing Ant Media was to use WebRTC technology to connect patients and doctors with easy use of abstraction, and also for some advanced functionalities such as recording the teleconsultation.
Why React Native to create mobile apps?
React Native was chosen because it is easier to apply only one code base to develop for iOS and Android at the same time. Besides that, it has a solid community with lots of lib options, it is web developer-friendly (JSX syntax), it has a very good performance (if developed the right way) and we have good internal skills on using that at Ubistart.
How easy is it to do an app with no knowledge of React Native?
Why did we need to develop rn-antmedia ?
rn-antmedia is a lib solution to connect (like webrtc_adaptor) react-native apps to Ant Media server, we needed to develop it because we couldn’t find any type of solution or lib that we could use to connect the app with the server, and the use of Ant Media in this project was mandatory.
What were the steps to develop rn-antmedia ?
The very first step was taking a look at the “web version” (webrtc_adaptor), to see how it was implemented and how it works, but already keeping in mind that the environments (react-native and web) are different. The first difference is react-native doesn’t have by default WebRTC functionalities.
The second step was creating the project using appropriate packages to create a react-native lib, and install libs like react-native-webrtc to get WebRTC functionalities inside react-native.
The third step was writing the code based on the “web version” and take another way to make up due to the differences between the platforms.
The fourth step was testing and fixing bugs and the fifth step was to document the lib and launch.
How to use rn-antmedia?
First, you have to install the plugin and react-native-webrtc, the second step is mandatory that you can use the lib, in the react-native app code, using yarn or npm `npm install rn-antmedia react-native-webrtc`, then you can import it in any component like any other react-native lib.
You can find one way to use the lib in the link below, other examples are still work in progress:
see here a very simple example code, extracted from the link above, showing how you can integrate the lib with the react-native app and connect peer for video call:
Originally published at https://antmedia.io on August 16, 2021.