React Native SDK

Ant Media's WebRTC React Native SDK lets you build your own React Native application that can publish and play WebRTC broadcasts with just a few lines of code.

In this doc, we're going to cover the following topics.

• Pre-Requisite For React Native Development

  • Software Requirements
  • How To Setup Your First Application?

• Download and ready WebRTC sample apps

  • Download the Sample React Native projects
  • .env configuration of sample projects
  • Install dependencies and run sample projects

• Run the sample WebRTC React Native apps

  • Publish stream from your React Native sample app
  • Play stream on your React Native sample app
  • P2P communication with your React Native sample app
  • Join a conference room with your React Native sample app
  • Data Channel communication with sample React Native app

• Using WebRTC React Native SDK

  • Install @antmedia/react-native-ant-media Package
  • How to publish
  • How to play
  • How to use peer 2 peer

Pre-Requisite for React Native development

Software requirements

• Android Studio (IDE)
• Android SDK
• Java
• NodeJs
• NPM
• React Native CLI

How to setup your first application?

First of all, you’re required to install the node on your system. If your machine already has Node.js installed, then skip this step.

Node.js Installation

Download the latest Node.js from here nodejs.org/en

Once the setup is downloaded on your system, run the .msi downloaded file and follow the prompt instructions to install the application.

Furthermore, make ascertain that the Node and NPM have been installed.

Use the Below Commands-

node -v

npm –v

React Native

Use the command

npm install -g react-native-cli

in the command terminal to install React Native.

Android Development Environment

Download & Install the Android Studio https://developer.android.com/studio/install.html

The Android Studio lets you run the Reactive Native application in an emulator and test the application.

First React Native project

We’ll be building our very first project using React Native by running the following command:

react-native init MySampleApp

in the terminal from the folder where you will be creating the application.

Now, run commands below:

react-native start

react-native run-android

 Make sure you’ve started the emulator on your machine.

This Is how the sample project will look like in the Emulator:

Download and install WebRTC sample apps

Download sample React Native projects

WebRTC React Native samples are free to download. You can access them through this link on Github.

After downloading the whole project, you can see all samples React Native projects in the samples folder.

.env configuration of sample projects

All sample projects available in this repository have the same kind of directory structure like below. All sample projects have same steps for setting up the .env configuration, installation and run.

After opening the .env file you need to enter your server address in WEB_SOCKET_URL and default stream value in DEFAULT_STREAM varaiables in .env file

Install dependencies and run sample projects

For installing dependencies you can use npm or as an alternative method, you can also use yarn.

Install yarn by following this link.

First, you need to open the terminal on the root directory of the sample project you want to install and then run commands below.

To install dependencies by npm run npm install

or

To install dependencies by yarn run yarn install

After dependencies are installed and correct values are entered in .env file , you need to run commands below in order to run the project itself.

Run npm run android if using npm

or

Run yarn android if using yarn

Note: If you want to use npm, then  follow only npm commands and if you want to use yarn then follow only yarn commands.

After the project starts successfully, sample app will appear on the device/emulator.

Run the sample React Native app

Publish a stream from your sample React Native app

Move to /samples/Publish Folder and follow the Install dependencies and run sample projects steps to run the Publish sample React native app.

• Tap Start Publishing button on the screen. After the clicking Start Publishing, the stream will be published on Ant Media Server.
• You can now go to the web panel of Ant Media Server (e.g http://server_ip:5080) and watch the stream there. You can also quickly play the stream via https://your_domain:5443/WebRTCAppEE/player.html

Play stream from your sample React Native app

Go to /samples/Play Folder and follow the Install dependencies and run sample projects steps to run the Play sample React native app.

• Before playing, make sure that there is a stream that is already publishing to the server with the same stream id in your streamId parameter (You can quickly publish to the Ant Media Server via https://your_domain:5443/WebRTCAppEE).
• You will see the DEFAULT_STREAM in the Stream Name. You can also edit this name.

• Tap Play button on the screen. After clicking Play, the stream will start playing.

P2P communication with sample React Native app

Go to /samples/Peer folder and follow the Install dependencies and run sample projects steps to run the Peer sample React native app.

When there is another peer connected to the same stream ID via Android, iOS or web, the P2P communication will be established and you can talk to each other. You can quickly connect to the same stream id via https://your_domain:5443/WebRTCAppEE/peer.html

Join a conference room with sample React Native app

Go to /samples/Conference Folder and follow the Install dependencies and run sample projects steps to run the Conference sample React native app.

When there are other streams connected to the same stream ID via Android, iOS or web, then a conference room will be established and you can talk to each other. You can quickly connect to the same stream id via
https://your_domain:5443/WebRTCAppEE/conference.html  

Data Channel communication with sample React Native app

Go to /samples/Chat Folder and follow the Install dependencies and run sample projects steps to run the Chat sample React native app.

Using WebRTC React Native SDK

Before moving forward with using WebRTC React Native SDK, we highly recommend using the sample project to get started with your application. It's good to know the dependencies and how it works in general.

Install @antmedia/react-native-ant-media Package

npm

npm i @antmedia/react-native-ant-media react-native-webrtc

yarn

yarn add @antmedia/react-native-ant-media react-native-webrtc

initialize useAntMedia adaptor

// . . .

import {useAntMedia} from '@antmedia/react-native-ant-media';

const adaptor = useAntMedia({
    url: webSocketUrl, // your web socket server URL

    mediaConstraints: {
      video: {
        mandatory: {
          minFrameRate: 30,
          minHeight: 480,
          minWidth: 640,
        },
        optional: [],
        facingMode: 'user',
      },
      audio: true,
    },
    sdp_constraints: {
      OfferToReceiveAudio: true,
      OfferToReceiveVideo: true,
    },
    bandwidth: 300,
   peerconnection_config: {
        'iceServers': [{'urls': 'stun:stun1.l.google.com:19302'}]
    },
    callback(command, data) {}, // check info callbacks bellow
    callbackError: (err, data) => {}, // // check error callbacks bellow
  });

// Then, in another part of your script, you can start streaming by calling the publish method
adaptor.publish(streamName);

// . . .

The example above is taken from ant-media / WebRTC-React-Native-SDK

How to publish a stream

The method below is used to publish a stream.

// . . .

adaptor.publish(streamName);

// . . .

Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK Publish

How to play a stream

The method below is used to play a stream.

// . . .

adaptor.play(streamName);

// . . .

Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK Play

How to use peer 2 peer

The method method is used to join a room.

// . . .

adaptor.join(streamName);

// . . .

The method below is used to leave a room.

// . . .

adaptor.leave(streamName);

// . . .

Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK p2p

Check Also: WebRTC-React-Native-SDK