WebRTC based video conferencing SDK for React JS
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
Check out demo here
Sign up on VideoSDK and visit API Keys section to get your API key and Secret key.
Get familiarized with Token
Clone the repository to your local environment.
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git
Open your favorite code editor and copy .env.example
to .env
file.
cp.env.example.env;
Generate temporary token from Video SDK Account.
REACT_APP_VIDEOSDK_TOKEN = "TEMPORARY-TOKEN";
Install all the dependecies to run the project.
npm install
Bingo, it's time to push the launch button.
npm run start
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 are remote participants
.
Stream
- Stream means video or audio media content that is either published by local participant
or remote participants
.
Token is used to create and validate a meeting using API and also initialise a meeting.
๐ ๏ธ Development Environment
:
๐ Production Environment
:
create meeting
- Please refer this documentation to create meeting.validate meeting
- Please refer this documentation to validate the meetingId.MeetingProvider
. Meeting Provider simplifies configuration of meeting with by wrapping up core logic with react-context
.<MeetingProvider
config={{
meetingId: "meeting-id",
micEnabled: true,
webcamEnabled: true,
name: "Participant Name",
participantId: "xyz",
// For Interactive Live Streaming we can provide mode, `CONFERENCE` for Host and `VIEWER` for remote participant.
mode: "CONFERENCE", // "CONFERENCE" || "VIEWER"
}}
token={"token"}
joinWithoutUserInteraction // Boolean
></MeetingProvider>
const onPress = () => {
// Enable Webcam in Meeting
meeting?.enableWebcam();
// Disable Webcam in Meeting
meeting?.disableWebcam();
};
const onPress = () => {
const webcams = await meeting?.getWebcams(); // returns all webcams
const { deviceId, label } = webcams[0];
meeting?.changeWebcam(deviceId);
}
const onPress = () => {
// Enable Mic in Meeting
meeting?.unmuteMic();
// Disable Mic in Meeting
meeting?.muteMic();
};
const onPress = () => {
const mics = await meeting?.getMics(); // returns all mics
const { deviceId, label } = mics[0];
meeting?.changeMic(deviceId);
}
// importing usePubSub hook from react-sdk
import { usePubSub } from "@videosdk.live/react-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);
// importing usePubSub hook from react-sdk
import { usePubSub } from "@videosdk.live/react-sdk";
// RAISE_HAND Topic
const { publish } = usePubSub("RAISE_HAND");
// Publish Message
const RaiseHand = () => {
publish("Raise Hand");
};
const onPress = () => {
// Enabling ScreenShare
meeting?.enableScreenShare();
// Disabling ScreenShare
meeting?.disableScreenShare();
};
const onPress = () => {
// Start Recording
meeting?.startRecording(webhookUrl, awsDirPath);
// Stop Recording
meeting?.stopRecording();
};
const onPress = () => {
// Start HLS
const layout = {
type: "SPOTLIGHT",
priority: "PIN",
gridSize: 9,
},
meeting?.startHls({ layout, theme: "DARK" });
// Stop HLS
meeting?.stopHls();
};
const onPress = () => {
// Only one participant will leave/exit the meeting; the rest of the participants will remain.
meeting?.leave();
// The meeting will come to an end for each and every participant. So, use this function in accordance with your requirements.
meeting?.end();
};
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 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 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 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({
onMeetingJoined,
onMeetingLeft,
onParticipantJoined,
onParticipantLeft,
onSpeakerChanged,
onPresenterChanged,
onRecordingStarted,
onRecordingStopped,
});
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);
}
function onMediaStatusChanged(data) {
// This event will be triggered whenever a participant's video or audio is disabled or enabled.
const { kind, newStatus} = data;
console.log("onMediaStatusChanged", kind,newStatus)
}
const {
displayName
...
} = useParticipant(participantId,{
onStreamEnabled,
onStreamDisabled,
onMediaStatusChanged,
});
If you want to learn more about the SDK, read the Complete Documentation of React VideoSDK
Note :
- main branch: Meeting and Interactive live streaming with better UI includes basic features.
- design/v1 branch: Simple UI with all features and methods.
Meeting
you can enable mic and webcam, record the meeting, raise hand, chat, share your screen.There are 1 folder :
meeting
- This folder includes components or file related to meeting.1. Create or join Meeting
components/screens/JoiningScreen.js
: It shows the user with the option to meeting type and create or join a meeting and to initiate webcam and mic status.
api.js
: It includes all the API calls for create and validate meeting.
If you select Meeting
type and click Create Meeting
, it will show following:
MeetingId
- You can copy this meetingId and share it with other participants that wants to join the meeting.TextField for ParticipantName
- This text field will contain name of the participant.Start Meeting Button
- This button will call api to create meeting with meetingId that participant want to join.
If you select Meeting
type and click Join Meeting
, it will show following:
TextField for MeetingId
- This text field will contain the meeting Id that you want to join.TextField for ParticipantName
- This text field will contain name of the participant.Join Meeting Button
- This button will call api to validate meeting with meetingId that participant want to join.
If you select Interactive Live Streaming
type and click Join as a Host
, it will show following:
Studio code
- You can copy this studio code and share with other participants that wants to join the meeting.TextField for ParticipantName
- This text field will contain name of the participant.Join Studio Button
- This button will call api to create meeting with studio code that participant want to join.
If you select Interactive Live Streaming
type and click Join as a Viewer
, it will show following:
TextField for StudioCode
- This text field will contain the studio code that you want to join.TextField for ParticipantName
- This text field will contain name of the participant.Join Streaming Room Button
- This button will call api to validate meeting with studio code that viewer want to join.
2. PresenterView
components/PresenterView.js
- It contains the view when participant share their screen.
3. ParticipantView
components/ParticipantView.js
- It contains single participant video and corner display name.
4. ParticipantGrid
components/ParticipantGrid.js
- It contains the grid of participant that are displayed in the main screen.
5. ParticipantList
sidebar/ParticipantPanel.js
- This file is used to show the list of participants present in the meeting.
6. Chat
sidebar/ChatPanel.js
- It contains the chat side panel with chat input and chat messages list.
7. Waiting Screen
components/screens/WaitingToJoin.js
- It contains the lottie animation with messages. Untill you receive isMeetingJoined
true from meeting
that you intialize using useMeeting()
from @videosdk.live/react-sdk
, this screen will be displayed.
8. Leave Screen
components/screens/LeaveScreen.js
- This file contains the leave screen.
9. SidebarContainer
components/sidebar/SidebarContainer.js
- It containes Participanel
, ChatPanel
, CreatePoll
, PollList
and SubmitPollList
component rendering.1. MeetingContainer : It contains the PresenterView
, ParticipantView
, SidebarContainer
and BottomBar
.
2. Meeting Bottom Bar
meeting/components/BottomBar.js
: It contains the buttons that are displayed in bottom of the screen.
Starting from left it shows meetingId with copy icon button.
In middle, it shows recording indicator, raise hand icon button, mic icon button with available mics list, webcam icon button with available webcam list, screen share and leave meeting icon button.
In right most corner, it shows chat icon button and partcipants icon with participant count.
When screen resolution change to mobile, tab or lg screen, the order of bottom bar elements changes to leave meeting button, recording button, mic & webcam button and more actions
button.
On click of more actions
button it opens a drawer that contains other remaining buttons.
3. ParticipantView
meeting/components/ParticipantView.js
- It contains the grid of participant that are displayed in the main screen.
Read the documentation to start using Video SDK.