How to implement video conferencing into your application

In this tutorial, we will guide you through integrating a video conference feature into your React application using SuperViz. Let's get started!

Step 1: Set Up Your JavaScript Application

To begin, you'll need to set up a new project where we will integrate the SuperViz SDK for video conferencing.

1. Create a New Project

First, create a new application using Vite with JavaScript.

1
npm create vite@latest video-conference-app -- --template vanilla
2
cd video-conference-app

2. Install SuperViz SDK

Next, install SuperViz, which will enable us to add video conferencing features to our application.

1
npm install @superviz/room @superviz/video react-icons uuid

• @superviz/room: The SuperViz core package that contains the room creation functionality.
• @superviz/video: Package that contains the video conference component.
• react-icons: A library for including icons in applications, used here for a loading spinner icon.
• uuid: A library for generating unique identifiers, used for the participant ID.

3. Configure tailwind

In this tutorial, we'll use the Tailwind css framework. First, install the tailwind package.

1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

We then need to configure the template path. Open tailwind.config.js in the root of the project and insert the following code.

1
/** @type {import('tailwindcss').Config} */
2
export default {
3
content: [
4
"./index.html",
5
"./src/**/*.{js,ts,jsx,tsx}",
6
],
7
theme: {
8
extend: {},
9
},
10
plugins: [],
11
}

Then we need to add the tailwind directives to the global CSS file. (src/style.css)

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

4. Set Up Environment Variables

Create a .env file in your project root and add your SuperViz developer key. This key will be used to authenticate your application with SuperViz services.

1
VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

Step 2: Implement the Main Application

In this step, we'll implement the main application logic to initialize the room and video conference.

1. Set Up the Main Component

Open src/main.js and set up the main application component using SuperViz to manage the collaborative environment.

1
import { createRoom } from "@superviz/room";
2
import { MeetingState, VideoConference, VideoEvent } from "@superviz/video";
3

4
import { useState } from "react";
5
import { ImSpinner2 } from "react-icons/im";
6
import { v4 as generateId } from 'uuid'

Explanation:

• createRoom: Function from SuperViz that creates a new room instance.
• MeetingState, VideoConference, VideoEvent: Components and enums from SuperViz for video conferencing.
• useState: React hook for state management (if using React).
• ImSpinner2: Loading spinner icon from react-icons.
• generateId: Function from uuid to generate unique IDs.

2. Define Constants

Define constant for the DEVELOPER_TOKEN.

1
const DEVELOPER_TOKEN = import.meta.env.VITE_SUPERVIZ_API_KEY;

Explanation:

• DEVELOPER_TOKEN: Retrieves the SuperViz API key from environment variables.

3. Create the App Component

Set up the main App component and initialize state variables.

1
const App = () => {
2
  // States ::
3
  const [isLoading, setIsLoading] = useState(false);
4
  const [meetingEnded, setMeetingEnded] = useState(false);

Explanation:

• isLoading: A state variable to track whether the conference is loading.
• meetingEnded: A state variable to track whether the meeting has ended.

4. Define Event Handlers

Create event handler functions to respond to video conference events.

1
const onMeetingStateUpdate = (meetingState: MeetingState) => {
2
  // settings mounted remove loading ::
3
  if (meetingState === MeetingState.MEETING_READY_TO_JOIN) setIsLoading(false);
4
};
5

6
const onParticipantLeft = () => {
7
  setMeetingEnded(true);
8
};

Explanation:

• onMeetingStateUpdate: Handles updates to the meeting state, turning off loading when ready.
• onParticipantLeft: Handles when a participant leaves the meeting.

5. Initialize Video Conference

Create an initialize function to set up the SuperViz environment.

1
const initialize = async () => {
2
  setIsLoading(true);
3

4
  try {
5
    const room = await createRoom({
6
      developerToken: DEVELOPER_TOKEN,
7
      roomId: "ROOM_ID",
8
      participant: {
9
        id: generateId(),
10
        name: " ",
11
      },
12
      group: {
13
        id: "GROUP_ID",
14
        name: "GROUP_NAME",
15
      },
16
    });
17

18
    const video = new VideoConference({
19
      participantType: "host",
20
      brand: {
21
        logoUrl: "https://docs.superviz.com/logo-white.svg",
22
      },
23
    });
24

25
    video.subscribe(VideoEvent.MEETING_STATE_UPDATE, onMeetingStateUpdate);
26
    video.subscribe(VideoEvent.MY_PARTICIPANT_LEFT, onParticipantLeft);
27

28
    room.addComponent(video);
29
  } catch (error) {
30
    console.error("Error initializing SuperViz Room:", error);
31
  }
32
};

Explanation:

• createRoom: Creates a new SuperViz room with the specified configuration.
• VideoConference: Creates a video conference component, setting the participant type to 'host'.
• subscribe: Registers event handlers for various video conference events.
• addComponent: Adds the video conference component to the SuperViz room.

6. Render the Application

Return the JSX structure for rendering the application.

1
return (
2
  <div className="h-screen flex items-center justify-center bg-[#121212]">
3
    {isLoading ? (
4
        <ImSpinner2 className="text-4xl text-white animate-spin" />
5
    ) : meetingEnded ? (
6
      <div className="text-lg font-semibold text-white">Thank you for joining the video conference</div>
7
    ) : (
8
      <button
9
        className="bg-[#6210cc] text-white px-5 py-3 text-xs rounded-lg"
10
        onClick={initialize}
11
      >
12
        START VIDEO CONFERENCE
13
      </button>
14
    )}
15
  </div>
16
);

Explanation:

• isLoading state: Shows a loading spinner when the conference is loading.
• meetingEnded state: Shows a message when the meeting has ended.
• button: Renders a button that calls the initialize function.

7. Export the Component

Export the App component as the default export.

1
export default App;

Step 3: Running the Application

1. Start the Application

To run your application, use the following command in your project directory:

1
npm run dev

This command will start the development server and open your application in the default web browser. You can initiate a video conference and invite other participants to join.

2. Test the Application

• Video Conference: Click the "START VIDEO CONFERENCE" button to start the video conference. Open the application in multiple browser windows or tabs to simulate multiple participants joining the conference.

Summary

In this tutorial, we integrated a video conference feature into a JavaScript application using SuperViz. We configured an application to handle video conferencing, enabling multiple users to join and participate in a video call seamlessly. This setup can be extended and customized to fit various scenarios where real-time communication and collaboration are required.

Feel free to explore the full code and further examples in the GitHub repository for more details.