Beginner's Guide to VideoSDK Integration

If you’ve ever thought about adding video calls or live streaming to your app, you already know it’s not as simple as it looks. At first, it feels like, “All I need is a way for people to talk in real time.” But once you dive in, you realize how quickly things get complicated.

Servers, bandwidth, security, scaling it’s a deep rabbit hole. Unless you’re a giant like Zoom or Google, spending months (or even years) building everything from scratch just isn’t practical.

That’s where VideoSDK.live comes to the rescue. It’s like someone else has already handled the heavy lifting and now hands you a ready-to-use toolbox. With just a few lines of code, you can add video calls, audio chats, or even AI-driven voice bots into your app without breaking a sweat.

Let’s break down what it is, why it’s a game-changer, and how you can easily integrate it—even if you’re not a backend expert.

🌟 What is VideoSDK?

VideoSDK is a developer-friendly platform that offers ready-to-use tools and fast, reliable infrastructure to build video, audio, and AI-powered communication features.

Forget about reinventing the wheel you can plug it into your app with clean, easy-to-read code and get things running in no time.

🚀 Why VideoSDK makes building communication features a breeze

Add smooth, high-quality video calls like Zoom without the headache.
Set up interactive live streams like YouTube Live instantly.
Reach users globally with servers spread across the world, ensuring minimal lag.
Keep conversations private with secure, encrypted connections.
Scale effortlessly whether a few users or thousands, it just works.

The best part? You don’t need to worry about the complicated backend stuff. VideoSDK handles latency, scaling, and security, so you can focus on creating awesome user experiences.

✅ Prerequisites

Before we jump into integrating VideoSDK, make sure you have the following in place:

VideoSDK Developer Account
- If you don’t have one yet, sign up here: VideoSDK Dashboard
Basic Understanding of React
- Since we’ll be using React for integration, a beginner-level understanding is enough.
- If you’re new to React, check out this guide: React Official Docs
Node.js and NPM Installed
- You’ll need Node.js (which comes with npm) to run React apps.
- Download Node.js
Basic Understanding of React Hooks
- We’ll use hooks like useState, useRef, and useEffect.
- React Hooks Guide

IN this tutorial, we will discuss two features, ie, video call meeting and live streaming interaction

Go to videosdk.live
Create a free account.
Inside your dashboard, grab your API Key and Secret.

Step 2: Create new react app

npx create-react-app videosdk-rtc-react-app

Step 3: Install the sdk

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

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

Step 4: Project structure (for livestream and video meeting feature)

src/
│── components/
│   │── meeting/
│   │   ├── JoinScreen.jsx
│   │   ├── MeetingView.jsx
│   │   ├── ParticipantView.jsx
│   │   ├── Controls.jsx
│   │
│   │── livestream/
│   │   ├── JoinView.jsx
│   │   ├── LSContainer.jsx
│   │   ├── StreamView.jsx
│   │   ├── Participant.jsx
│   │   ├── LSControls.jsx
│
│── App.jsx
│── API.js
│── App.css

Step 5: Open postman

Open Postman and create a new request.

Step 6: Step 3: Configure the Request

Method: POST
URL: https://api.videosdk.live/v2/rooms

🔹 Step 7: Send Request

Hit Send.
If successful, you’ll get a response like:

{
  "roomId": "y6vt-4j0d-rqnp",
  "customRoomId": null,
  "createdAt": "2025-09-06T10:22:41.581Z"
}

Copy the roomId You’ll use this later to join/start the meeting in your React app.

Step 8 : Implement app.jsx

import "./App.css";
import React, { useState } from "react";
import {
  MeetingProvider,
  MeetingConsumer,
} from "@videosdk.live/react-sdk";
import { authToken, createMeeting } from "./Api";

import JoinScreen from "./components/meeting/JoinScreen";
import MeetingView from "./components/meeting/MeetingView";

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

  const getMeetingAndToken = async (id) => {
    const newMeetingId = id ? id : await createMeeting({ token: authToken });
    setMeetingId(newMeetingId);
  };

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

  return authToken && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: true,
        name: "C.V. Raman",
      }}
      token={authToken}
    >
      <MeetingConsumer>
        {() => (
          <MeetingView meetingId={meetingId} onMeetingLeave={onMeetingLeave} />
        )}
      </MeetingConsumer>
    </MeetingProvider>
  ) : (
    <JoinScreen getMeetingAndToken={getMeetingAndToken} />
  );
}

export default App;

Step 9 : Implement JoinScreen.jsx

import React, { useState } from "react";

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

  const handleJoinOrCreate = async () => {
    await getMeetingAndToken(meetingId);
  };

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

export default JoinScreen;

