Try Live Demo

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

This blog post explains how to configure React Native WebRTC SDK and run the sample applications.

Pre-requisite for React Native WebRTC app development

Software requirements for React Native WebRTC app

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

To start building a React Native WebRTC application, 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

node.js installation for react native webrtc

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

android studio setup for webrtc react native app

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

Verify React Native installation by running a WebRTC sample app

We’ll be building a project using React Native WebRTC SDK by running the following command:

react-native init MySampleApp

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

Now, run the commands below:

react-native start
react-native run-android

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

This is what the sample project will look like in the Emulator:

android emulator to build react native app

Download and install React Native WebRTC sample apps

Download sample WebRTC 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 of React Native projects in the samples folder.

react native project in ant Media Server WebRTC react native sdk

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 the commands below.

To install dependencies by npm run npm install

or

To install dependencies by yarn run yarn install

After dependencies are installed, you need to run the 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, a  WebRTC React Native sample app will appear on the device/emulator.

Run the sample WebRTC React Native app

Publish a stream from your sample React Native WebRTC app

  • Open /samples/publish/src/App.tsx file and update defaultStreamName variable for stream name and update webSocketUrl variable with server name.

sample react native app

 

Ant media server webrtc publishing

  • Tap Start Publishing button on the screen. After clicking the Start Publishing button, 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

    • Open /samples/play/src/Play.tsx file and update defaultStreamName variable for stream name and update webSocketUrl variable with server name.playing webrtc stream
  • Go to /samples/play folder and follow the Install dependencies and run sample projects steps to run the Play sample React native WebRTC app.
  • Before playing, make sure that there is a stream that is already publishing to the server with the same stream id in your defaultStreamName variable(You can quickly publish to the Ant Media Server via https://your_domain:5443/WebRTCAppEE).

 

Ant Media server webrtc stream playing

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

webrtc stream playing with react native

 

P2P communication with sample React Native WebRTC app

  • Open /samples/peer/src/Peer.tsx file and update defaultStreamName variable for stream name and update webSocketUrl variable with server name.P2P communication with sample React Native WebRTC app
  • Go to /samples/peer folder and follow the Install dependencies and run sample projects steps to run the Peer sample React native app.Webrtc peer to peer p2p
  • When there is another peer connected to the same stream ID via Android, iOS, or the web, 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

Ant Media Server p2p

Conference call with your React Native WebRTC sample app

  • Open /samples/conference/src/conference.tsx file and update defaultRoomName variable for stream name and update webSocketUrl variable with server name.

conference call with react native webrtc sdk

 

Ant Media Server conference using Webrtc react native sdk

 

  • When there are other streams connected to the same room 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 viahttps://your_domain:5443/WebRTCAppEE/conference.html

WebRTC video conferencing

Using WebRTC Data Channel with your React Native WebRTC sample app

    • Open /samples/DataChannel/src/Chat..tsx file and update defaultStreamName variable for stream name and update webSocketUrl variable with server name.

WebRTC data channel usage in react native webrtc app

ant media server webrtc data channel

 

  • After that you can start sending messages using send button and also can see the received button, You can also quickly play the stream via https://your_domain:5443/WebRTCAppEE/player.html and send and receive the data channel messages.

testing webrtc data channel in react native webrtc sdk

 

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, 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
});

// 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);

// . . .

The method below is used to stop publishing

// . . .

adaptor.stop(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 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

How to use conference

The method below is used to join a room.

// . . .

adaptor.joinRoom(room);

// . . .

The method below is used to leave a room.

// . . .

adaptor.leaveFromRoom(room);

// . . .

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

How to use the data channel

The method below is used to send messages.

// . . .

adaptor.sendData(streamId, message);

// . . .

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

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 what you use. Ant Media provides 100 hours of free usage every month and you’ll have Ant Media Server React Native WebRTC SDK, and everything by signing up with zero upfront cost. So you can start building your own React Native streaming app now.

You can get started now.


Hamit Demir

As a B2B tech marketer, Hamit Demir works as a solution expert at Ant Media. He has experience in SEO, Demand Generation, Paid Search & Paid Social, and Content Marketing. He spends his free time learning new things. He loves to talk about streaming and especially WebRTC.