Try Live Demo

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.

How to Build a Video Conferencing App with Flutter?

Prerequisites to build video conferencing app with React Native

Let’s make sure you have the following in your development environment:

For iOS

For Android

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

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.

    image 1654599250441

    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

    image 1655197140679

    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: "" }],
      debug: true, // debug true / false

    After initializing the adaptor, it’s just one line of code to start publishing.

    					// . . .
    // . . .

    The method below is used to stop publishing.

    					// . . .
    // . . .

    If you wanted to play a stream, you can use method in the below.

    					// . . .;
    // . . .

    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.

    You can get started now.

    Categories: Tutorial