Video SDK for Next 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

Demo App

Check out demo here

Features

Real-time video and audio conferencing
Enable/disable camera
Mute/unmute mic
Chat
Raise hand
Screen share
Recording

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 Js 16 or later
Node 10 or later
Valid Video SDK Account

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-nextjs-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.

NEXT_PUBLIC_VIDEOSDK_TOKEN = "TEMPORARY-TOKEN";

Step 4: Install the dependecies

Install all the dependecies to run the project.

npm install

Step 5: Run the Sample App

Bingo, it's time to push the launch button.

npm run start

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 are remote participants.
Stream - Stream means video or audio media content that is either published by local participant or remote participants.

Token Generation

Token is used to create and validate a meeting using API and also initialise a meeting.

🛠️ Development Environment:

You may use a temporary token for development. To create a temporary token, go to VideoSDK dashboard .

🌐 Production Environment:

You must set up an authentication server to authorise users for production. To set up an authentication server, refer to our official example repositories. videosdk-rtc-api-server-examples

Note :

Development environment tokens have a 7-day expiration period.

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 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>

Enable/Disable Local Webcam

const onPress = () => {
  // Enable Webcam in Meeting
  meeting?.enableWebcam();

  // Disable Webcam in Meeting
  meeting?.disableWebcam();
};

Change Local Webcam

const onPress = () => {
const webcams = await meeting?.getWebcams(); // returns all webcams

const { deviceId, label } = webcams[0];

meeting?.changeWebcam(deviceId);
}

Mute/Unmute Local Audio

const onPress = () => {
  // Enable Mic in Meeting
  meeting?.unmuteMic();

  // Disable Mic in Meeting
  meeting?.muteMic();
};

Change Local Mic

const onPress = () => {
const mics = await meeting?.getMics(); // returns all mics

const { deviceId, label } = mics[0];

meeting?.changeMic(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-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);

Raise Hand

This feature allows participants to raise hand during the meeting.

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

Share Your Screen

This featute allows participant to share either the complete screen, a specific window or, a browser tab.

const onPress = () => {
  // Enabling ScreenShare
  meeting?.enableScreenShare();

  // Disabling ScreenShare
  meeting?.disableScreenShare();
};

Recording

Record meeting allows participants to record video & audio during the meeting. The recording files are available in developer dashboard. Any participant can start / stop recording any time during the meeting.

const onPress = () => {
  // Start Recording
  meeting?.startRecording(webhookUrl, awsDirPath);

  // Stop Recording
  meeting?.stopRecording();
};

Leave or End Meeting

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

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

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

Project Description

Note :

main branch: Better UI with basic features.

Project Structure

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.

Examples

Documentation

Read the documentation to start using Video SDK.

Community

Discord - To get involved with the Video SDK community, ask questions and share tips.
Twitter - To receive updates, announcements, blog posts, and general Video SDK tips.

Videosdk Rtc Nextjs Sdk Example

About Videosdk Rtc Nextjs Sdk Example

Platforms

Languages

Links

Need Help Installing Videosdk Rtc Nextjs Sdk Example?

Alternatives to Videosdk Rtc Nextjs Sdk Example

Call Me

Mirotalkwebrtc

Roomler

Glipchat

Mediasoup Sfu Webrtc Video Rooms

Webrtc Video Conference Simple Peer