Skip to content

Latest commit

 

History

History
578 lines (397 loc) · 20.3 KB

README.md

File metadata and controls

578 lines (397 loc) · 20.3 KB
Raw

Video SDK for React JS

Documentation Discord Register

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

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


Prerequisites

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

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

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

Interactive Live Streaming

  • Interactive Live Streaming allows participants to to broadcast live streaming to other participants. Host can start / stop HLS any time during the meeting.
const onPress = () => {
  // Start HLS
  const layout = {
    type: "SPOTLIGHT",
    priority: "PIN",
    gridSize: 9,
  },

  meeting?.startHls({ layout, theme: "DARK" });

  // Stop HLS
  meeting?.stopHls();
};

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: Meeting and Interactive live streaming with better UI includes basic features.
  • design/v1 branch: Simple UI with all features and methods.

Use case type

  • Meeting - In Meeting you can enable mic and webcam, record the meeting, raise hand, chat, share your screen.

Project Structure

There are 1 folder :

  1. meeting - This folder includes components or file related to meeting.

Common components

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


Meeting Project Structure

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


Examples

Examples for Conference

Examples for Live Streaming

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.