Video conferencing is a type of virtual, online meeting where two or more people talk through a video and audio call in real time. With the pandemic, the culture of remote work has become widespread. As a result of that meeting online is very popular nowadays. Did you know that, you can easily develop your own conference application?
Here is a quick tutorial to create a conference solution easily on React Native.
Before we start on how to make a video conferencing react native app, l wanted to give some information about Ant Media Server’s React Native SDK and Conference Solution.
Ant Media’s React Native WebRTC SDK lets you build your own React Native application that can publish and play WebRTC broadcasts with just a few lines of code. Besides, you can also benefit from React Native’s multi-platform features, and build not only mobile apps but Mac OS and Windows apps as well.
You can get complete documentation of React Native SDK from here
When we check Ant Media’s Conference solution, it supports both MCU and SFU topology. Besides that, it’s really easy to create or manage conference rooms through their Rest API.
Prerequisites to build video conferencing app with React Native
Let’s make sure you have the following in your development environment:
For iOS
- Node.js
- npm
- react-native-cli
- cocoapods
- iOS device
- macOS
- Ant Media Server Enterprise Edition
For Android
- Node.js
- npm
- react-native-cli
- Android simulator or Android device
- macOS or Windows
- Ant Media Server Enterprise Edition
Let’s get started building a video conferencing app
WebRTC React Native SDK is open source and free to download. You can access it on GitHub.
Let’s clone conference sample application and get started to explore.
On terminal type:
git clone https://github.com/ant-media/WebRTC-React-Native-SDK.git
Go to the conference sample application
cd samples/conference
Open conference.tsx file inside src folder with your favorite ide. Change webSocketUrl with your Ant Media Server instance url.
Your video conferencing app is ready to run
Run npm install to install dependencies.
Run the project with npm run android or npm run ios
Let’s check how it works.
You can initialize useAntMedia adaptor as below.
// . . .
import { useAntMedia, rtc_view } from "@antmedia/react-native-ant-media";
const adaptor = useAntMedia({
url: webSocketUrl, // your web socket server URL
mediaConstraints: {
// mediaConstraints
audio: true,
video: {
width: 640,
height: 480,
frameRate: 30,
facingMode: "front",
},
},
onlyDataChannel: false, // for using only data channel not audio and video
callback(command, data) {}, // check info callbacks
callbackError: (err, data) => {}, // // check error callbacks
peer_connection_config: {
// peerconnection_config
iceServers: [{ urls: "stun:stun1.l.google.com:19302" }],
},
debug: true, // debug true / false
});
After initializing the adaptor, it’s just one line of code to start publishing.
// . . .
adaptor.publish(streamName);
// . . .
The method below is used to stop publishing.
// . . .
adaptor.stop(streamName);
// . . .
If you wanted to play a stream, you can use method in the below.
// . . .
adaptor.play(streamName);
// . . .
As you see, it’s so easy to use.
Try Ant Media Server for Free
Explore Ant Media Server now to provide viewers with a unique experience.
Try Ant Media Server for free with its full features including all WebRTC SDKs.
