videosdk-rtc-react-native-sdk-example
videosdk-rtc-react-native-sdk-example copied to clipboard
WebRTC based video conferencing SDK for React Native (Android / iOS)
Video SDK for React Native (Android and iOS)
At Video SDK, weβre building tools to help companies create world-class collaborative products with capabilities of live audio/videos, compose cloud recordings/rtmp/hls and interaction APIs
Demo App
Check out demo here
π² Download the Sample iOS app here: https://testflight.apple.com/join/LYj3QJPx
π± Download the Sample Android app here: https://appdistribution.firebase.dev/i/a4c63049415c4356
Setup Guide
-
Sign up on VideoSDK and visit API Keys section to get your API key and Secret key.
-
Get familiarized with API key and Secret key
-
Get familiarized with Token
Prerequisites
- React Native 0.59.10 or later
- Node 10 or later
- Valid Video SDK Account
- For Android
- Java Development Kit (JDK) 8 or later
- Android Studio (latest version recommended)
- A physical or virtual mobile device running Android 5.0 or later
- For iOS
- Xcode 9.4 or later
- CocoaPods
- A physical or virtual mobile device running iOS 9.0 or later
Run the Sample App
Step 1: Clone the sample project
Clone the repository to your local environment.
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git
Step 2: Copy the .env.example file to .env file.
Open your favorite code editor and copy .env.example
to .env
file.
cp.env.example.env;
Step 3: Modify .env file
Generate temporary token from Video SDK Account.
REACT_APP_VIDEOSDK_TOKEN = "TEMPORARY-TOKEN";
Step 4: Install the dependecies
Install dependecies all the project dependencies.
npm install
Step 5: Run the sample app
Bingo, it's time to push the launch button.
npm run start
npm android
npm ios
Key Concepts
-
Meeting
- A Meeting represents Real time audio and video communication.Note : Don't confuse with Room and Meeting keyword, both are same thing π
-
Sessions
- A particular duration you spend in a given meeting is a referred as session, you can have multiple session of a particular meetingId. -
Participant
- Participant represents someone who is attending the meeting's session,local partcipant
represents self (You), for this self, other participants areremote participants
. -
Stream
- Stream means video or audio media content that is either published bylocal participant
orremote participants
.
Android Permission
Add all the following permissions to AndroidManifest.xml file.
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<!-- Needed to communicate with already-paired Bluetooth devices. (Legacy up to Android 11) -->
<uses-permission
android:name="android.permission.BLUETOOTH"
android:maxSdkVersion="30" />
<uses-permission
android:name="android.permission.BLUETOOTH_ADMIN"
android:maxSdkVersion="30" />
<!-- Needed to communicate with already-paired Bluetooth devices. (Android 12 upwards)-->
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
iOS Permission
Add the following entry to your Info.plist file, located at <project root>/ios/Runner/Info.plist
:
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>
iOS Screen share Setup
Please refer to this documentation guide to setup screenshare for iOS
Token Generation
Token is used to create and validate a meeting using API and also initialise a meeting.
π οΈ Development Environment
:
- For development, you can use temporary token. Visit VideoSDK dashboard to generate temporary token.
π Production Environment
:
- For production, you have to set up an authentication server to authorize users. Follow our official example repositories to setup authentication server, videosdk-rtc-api-server-examples
Note :
The expiry of development environment token lasts 7 days only.
API: Create and Validate meeting
-
create meeting
- Please refer this documentation to create meeting. -
validate meeting
- Please refer this documentation to validate the meetingId.
Initialize a Meeting
- You can initialize the meeting using
MeetingProvider
. Meeting Provider simplifies configuration of meeting with by wrapping up core logic withreact-context
.
<MeetingProvider
config={{
meetingId: "meeting-id",
micEnabled: true,
webcamEnabled: true,
name: "Participant Name",
notification: {
title: "Code Sample",
message: "Meeting is running.",
},
participantId: "xyz",
}}
token={"token"}
></MeetingProvider>
Mute/Unmute Local Audio
// Enable Mic in Meeting
meeting?.unmuteMic();
// Disable Mic in Meeting
meeting?.muteMic();
Change Audio Device
- The
getAudioDeviceList()
function allows a participant to list all of the attached audio devices (e.g., Bluetooth and Earphone).
import { getAudioDeviceList } from "@videosdk.live/react-native-sdk";
const onPress = async () => {
const device = await getAudioDeviceList();
console.log("Device :", device); // ["SPEAKER_PHONE","WIRED_HEADSET"]
};
- Local participant can change the audio device using
switchAudioDevice()
method ofRoom
class.
import { switchAudioDevice } from "@videosdk.live/react-native-sdk";
switchAudioDevice("SPEAKER_PHONE"); // for device speaker
switchAudioDevice("EARPIECE"); // for device earpiece
switchAudioDevice("WIRED_HEADSET"); // for wired headset
switchAudioDevice("BLUETOOTH"); // for bluetooth device
- Please consult our documentation Change Audio Device for more infromation.
Enable/Disable Local Webcam
const { enableWebcam, disableWebcam } = useMeeting();
const onPress = async () => {
// Enable Webcam in Meeting
enableWebcam();
// Disable Webcam in Meeting
disableWebcam();
};
Switch Local Webcam
const { changeWebcam, getWebcams } = useMeeting();
const onPress = async () => {
// Change Webcam in Meeting
const webcams = await getWebcams(); // returns all webcams
const { deviceId, label } = webcams[0]; // 0th : Rear Cam, 1st : Front Cam
changeWebcam(deviceId);
};
Chat
- The chat feature allows participants to send and receive messages about specific topics to which they have subscribed.
// importing usePubSub hook from react-native-sdk
import { usePubSub } from "@videosdk.live/react-native-sdk";
// CHAT Topic
const { publish, messages } = usePubSub("CHAT");
// publish message
const sendMessage = () => {
const message = "Hello People!";
publish(message, { persist: true });
};
// get latest messages
console.log("Messages : ", messages);
Leave or End Meeting
const { leave, end } = useMeeting({});
const onPress = () => {
// Only one participant will leave/exit the meeting; the rest of the participants will remain.
leave();
// The meeting will come to an end for each and every participant. So, use this function in accordance with your requirements.
end();
};
Meeting Event callbacks
By registering callback handlers, VideoSDK sends callbacks to the client app whenever there is a change or update in the meeting after a user joins.
function onParticipantJoined(participant) {
// This event will be emitted when a new participant joined the meeting.
// [participant]: new participant who joined the meeting
console.log(" onParticipantJoined", participant);
}
function onParticipantLeft(participant) {
// This event will be emitted when a joined participant left the meeting.
// [participantId]: id of participant who left the meeting
console.log(" onParticipantLeft", participant);
}
const onSpeakerChanged = (activeSpeakerId) => {
// This event will be emitted when any participant starts or stops screen sharing.
// [activeSpeakerId]: Id of participant who shares the screen.
console.log(" onSpeakerChanged", activeSpeakerId);
};
function onPresenterChanged(presenterId) {
// This event will be emitted when a active speaker changed.
// [presenterId] : Id of active speaker
console.log(" onPresenterChanged", presenterId);
}
function onMeetingJoined() {
// This event will be emitted when a localParticipant(you) successfully joined the meeting.
console.log("onMeetingJoined");
}
function onMeetingLeft() {
// This event will be emitted when a localParticipant(you) left the meeting.
console.log("onMeetingLeft");
}
function onRecordingStarted() {
// This event will be emitted when recording of the meeting is started.
console.log(" onRecordingStarted");
}
function onRecordingStopped() {
// This event will be emitted when recording of the meeting is stopped.
console.log(" onRecordingStopped");
}
const { meetingId, meeting, localParticipant } = useMeeting({
onParticipantJoined,
onParticipantLeft,
onSpeakerChanged,
onPresenterChanged,
onMeetingJoined,
onMeetingLeft,
onRecordingStarted,
onRecordingStopped,
});
Participant Events Callback
By registering callback handlers, VideoSDK sends callbacks to the client app whenever a participant's video, audio, or screen share stream is enabled or disabled.
function onStreamEnabled(stream) {
// This event will be triggered whenever a participant's video, audio or screen share stream is enabled.
console.log(" onStreamEnabled", stream);
}
function onStreamDisabled(stream) {
// This event will be triggered whenever a participant's video, audio or screen share stream is disabled.
console.log(" onStreamDisabled", stream);
}
const {
displayName
...
} = useParticipant(participantId,{
onStreamEnabled,
onStreamDisabled,
});
If you want to learn more about the SDK, read the Complete Documentation of React Native VideoSDK
Project Description
Note :
- main branch: Better UI with One-to-One and Conference call experience.
- v1-code-sample branch: Simple UI with Group call experience.
App Behaviour with Different Meeting Types
-
One-to-One meeting - The One-to-One meeting allows 2 participants to join a meeting in the app.
-
Group Meeting - The Group meeting allows any number of participants to join a meeting in the app with maximum 6 participants on screen.
Project Structure
We have separated screens and components in following folder structure:
src
βββ scenes
βββ join
βββ index.js
βββ meeting
1. Join Screen
-
scenes/join/index.js
: It shows the user with the option to create or join a meeting and to initiate webcam and mic status. -
If
Join Meeting
is clicked, it will show following:-
EditText for ParticipantName
- This edit text will contain name of the participant. -
EditText for MeetingId
- This edit text will contain the meeting Id that you want to join. -
Join Meeting Button
- This button will call api for join meeting with meetingId that you entered
-
-
If
Create Meeting
is clicked, it will show following:-
EditText for ParticipantName
- This edit text will contain name of the participant. -
Join Meeting Button
- This button will call api for join meeting with a new meetingId
-
2. Meeting Screen
scenes
βββ meeting
βββ index.js
βββ MeetingContainer.js
βββ Components
βββ Conference
βββ OneToOne
-
meeting/index.js
: This file essentially initialise the meeting depending on the config given. -
meeting/MeetingContainer.js
: It directs users to the meeting type they have chosen, eitherConference
orOne-To-One
.
Components
This folder contains all the common components used in Conference
and OneToOne
meeting type.
Components
βββ ChatViewer
βββ ParticipantListViewer
βββ LocalParticipantPresenter.js
βββ WaitingToJoinView.js
ChatViewer
-
This component is solely responsible for managing chat in the meeting.
ParticipantListViewer
-
This component is solely responsible for managing Participant list in the meeting.
LocalParticipantPresenter.js
-
This component is used when local participant share the screen, you can checkout the below image.
WaitingToJoinView.js
-
This component is act as a loader if participant has not joined successfully.
Conference
The whole user interface and business logic for the meeting type Conference
are contained in this folder.
Conference
βββ ConferenceMeetingViewer.js
βββ ConferenceParticipantGrid.js
βββ ParticipantView.js
βββ PauseInvisibleParticipant.js
βββ RemoteParticipantPresenter.js
ConferenceMeetingViewer.js
-
This file essentially contains the layout for the entire
Conference
meeting.
ConferenceParticipantGrid.js
- This file is responsible for maintaining a grid with 6 participants in portrait and landscape modes.
ParticipantView.js
- This file essentially maintains the stream of a particular participant as well as the status of controls (Mic and Cam)
PauseInvisibleParticipant.js
- This file handles participants who are not in the participant grid.
RemoteParticipantPresenter.js
-
This file handles the screen share of remote participant.
OneToOne
The whole user interface and business logic for the meeting type OneToOne
are contained in this folder.
OneToOne
βββ index.js
βββ LargeView
βββ MiniView
βββ LocalViewContainer.js
βββ ParticipantLimitViewer.js
index.js
-
This file essentially contains the layout for the entire
OneToOne
meeting and manageLargeView
andMiniView
participant.
LargeView
- This component is solely responsible for managing remote participant streams, whether video or screen share streams.
MiniView
- This component is solely responsible for managing local participant video stream.
LocalViewContainer.js
-
This component is managing local participant stream if 2nd participant is not present in the meeting.
ParticipantLimitViewer.js
-
This component is render if the meeting's participant limit is exceeded.
Examples
Examples for Conference
- videosdk-rtc-prebuilt-examples
- videosdk-rtc-javascript-sdk-example
- videosdk-rtc-react-sdk-examplee
- videosdk-rtc-react-native-sdk-example
- videosdk-rtc-flutter-sdk-example
- videosdk-rtc-android-java-sdk-example
- videosdk-rtc-android-kotlin-sdk-example
- videosdk-rtc-ios-sdk-example
Examples for Live Streaming
- videosdk-hls-react-sdk-example
- videosdk-hls-react-native-sdk-example
- videosdk-hls-flutter-sdk-example
- videosdk-hls-android-java-example
- videosdk-hls-android-kotlin-example
Documentation
Read the documentation to start using Video SDK.