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 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-nextjs-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.
NEXT_PUBLIC_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
:
Note :
Development environment tokens have a 7-day expiration period.
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",
notification: {
title: "Code Sample",
message: "Meeting is running.",
},
participantId: "xyz",
}}
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 = () => {
// 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: Better UI with basic features.
1. Create or join Meeting
components/JoiningScreen.js
: It shows the user with the option to 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 Create Meeting
is clicked, it will show following:
Meeting code
- This meeting code you can copy and share with other participants that wants to join meeting.TextField for ParticipantName
- This text field will contain name of the participant.Join Meeting Button
- This button will call api to join meeting with meetingId that participant want to join.If Join Meeting
is clicked, 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 join meeting with meetingId that participant want to join.2. Meeting Bottom Bar
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
MeetingContainer/ParticipantView.js
- It contains the grid of participant that are displayed in the main screen.
4. PresenterView
MeetingContainer/PresenterView.js
- It contains the view when participant share their screen.
5. ParticipantList
SidebarContainer/ParticipantSidePanel.js
- This file is used to show the list of participants present in the meeting.
6. Chat
SidebarContainer/ChatSidePanel.js
- It contains the chat side panel with chat input and chat messages list.
7. Waiting Screen
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
LeaveScreen.js
- This file contains the leave screen.
Read the documentation to start using Video SDK.