DEV Community: Riya Chudasama

Found one of the best SDK to integrate live streaming feature into your application

Riya Chudasama — Mon, 10 Feb 2025 07:17:16 +0000

Recently I was working on a side project. I wanted to integrate live streaming feature into my applcation. There were so many sdks available that made me so confused. Then I stumbled upon a blog React HLS Player by VideoSDK. And then i eventually decided to use VideoSDK.

Why choose VideoSDK

When considering live streaming solutions, many platforms offer standard streaming capabilities where the audience can only watch and chat, lacking real-time interaction with the speaker. In contrast, VideoSDK provides a robust interactive live streaming experience that enhances audience engagement through various interactive features.

One of the best thing is that this even though you are just a beginner , you are not a pro coder , you can still easily use this SDK.

Advantages of VideoSDK's Interactive Live Streaming:

Real-Time Interaction:
VideoSDK enables viewers to actively engage with the content and each other during live streams. This includes features like chat, live polling, Q&A sessions. Thus, promoting a dynamic and interactive environment.
Flexible Layouts:
Developers can customize the interactive livestream layout according to their needs, choosing from prebuilt layouts or creating their own templates.
Adaptive Streaming:
VideoSDK supports adaptive bitrate streaming, ensuring optimal video quality for all viewers regardless of their network conditions. This feature enhances the overall user experience by and maintaining high-quality playback.
Seamless Integration:
With simple API calls like startHls() and stopHls(), integrating interactive live streaming into your React application is straightforward and easy.
Scalability:
VideoSDK is designed to handle large audiences, making it suitable for events with thousands of participants. The platform’s infrastructure ensures reliable performance even during peak usage times.

Defining User Roles

For our application , there will be two types of users :

Speaker : They are the ones that creates meeting or enter meeting id and click on button Join as Host. they have all the media controls i.e they can toggle webcam and mic. They can even start HLS stream.
Viewer : They are the ones that enter the meeting id and click on button Join as Viewer . They will not have any media controls, they will just watch VideoSDK HLS Stream, which was started by the speaker.

Guide to building your own live streaming application

Prerequisites :

Before you get started, ensure you have the following prerequisites:

A basic understanding of React and Hooks(useState, useRef, useEffect)
Have node.js and npm installed
An active Video SDK account (you can sign up for free).

Step 1 : Getting Started

1) Create new React app

 $ npx create-react-app videosdk-rtc-react-app
 $ cd videosdk-rtc-react-app

2) Install VideoSDK and Dependencies

$ npm install @videosdk.live/react-sdk react-player hls.js

3) Structure of the Project

 root/
 ├── node_modules/
 ├── public/
 ├── src/
 │   ├── API.js
 │   ├── App.js
 │   ├── index.js
 │   ├── components/
 │   │   ├── Controls.js
 │   │   ├── JoinScreen.js
 │   │   ├── Container.js
 │   │   ├── ParticipantView.js
 │   │   ├── SpeakerView.js
 │   │   └── ViewerView.js
 ├── package.json

Step 2 : Set Up your API token

To create a new meeting , an API call will be required. You can either use temporary auth-token from user dashboard or go for the auth-Token generated by your servers. We would recommend the later.

Create a new file named api.js in the src directory and add the following code :

