Skip to content
/ videosdk-hls-react-sdk-example Public

A ready-to-use React UI kit Example for interactive live streaming that enable real-time communication between broadcasters and their audience, allowing for features like chat, screen share, or other forms of engagement

docs.videosdk.live/
5 stars 12 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

videosdk-live/videosdk-hls-react-sdk-example

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
.github
.github
 
 
public
public
 
 
src
src
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
tailwind.config.js
tailwind.config.js
 
 

Repository files navigation

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

Features

Host

  • Enable/disable camera
  • Mute/unmute mic
  • Poll
  • Chat
  • Raise hand
  • Screen share
  • Recording
  • HLS

Viewer

  • Reactions
  • Poll
  • Raise hand

Setup Guide


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-hls-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 run the project.

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",
    notification: {
      title: "Code Sample",
      message: "Meeting is running.",
    },
    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: Interactive live streaming with better UI includes basic features.

Use case type

  • In Interactive Live Streaming you can join as a host or viewer.
    • As a host, you can start and stop live streaming, create and launch a poll and also use features that are available in the Meeting use case.
    • As a viewer, you can watch live streaming, give reaction, raise hand, chat and submit a poll.

Project Structure

There are 1 folder :

  1. interactive-live-streaming - This folder includes all components or file related to Interactive Live Streaming.

Common components

1. Create or join Meeting

  • components/screens/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 you click Create Meeting, it will show following:

    • StudioCode - You can copy this studioCode 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 studioCode that participant want to join.

  • If you 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 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


Project Structure

1. ILSContainer : It contains the TopBar, PresenterView , ILSParticipantView, HLSContainer ,SidebarContainer and ILSBottomBar.

2. ILSBottomBar

  • interactive-live-streaming/components/ILSBottomBar.js: It contains the buttons that are displayed in bottom of the screen. create a poll, submit a poll, end poll , draft a poll and remove poll from draft pubsub methods.

    • Starting from left it shows studioCode with copy icon button.

    • In middle, it shows screen share, raise hand icon button, reaction icon button mic icon button with available mics list, webcam icon button with available webcam list, and leave meeting icon button.

    • In right most corner, it shows poll icon button, 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. TopBar

4. ILSParticipantView

5. HLSContainer

6. PlayerViewer

7. CreatePoll

  • interactive-live-streaming/components/pollContainer/CreatePoll.js

    • It has a text field to ask poll question, another text field where you can add your options, a checkbox to mark correct option and option to set timer.
    • In the bottom you can see save and launch button. If you click on save then your poll will be saved as a draft in the poll list and you can launch this draft poll any time during live streaming.
    • On click of launch button, you can ask poll immediately.

8. PollList

  1. Poll that are saved as a draft.
  2. Poll that are launched during live streaming.
  • You can create new polls with create new poll button.

9. SubmitPollList

10. LocalParticipantListner

11. PollListner

12. ECommercePanel

13. Reactions


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.

About

A ready-to-use React UI kit Example for interactive live streaming that enable real-time communication between broadcasters and their audience, allowing for features like chat, screen share, or other forms of engagement

docs.videosdk.live/

Topics

chat video webrtc live

Resources

Readme
Activity
Custom properties

Stars

5 stars

Watchers

1 watching

Forks

12 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 7

Languages