Step 9: Implement ParticipantView.jsx

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

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

  useEffect(() => {
    if (micRef.current) {
      if (micOn && micStream) {
        const mediaStream = new MediaStream([micStream.track]);
        micRef.current.srcObject = mediaStream;

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

  return (
    <div key={participantId}>
      <p>
        Participant: {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}
        {micOn ? "ON" : "OFF"}
      </p>
      <audio ref={micRef} autoPlay muted={isLocal} />
      {webcamOn && (
        <VideoPlayer
          participantId={participantId}
          type="video"
          containerStyle={{ height: "200px", width: "300px" }}
          className="h-full"
          classNameVideo="h-full"
        />
      )}
    </div>
  );
}

export default ParticipantView;

Step 10 : implement MeetingView.jsx

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

function MeetingView({ meetingId, onMeetingLeave }) {
  const [joined, setJoined] = useState(null);
  const { join, participants } = useMeeting({
    onMeetingJoined: () => setJoined("JOINED"),
    onMeetingLeft: onMeetingLeave,
  });

  const joinMeeting = () => {
    setJoined("JOINING");
    join();
  };

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

export default MeetingView;

Step 10 : Implement Controls.jsx

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

function Controls() {
  const { leave, toggleMic, toggleWebcam } = useMeeting();

  return (
    <div>
      <button onClick={leave}>Leave</button>
      <button onClick={toggleMic}>Toggle Mic</button>
      <button onClick={toggleWebcam}>Toggle Webcam</button>
    </div>
  );
}

export default Controls;

Step 11: Now run the app using npm start and your video calling feature is ready

https://youtu.be/PRKjkriQK3s

Now we will implement the live streaming feature , you will just have to change the app.jsx and add new components in /livestream folder

App.jsx

"use client"

import "./App.css"
import { useState } from "react"
import { MeetingProvider, MeetingConsumer, Constants } from "@videosdk.live/react-sdk"
import { authToken, createMeeting, createStream } from "./Api"

import JoinScreen from "./components/meeting/JoinScreen"
import MeetingView from "./components/meeting/MeetingView"

import JoinView from "./components/livestream/JoinView"
import LSContainer from "./components/livestream/LSContainer"

function App() {
  const [type, setType] = useState(null) // meeting | livestream
  const [sessionId, setSessionId] = useState(null)
  const [mode, setMode] = useState(Constants.modes.SEND_AND_RECV)

  const getMeeting = async (id) => {
    const newMeetingId = id || (await createMeeting({ token: authToken }))
    setSessionId(newMeetingId)
    setType("meeting")
  }

  const getStream = async (id, mode) => {
    const newStreamId = id || (await createStream({ token: authToken }))
    setSessionId(newStreamId)
    setMode(mode)
    setType("livestream")
  }

  const onLeave = () => {
    setSessionId(null)
    setType(null)
  }

  if (!sessionId) {
    return (
      <div className="choice-container">
        <h2>Choose Mode</h2>
        <button onClick={() => setType("meeting")}>Meeting</button>
        <button onClick={() => setType("livestream")}>Live Stream</button>

        {type === "meeting" && <JoinScreen getMeetingAndToken={getMeeting} />}
        {type === "livestream" && <JoinView initializeStream={(id) => getStream(id, mode)} setMode={setMode} />}
      </div>
    )
  }

  return (
    <MeetingProvider
      config={{
        meetingId: sessionId,
        micEnabled: true,
        webcamEnabled: true,
        name: "John Doe",
        ...(type === "livestream" && { mode }),
      }}
      token={authToken}
    >
      <MeetingConsumer>
        {() =>
          type === "meeting" ? (
            <MeetingView meetingId={sessionId} onMeetingLeave={onLeave} />
          ) : (
            <LSContainer streamId={sessionId} onLeave={onLeave} />
          )
        }
      </MeetingConsumer>
    </MeetingProvider>
  )
}

export default App

2) JoinView.jsx

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

function JoinView({ initializeStream, setMode }) {
  const [streamId, setStreamId] = useState("");

  const handleAction = async (mode) => {
    setMode(mode);
    await initializeStream(streamId);
  };

  return (
    <div className="container">
      <button onClick={() => handleAction(Constants.modes.SEND_AND_RECV)}>
        Create Live Stream as Host
      </button>
      <input
        type="text"
        placeholder="Enter Stream Id"
        onChange={(e) => setStreamId(e.target.value)}
      />
      <button onClick={() => handleAction(Constants.modes.SEND_AND_RECV)}>
        Join as Host
      </button>
      <button onClick={() => handleAction(Constants.modes.RECV_ONLY)}>
        Join as Audience
      </button>
    </div>
  );
}

export default JoinView;

3) LSContainer.jsx

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

function LSContainer({ streamId, onLeave }) {
  const [joined, setJoined] = useState(false);

  const { join } = useMeeting({
    onMeetingJoined: () => setJoined(true),
    onMeetingLeft: onLeave,
    onError: (error) => alert(error.message),
  });

  return (
    <div className="container">
      <h3>Stream Id: {streamId}</h3>
      {joined ? <StreamView /> : <button onClick={join}>Join Stream</button>}
    </div>
  );
}

export default LSContainer;

4) lsControls.jsx

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

function LSControls() {
  const { leave, toggleMic, toggleWebcam, changeMode, meeting } = useMeeting();
  const currentMode = meeting.localParticipant.mode;

  return (
    <div className="controls">
      <button onClick={leave}>Leave</button>

      {currentMode === Constants.modes.SEND_AND_RECV && (
        <>
          <button onClick={toggleMic}>Toggle Mic</button>
          <button onClick={toggleWebcam}>Toggle Camera</button>
        </>
      )}

      <button
        onClick={() =>
          changeMode(
            currentMode === Constants.modes.SEND_AND_RECV
              ? Constants.modes.RECV_ONLY
              : Constants.modes.SEND_AND_RECV
          )
        }
      >
        {currentMode === Constants.modes.SEND_AND_RECV
          ? "Switch to Audience Mode"
          : "Switch to Host Mode"}
      </button>
    </div>
  );
}

export default LSControls;

5) Participant.jsx

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

