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 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.

    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: "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.

    Use Ant Media Server for free for 100 hours every month

    You don’t need to pay anything in advance. Just get started and only pay for what you use. Ant Media provides 100 hours of free usage every month and you’ll have Ant Media Server Flutter WebRTC SDK, and everything by signing up with zero upfront cost. So you can start building your own Flutter streaming app now.

    You can get started now.

    Categories: Tutorial

    1 Comment

    Ant Media Server New Conference Solution - Ant Media Server · November 14, 2022 at 13:46

    […] these server and client-side optimizations, we also announce a new conference UI which is already adapted to these optimizations. So this new UI not only provides a good user […]

    Leave a Reply

    Avatar placeholder

    Your email address will not be published.