// Auth token we will use to generate a meeting and connect to it
export const authToken = "<Generated-from-dashbaord>";
// API call to create meeting
export const createMeeting = async ({ token }) => {
  const res = await fetch(`https://api.videosdk.live/v2/rooms`, {
    method: "POST",
    headers: {
      authorization: `${authToken}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({}),
  });
  //Destructuring the roomId from the response
  const { roomId } = await res.json();
  return roomId;
};

Step 3 : Main App Component

import "./App.css";
import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  MeetingProvider,
  MeetingConsumer,
  useMeeting,
  useParticipant,
  Constants,
} from "@videosdk.live/react-sdk";

import { authToken, createMeeting } from "./API";
import ReactPlayer from "react-player";

function App() {
  const [meetingId, setMeetingId] = useState(null);

  //State to handle the mode of the participant i.e. CONFERENCE or VIEWER
  const [mode, setMode] = useState("CONFERENCE");

  //You have to get the MeetingId from the API created earlier
  const getMeetingAndToken = async (id) => {
    const meetingId =
      id == null ? await createMeeting({ token: authToken }) : id;
    setMeetingId(meetingId);
  };

  const onMeetingLeave = () => {
    setMeetingId(null);
  };

  return authToken && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: true,
        name: "C.V. Raman",
        //This will be the mode of the participant CONFERENCE or VIEWER
        mode: mode,
      }}
      token={authToken}
    >
      <MeetingConsumer>
        {() => (
          <Container meetingId={meetingId} onMeetingLeave={onMeetingLeave} />
        )}
      </MeetingConsumer>
    </MeetingProvider>
  ) : (
    <JoinScreen getMeetingAndToken={getMeetingAndToken} setMode={setMode} />
  );
}

Step 4 : Join Screen Component

JoinScreen is the first screen that will appear in the Ui once you start your application. You can create a new meeting in this component or even enter an existing meeting with meetingId.

function JoinScreen({ getMeetingAndToken, setMode }) {
  const [meetingId, setMeetingId] = useState(null);
  //Set the mode of joining participant and set the meeting id 
  const onClick = async (mode) => {
    setMode(mode);
    await getMeetingAndToken(meetingId);
  };
  return (
    <div className="container">
      <button onClick={() => onClick("CONFERENCE")}>Create Meeting</button>
      <br />
      <br />
      {" or "}
      <br />
      <br />
      <input
        type="text"
        placeholder="Enter Meeting Id"
        onChange={(e) => {
          setMeetingId(e.target.value);
        }}
      />
      <br />
      <br />
      <button onClick={() => onClick("CONFERENCE")}>Join as Host</button>
      {" | "}
      <button onClick={() => onClick("VIEWER")}>Join as Viewer</button>
    </div>
  );
}

Step 5 : Container Component

Next we will be diverted to Container page where meeting id will be displayed and to join the meeting , a button Join will be there.

function Container(props) {
  const [joined, setJoined] = useState(null);

  //Get the method which will be used to join the meeting.
  const { join } = useMeeting();
  const mMeeting = useMeeting({
    //callback for when a meeting is joined successfully
    onMeetingJoined: () => {
      setJoined("JOINED");
    },

    //callback for when a meeting is left
    onMeetingLeft: () => {
      props.onMeetingLeave();
    },

    //callback for when there is an error in a meeting
    onError: (error) => {
      alert(error.message);
    },
  });
  const joinMeeting = () => {
    setJoined("JOINING");
    join();
  };

  return (
    <div className="container">
      <h3>Meeting Id: {props.meetingId}</h3>
      {joined && joined == "JOINED" ? (
        mMeeting.localParticipant.mode == Constants.modes.CONFERENCE ? (
          <SpeakerView />
        ) : mMeeting.localParticipant.mode == Constants.modes.VIEWER ? (
          <ViewerView />
        ) : null
      ) : joined && joined == "JOINING" ? (
        <p>Joining the meeting...</p>
      ) : (
        <button onClick={joinMeeting}>Join</button>
      )}
    </div>
  );
}

Step 6 : Implement SpeakerView

On clicking on Join button, the speaker will enter the meeting where he can manage features such as leave, mute, unmute, start/stop HLS and webcam.

SpeakerView.js

 function SpeakerView() {
   //Get the participants and HLS State from useMeeting
   const { participants, hlsState } = useMeeting();

   //Filtering the host/speakers from all the participants
   const speakers = useMemo(() => {
     const speakerParticipants = [...participants.values()].filter(
       (participant) => {
         return participant.mode == Constants.modes.CONFERENCE;
       }
     );
     return speakerParticipants;
   }, [participants]);
   return (
     <div>
       <p>Current HLS State: {hlsState}</p>
       {/* Controls for the meeting */}
       <Controls />

       {/* Rendring all the HOST participants */}
       {speakers.map((participant) => (
         <ParticipantView participantId={participant.id} key={participant.id} />
       ))}
     </div>
   );
 }

Implement controls that allow the speaker to start and stop live streaming

 function Controls() {
   const { leave, toggleMic, toggleWebcam, startHls, stopHls } = useMeeting();
   return (
     <div>
       <button onClick={() => leave()}>Leave</button>
       &emsp;|&emsp;
       <button onClick={() => toggleMic()}>toggleMic</button>
       <button onClick={() => toggleWebcam()}>toggleWebcam</button>
       &emsp;|&emsp;
       <button
         onClick={() => {
           //Start the HLS in SPOTLIGHT mode and PIN as
           //priority so only speakers are visible in the HLS stream
           startHls({
             layout: {
               type: "SPOTLIGHT",
               priority: "PIN",
               gridSize: "20",
             },
             theme: "LIGHT",
             mode: "video-and-audio",
             quality: "high",
             orientation: "landscape",
           });
         }}
       >
         Start HLS
       </button>
       <button onClick={() => stopHls()}>Stop HLS</button>
     </div>
   );
 }

ParticipantView.js

 function ParticipantView(props) {
   const micRef = useRef(null);
   const { webcamStream, micStream, webcamOn, micOn, isLocal, displayName } =
     useParticipant(props.participantId);

   const videoStream = useMemo(() => {
     if (webcamOn && webcamStream) {
       const mediaStream = new MediaStream();
       mediaStream.addTrack(webcamStream.track);
       return mediaStream;
     }
   }, [webcamStream, webcamOn]);

   //Playing the audio in the <audio>
   useEffect(() => {
     if (micRef.current) {
       if (micOn && micStream) {
         const mediaStream = new MediaStream();
         mediaStream.addTrack(micStream.track);

         micRef.current.srcObject = mediaStream;
         micRef.current
           .play()
           .catch((error) =>
             console.error("videoElem.current.play() failed", error)
           );
       } else {
         micRef.current.srcObject = null;
       }
     }
   }, [micStream, micOn]);

   return (
     <div>
       <p>
         Participant: {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}
         {micOn ? "ON" : "OFF"}
       </p>
       <audio ref={micRef} autoPlay playsInline muted={isLocal} />
       {webcamOn && (
         <ReactPlayer
           //
           playsinline // extremely crucial prop
           pip={false}
           light={false}
           controls={false}
           muted={true}
           playing={true}
           //
           url={videoStream}
           //
           height={"300px"}
           width={"300px"}
           onError={(err) => {
             console.log(err, "participant video error");
           }}
         />
       )}
     </div>
   );
 }

Step 7 : Implement ViewerView

Viewer can only join the meeting when the HOST will start the HLS Player

function ViewerView() {
  // States to store downstream url and current HLS state
  const playerRef = useRef(null);
  //Getting the hlsUrls
  const { hlsUrls, hlsState } = useMeeting();

  //Playing the HLS stream when the playbackHlsUrl is present and it is playable
  useEffect(() => {
    if (hlsUrls.playbackHlsUrl && hlsState == "HLS_PLAYABLE") {
      if (Hls.isSupported()) {
        const hls = new Hls({
          maxLoadingDelay: 1, // max video loading delay used in automatic start level selection
          defaultAudioCodec: "mp4a.40.2", // default audio codec
          maxBufferLength: 0, // If buffer length is/becomes less than this value, a new fragment will be loaded
          maxMaxBufferLength: 1, // Hls.js will never exceed this value
          startLevel: 0, // Start playback at the lowest quality level
          startPosition: -1, // set -1 playback will start from intialtime = 0
          maxBufferHole: 0.001, // 'Maximum' inter-fragment buffer hole tolerance that hls.js can cope with when searching for the next fragment to load.
          highBufferWatchdogPeriod: 0, // if media element is expected to play and if currentTime has not moved for more than highBufferWatchdogPeriod and if there are more than maxBufferHole seconds buffered upfront, hls.js will jump buffer gaps, or try to nudge playhead to recover playback.
          nudgeOffset: 0.05, // In case playback continues to stall after first playhead nudging, currentTime will be nudged evenmore following nudgeOffset to try to restore playback. media.currentTime += (nb nudge retry -1)*nudgeOffset
          nudgeMaxRetry: 1, // Max nb of nudge retries before hls.js raise a fatal BUFFER_STALLED_ERROR
          maxFragLookUpTolerance: 0.1, // This tolerance factor is used during fragment lookup.
          liveSyncDurationCount: 1, // if set to 3, playback will start from fragment N-3, N being the last fragment of the live playlist
          abrEwmaFastLive: 1, // Fast bitrate Exponential moving average half-life, used to compute average bitrate for Live streams.
          abrEwmaSlowLive: 3, // Slow bitrate Exponential moving average half-life, used to compute average bitrate for Live streams.
          abrEwmaFastVoD: 1, // Fast bitrate Exponential moving average half-life, used to compute average bitrate for VoD streams
          abrEwmaSlowVoD: 3, // Slow bitrate Exponential moving average half-life, used to compute average bitrate for VoD streams
          maxStarvationDelay: 1, // ABR algorithm will always try to choose a quality level that should avoid rebuffering
        });

        let player = document.querySelector("#hlsPlayer");

        hls.loadSource(hlsUrls.playbackHlsUrl);
        hls.attachMedia(player);
      } else {
        if (typeof playerRef.current?.play === "function") {
          playerRef.current.src = hlsUrls.playbackHlsUrl;
          playerRef.current.play();
        }
      }
    }
  }, [hlsUrls, hlsState, playerRef.current]);

  return (
    <div>
      {/* Showing message if HLS is not started or is stopped by HOST */}
      {hlsState != "HLS_PLAYABLE" ? (
        <div>
          <p>HLS has not started yet or is stopped</p>
        </div>
      ) : (
        hlsState == "HLS_PLAYABLE" && (
          <div>
            <video
              ref={playerRef}
              id="hlsPlayer"
              autoPlay={true}
              controls
              style={{ width: "100%", height: "100%" }}
              playsinline
              playsInline
              muted={true}
              playing
              onError={(err) => {
                console.log(err, "hls video error");
              }}
            ></video>
          </div>
        )
      )}
    </div>
  );
}

Step 9: Run Your Application

Now that everything is set up, you can run your application using:

$ npm start

Open your browser and navigate to http://localhost:3000. You should see your application running with options to create or join a meeting.

That’s a Wrap

Bingo!! You have successfully integrated live streaming feature using videoSDK in your React application.

Now that you know how easy it is to use VideoSDK , we leave you to your creativity and skills of how amazing you build your product.

Happy Hacking!

Build a Collaborative Meeting App in React: Adding Whiteboard and Chat Features

Riya Chudasama — Fri, 24 Jan 2025 12:18:43 +0000

Introduction

As the demand for virtual communication has skyrocketed in recent years, simply offering audio-video conferencing and live streaming is no longer enough. Users now expect features that enhance collaboration and interactivity, making applications more versatile and effective. Collaboration lies at the heart of effective communication, whether it's for remote teams working on a project, educators engaging with students, or friends connecting over shared interests.

Adding a whiteboard and chat system to a video call application fosters collaboration, enabling users to brainstorm ideas, annotate lessons, and share concepts visually in real-time, thus increasing productivity. In this blog, we’ll explore how to integrate a whiteboard and a chat system into a React-based meeting application. If you’re new to building a meeting application, refer to our step-by-step guide on creating a React-based meeting app using VideoSDK.

Use Cases for Whiteboard and Chat in Meeting Applications

Remote Collaboration: Teams can brainstorm, sketch ideas, and work on visual concepts together in real-time.
Education: Teachers can annotate lessons, share diagrams, and encourage student participation.
Creative Discussions: Designers, developers, or writers can map out ideas and get instant feedback.
Social Engagement: Users can chat and draw for interactive dis cussions, games, or creative storytelling.

Prerequisites

Before you get started , ensure you have the following prerequisites :

VideoSDK Developer Account ( Not having one, follow VideoSDK Dashboard )
Basic understanding of React & Hooks (useState, useRef, useEffect)
Have Node and NPM installed on your device.

Step 1 : Setting Up Your React Environment

1. Setting Up the Meeting Application :

You can either build the Meeting application in react by following my I built a video calling app in just 10 mins! blog tutorial or you can simply clone the below repository.

  $ git clone https://github.com/riyachudasama23/VideoStream.git
  $ cd VideoStream
  $ npm install

2. Setting Up the API Key

To create a new meeting , an API call will be required. You can either use temporary auth-token from user dashboard or go for the auth-Token generated by your servers. We would recommend the later. Paste this token in API.js file.

You need to create a VideoSDK Developer account to get access to the API Token

3. Structure of the project

   root/
   ├── node_modules/
   ├── public/
   ├── src/
   │   ├── API.js
   │   ├── App.jsx
   │   ├── index.js
   │   ├── components/
   │   │   ├── Controls.jsx
   │   │   ├── JoinScreen.jsx
   │   │   ├── MeetingView.jsx
   │   │   ├── ParticipantView.jsx
   │   │   ├── Whiteboard.jsx
   │   │   ├── ChatView.jsx
   ├── package.json

Step 2 : Adding the WhiteBoard Feature

VideoSDK simplifies adding a whiteboard to your application by providing the useWhiteboard hook. This hook offers methods like startWhiteboard and stopWhiteboard to control the whiteboard, as well as whiteboardUrl to render the whiteboard interface. With these tools, you can quickly integrate a collaborative whiteboard into your application.

import { useWhiteboard } from "@videosdk.live/react-sdk";

export default function Whiteboard() {
    const { startWhiteboard, stopWhiteboard, whiteboardUrl } = useWhiteboard();

    return (
      <div>
        {!whiteboardUrl ? (
          <button onClick={startWhiteboard}>Start Whiteboard</button>
        ) : (
          <>
            <button onClick={stopWhiteboard}>Stop Whiteboard</button>
            <iframe src={whiteboardUrl} width="800" height="600"></iframe>
          </>
        )}
      </div>
    );
  }

Step 3 : Adding Chat Feature

For communication or messaging among participants , VideoSDK provides usePubSub hook, which utilizes the Publish-Subscribe mechanism. This mechanism can be used to develop a wide variety of functionalities. For example, participants could use it to send chat messages to each other, share files or other media, or even trigger actions like muting or unmuting audio or video.

Group Chat :

Initially, a topic is selected to which all the participants will publish and subscribe. In the following code CHAT is used as a topic. Then, obtain publish() method and messages array from usePubSub hook. All the messages entered will be stored in messages array and by mapping through the array we can easily display the message.

 import { usePubSub } from "@videosdk.live/react-sdk";
 import { useState, useEffect } from "react";

 function ChatView() {
     // destructure publish method from usePubSub hook
     const { publish, messages } = usePubSub("CHAT");

     // State to store the user typed message
     const [message, setMessage] = useState("");

     const handleSendMessage = () => {
       // Sending the Message using the publish method
       publish(message, { persist: true });
       // Clearing the message input
       setMessage("");
     };

     return (
       <>
         <div>
             <p>Messages: </p>
             {messages.map((msg, index) => {
                 return (
                 <p key={index}>
                     {msg.senderName} says: {msg.message}
                 </p>
                 );
             })}
         </div>
         <input
           value={message}
           onChange={(e) => {
             setMessage(e.target.value);
           }}
         />
         <button onClick={handleSendMessage}>Send Message</button>
       </>
     );
 }

 export default ChatView;

Private Chat :

To convert the group chat into private chat between two participants , you need to set sendOnly property.

 function ChatView() {
   // destructure publish method from usePubSub hook
   const { publish, messages } = usePubSub("CHAT");

   // State to store the user typed message
   const [message, setMessage] = useState("");

   const handleSendMessage = () => {
     // Sending the Message using the publish method
     // Pass the participantId of the participant to whom you want to send the message.
     publish(message, { persist: true , sendOnly: ['XYZ'] });
     // Clearing the message input
     setMessage("");
   };

   //...
 }

Display Latest Message Notification :

When a new message arrives , you can show it as notification. In the following code onMessageReceived callback is used to display an alert with the sender's name and message content.

function ChatView() {
  // destructure publish method from usePubSub hook
  const { publish, messages } = usePubSub("CHAT", {
    onMessageReceived: (message)=>{
      window.alert(message.senderName + "says" + message.message);
    }
  });
  const [message, setMessage] = useState("");
  const handleSendMessage = () => {
    ...
  };
  return <>...</>;
}

Download Chat Messages

All the messages from PubSub published with persist : true can be downloaded as an .csv file. This file will be accessible in the VideoSDK dashboard and through the Sessions API.

Conclusion

To wrap up, adding chat functionality to your VideoSDK React meeting app using the usePubSub hook is a simple yet powerful way to enhance communication among participants. With the Publish-Subscribe mechanism, you can effortlessly manage real-time message exchanges, creating a smooth and interactive group chat experience. This approach opens the door for more features, like sharing files or triggering actions, making your app even more dynamic. Whether you're building for small teams or large groups, this setup provides a solid foundation for collaboration in your meetings.

Feel Free to take this implementation further by adding more features to suit your app's needs. For example you can add screen sharing , recording , transcription , summary features. Add interactive features like live polling , question and answer sessions or sending virtual gifts.

Happy Hacking :)

I built a video calling app in just 10 mins!

Riya Chudasama — Fri, 24 Jan 2025 11:48:29 +0000

Hey community!

In this blog, I am going to reveal about the secret behind how i created an audio video conferencing application in react in just 10 minutes! So are you ready? Let's dive in

Few days back i was browsing the web in search of an SDK that offers video calling feature to integrate in my react application. That's when i came across VideoSDK.

Now you might be wondering there are so many SDKs available then why did i choose VideoSDK?

What Makes VideoSDK Exceptional for Audio and Video Conferencing?

Low Latency: VideoSDK delivers exceptional low latency. The lowest it can reach as low as 12 milliseconds and average latency can vary around less than 99 milliseconds end-to-end in optimal conditions.
Adaptive MultiStreaming: The platform automatically adjusts video quality based on your internet speed. Thus, your video stays smooth and clear, even if your network connection isn’t perfect..
Extensive Customization: VideoSDK allows developers to fully customize the user interface and features, enabling tailored experiences that align with specific application branding and functi onality.
Cross-Platform Compatibility: With support for web, mobile, and desktop applications, VideoSDK ensures users can connect easily across various devices, thus enhancing accessibility and usability.

Key Concepts :

Before you get your hands dirty with coding, it’s essential to understand the following core concepts:

MeetingProvider : It is fundamental component in VideoSDK react library that initializes the meeting context and allows you to share data related to meeting throughout your application.
MeetingConsumer : It is a component of VideoSDK React library that listen for the changes in the meeting state and re-render whenever data from MeetingProvider updates.
useMeeting Hook: Hook that provides functionalities such as joining, leaving, toggling mic/webcam, and sharing the screen.
useParticipant Hook: Allows managing and retrieving data of in dividual participants.

Here is the step by step process that i followed to integrate VideoSDK's audio video conferencing feature into my react application :

Prerequisites :

Before you get started , ensure you have the following prerequisites :

VideoSDK Developer Account ( Not having one, follow VideoSDK Dashboard )
Basic understanding of React & Hooks (useState, useRef, useEffect)
Have Node and NPM installed on your device.

Step 1 : Setting Up Your React Environment

1. Create new React App :

 $ npx create-vite@latest videosdk-rtc-react-app --template react 
 $ cd videosdk-rtc-react-app
 $ npm install

2. Install VideoSDK and dependencies

 $ npm install "@videosdk.live/react-sdk"

 //For the Participants Video
 $ npm install "react-player"

3. Structure of the project

  root/
  ├── node_modules/
  ├── public/
  ├── src/
  │   ├── API.js
  │   ├── App.js
  │   ├── index.js
  │   ├── components/
  │   │   ├── Controls.js
  │   │   ├── JoinScreen.js
  │   │   ├── Container.js
  │   │   ├── ParticipantView.js
  ├── package.json

Step 2 : Retrieving Your VideoSDK API Key

To create a new meeting , an API call will be required. You can either use temporary auth-token from user dashboard or go for the auth-Token generated by your servers. We would recommend the later.

Create a new file named API.js in the src directory and add the following code :

// Auth token we will use to generate a meeting and connect to it
export const authToken = "<Generated-from-dashbaord>";
// API call to create meeting
export const createMeeting = async ({ token }) => {
  const res = await fetch(`https://api.videosdk.live/v2/rooms`, {
    method: "POST",
    headers: {
      authorization: `${authToken}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({}),
  });
  //Destructuring the roomId from the response
  const { roomId } = await res.json();
  return roomId;
};

Step 3 : Main App Component

import "./App.css";
import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  MeetingProvider,
  MeetingConsumer,
  useMeeting,
  useParticipant,
} from "@videosdk.live/react-sdk";

import { authToken, createMeeting } from "./API";
import Container from "./components/Container";
import JoinScreen from "./components/JoinScreen";

function App() {
  const [meetingId, setMeetingId] = useState(null);

  //You have to get the MeetingId from the API created earlier
  const getMeetingAndToken = async (id) => {
    const meetingId =
      id == null ? await createMeeting({ token: authToken }) : id;
    setMeetingId(meetingId);
  };

  const onMeetingLeave = () => {
    setMeetingId(null);
  };

  return authToken && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: true,
        name: "Riya Chudasama",
      }}
      token={authToken}
    >
      <Container meetingId={meetingId} onMeetingLeave={onMeetingLeave} />
    </MeetingProvider>
  ) : (
    <JoinScreen getMeetingAndToken={getMeetingAndToken} />
  );
}

export default App;

Step 4 : Join Screen Component

JoinScreen is the first screen that will appear in the UI once you start your application. You can create a new meeting in this component or even enter an existing meeting with meetingId.

import { useState } from "react";

function JoinScreen({ getMeetingAndToken }) {
  const [meetingId, setMeetingId] = useState(null);

  const onClick = async () => {
    await getMeetingAndToken(meetingId);
  };
  return (
    <div>
      <input
        type="text"
        placeholder="Enter Meeting Id"
        onChange={(e) => {
          setMeetingId(e.target.value);
        }}
      />
      <button onClick={onClick}>Join</button>
      {" or "}
      <button onClick={onClick}>Create Meeting</button>
    </div>
  );
}

export default JoinScreen;

Step 5 : Implement the Meeting Component

Next we will be diverted to Container page where meeting id along with Join button will be displayed. You will join the meeting once you click on the button.

Container.jsx

 import React, { useState } from "react";
 import { useMeeting, Constants } from "@videosdk.live/react-sdk";
 import ParticipantView from "./ParticipantView";
 import Controls from "./Controls";

 export default function Container(props) {
   const [joined, setJoined] = useState(null);

   //Get the method which will be used to join the meeting.
   //We will also get the participants list to display all participants
   const { join, participants, enableScreenShare, disableScreenShare } =
     useMeeting({
       //callback for when meeting is joined successfully
       onMeetingJoined: () => {
         setJoined("JOINED");
       },
       //callback for when meeting is left
       onMeetingLeft: () => {
         props.onMeetingLeave();
         setJoined(null);
       },
     });
   const joinMeeting = () => {
     setJoined("JOINING");
     join();
   };

   const handleStartScreenShare = () => {
     enableScreenShare(); // Start screen sharing
   };

   const handleStopScreenShare = () => {
     disableScreenShare(); // Stop screen sharing
   };

   return (
     <div className="container">
       <h3>Meeting Id: {props.meetingId}</h3>
       {joined && joined == "JOINED" ? (
         <div>
           <Controls
             onStartScreenShare={handleStartScreenShare}
             onStopScreenShare={handleStopScreenShare}
           />
           //For rendering all the participants in the meeting
           {[...participants.keys()].map((participantId) => (
             <ParticipantView
               participantId={participantId}
               key={participantId}
             />
           ))}
         </div>
       ) : joined && joined == "JOINING" ? (
         <p>Joining the meeting...</p>
       ) : (
         <button onClick={joinMeeting}>Join</button>
       )}
     </div>
   );
 }

Controls.jsx

This component gives users access to control their webcam, microphones and allow them to leave the meeting.

 import React from "react";
 import { useMeeting } from "@videosdk.live/react-sdk";

 function Controls({ onStartScreenShare, onStopScreenShare }) {
   const { leave, toggleMic, toggleWebcam } = useMeeting();
   return (
     <div>
       <button onClick={() => leave()}>Leave</button>
       <button onClick={() => toggleMic()}>toggleMic</button>
       <button onClick={() => toggleWebcam()}>toggleWebcam</button>
       <button onClick={onStartScreenShare}>Start Screen Share</button>
       <button onClick={onStopScreenShare}>Stop Screen Share</button>
     </div>
   );
 }

 export default Controls;

ParticipantView.jsx

 import React, { useEffect, useMemo, useRef } from "react";
 import { useParticipant } from "@videosdk.live/react-sdk";
 import ReactPlayer from "react-player";

 function ParticipantView(props) {
   const micRef = useRef(null);
   const {
     webcamStream,
     micStream,
     webcamOn,
     micOn,
     isLocal,
     displayName,
     screenShareStream,
   } = useParticipant(props.participantId);

   const videoStream = useMemo(() => {
     if (webcamOn && webcamStream) {
       const mediaStream = new MediaStream();
       mediaStream.addTrack(webcamStream.track);
       return mediaStream;
     }
   }, [webcamStream, webcamOn]);

   //Playing the audio in the <audio>
   useEffect(() => {
     if (micRef.current) {
       if (micOn && micStream) {
         const mediaStream = new MediaStream();
         mediaStream.addTrack(micStream.track);

         micRef.current.srcObject = mediaStream;
         micRef.current
           .play()
           .catch((error) =>
             console.error("videoElem.current.play() failed", error)
           );
       } else {
         micRef.current.srcObject = null;
       }
     }
   }, [micStream, micOn]);

   return (
     <div>
       <p>
         Participant: {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}
         {micOn ? "ON" : "OFF"}
       </p>
       <audio ref={micRef} autoPlay playsInline muted={isLocal} />
       {webcamOn && (
         <ReactPlayer
           //
           playsinline // extremely crucial prop
           pip={false}
           light={false}
           controls={false}
           muted={true}
           playing={true}
           //
           url={videoStream}
           //
           height={"300px"}
           width={"300px"}
           onError={(err) => {
             console.log(err, "participant video error");
           }}
         />
       )}

       {/* Render screen share stream if available */}
       {screenShareStream && (
         <ReactPlayer
           playsinline // extremely crucial prop
           pip={false}
           light={false}
           controls={false}
           muted={true} // You may want to adjust this based on your needs
           playing={true}
           url={screenShareStream} // Use the screen share stream here
           height={"300px"}
           width={"300px"}
           onError={(err) => {
             console.log(err, "screen share error");
           }}
         />
       )}
     </div>
   );
 }

 export default ParticipantView;

Step 6 : Running the application

$ npm run dev

Open localhost:3000 in your browser. Enter a meeting ID and join the meeting.

Congrtulations! With just a few steps, we’ve created a basic meeting app using React and VideoSDK. From here, you can enhance your app by adding features like chat, recording, or breakout rooms. VideoSDK’s comprehensive documentation will guide you as you build advanced functionalities.

Happy coding :)