function Participant({ participantId }) {
  const { webcamStream, micStream, webcamOn, micOn, isLocal, displayName } =
    useParticipant(participantId);

  const audioRef = useRef(null);
  const videoRef = useRef(null);

  const setupStream = (stream, ref, condition) => {
    if (ref.current && stream) {
      ref.current.srcObject = condition ? new MediaStream([stream.track]) : null;
      if (condition) {
        ref.current.play().catch(console.error);
      }
    }
  };

  useEffect(() => setupStream(micStream, audioRef, micOn), [micStream, micOn]);
  useEffect(
    () => setupStream(webcamStream, videoRef, webcamOn),
    [webcamStream, webcamOn]
  );

  return (
    <div>
      <p>
        {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}
        {micOn ? "ON" : "OFF"}
      </p>
      <audio ref={audioRef} autoPlay muted={isLocal} />
      {webcamOn && (
        <video
          ref={videoRef}
          autoPlay
          muted={isLocal}
          height="200"
          width="300"
        />
      )}
    </div>
  );
}

export default Participant;

6) StreamView.jsx

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

function StreamView() {
  const { participants } = useMeeting();

  return (
    <div>
      <LSControls />
      {[...participants.values()]
        .filter((p) => p.mode === Constants.modes.SEND_AND_RECV)
        .map((p) => (
          <Participant participantId={p.id} key={p.id} />
        ))}
    </div>
  );
}

export default StreamView;

And look your second feature live streaming is ready

https://youtu.be/AlFsB9oymEc

If you’ve made it this far, you probably already know how complicated it can be to build video calls or live streaming from scratch. But here’s the good news you don’t have to. VideoSDK takes care of the heavy lifting like scaling, security, and performance, so you can focus on building something that actually matters.

Whether you’re a developer or someone without much technical experience, the steps are simple and straightforward. All it takes is a free account, some basic setup, and you’re ready to add real-time video or audio features to your app.

So if you’ve been thinking, “How can I make my app more interactive and engaging?” this is your answer. Give VideoSDK a try, and you’ll be surprised how quickly you can go from idea to working product.

Resources

coding standalone example : https://github.com/charu1603/coding-example
github repo link : https://github.com/charu1603/Videosdk-integration

Start building today, and make your app come alive! 🚀

Beginner's Guide to VideoSDK Integration

🌟 What is VideoSDK?

✅ Prerequisites

Step 2: Create new react app

Step 3: Install the sdk

Step 4: Project structure (for livestream and video meeting feature)

Step 5: Open postman

Step 6: Step 3: Configure the Request

🔹 Step 7: Send Request

Step 8 : Implement app.jsx

Step 9 : Implement JoinScreen.jsx

Step 9: Implement ParticipantView.jsx

Step 10 : implement MeetingView.jsx

Step 10 : Implement Controls.jsx

Step 11: Now run the app using npm start and your video calling feature is ready

Now we will implement the live streaming feature , you will just have to change the app.jsx and add new components in /livestream folder

2) JoinView.jsx

3) LSContainer.jsx

4) lsControls.jsx

5) Participant.jsx

6) StreamView.jsx

Resources

Comments

More from this blog

Build video calling feature for your website in javascript for free : Beginners tutorial🙀🔥🤩

How to build mcp server from scratch for beginners 🥳🔥

Been building AI agents for a year… but this small script blew my mind🫨👏

How I Built a Custom AI Voice Agent by Combining Deepgram, OpenAI, and ElevenLabs

Command Palette

🌟 What is VideoSDK?

✅ Prerequisites

Step 1: Sign Up and Get Your Keys

Step 2: Create new react app

Step 3: Install the sdk

Step 4: Project structure (for livestream and video meeting feature)

Step 5: Open postman

Step 6: Step 3: Configure the Request

🔹 Step 7: Send Request

Step 8 : Implement app.jsx

Step 9 : Implement JoinScreen.jsx

Step 9: Implement ParticipantView.jsx

Step 10 : implement MeetingView.jsx

Step 10 : Implement Controls.jsx

Step 11: Now run the app using npm start and your video calling feature is ready

Now we will implement the live streaming feature , you will just have to change the app.jsx and add new components in /livestream folder

2) JoinView.jsx

3) LSContainer.jsx

4) lsControls.jsx

5) Participant.jsx

6) StreamView.jsx

Resources

Comments

More from this blog