- 03 May 2022
- 5 Minutes to read
-
Print
-
DarkLight
React Native SDK
- Updated on 03 May 2022
- 5 Minutes to read
-
Print
-
DarkLight
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
- 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 clickingStart 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 viahttps://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 clickingPlay
, 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