How to add a video huddle to your web application

In this tutorial, we will guide you through integrating a video huddle feature into your JavaScript application using SuperViz. In this tutorial we will use react to build the application.

Video huddles are essential for real-time communication and collaboration, enabling users to interact via video conferencing directly within your application. This feature is perfect for remote teams, educational platforms, and any scenario where visual communication enhances collaboration. 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 huddles.

1. Create a New Project

First, create a new application using Vite with JavaScript.

1
npm create vite@latest video-huddle-app -- --template vanilla
2
cd video-huddle-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 huddle 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 huddle.

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, VideoHuddle, 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, VideoHuddle, 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);
5
  const [meetingStarted, setMeetingStarted] = useState(false);

Explanation:

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

4. Define Event Handlers

Create event handler functions to respond to video huddle 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
};
9

10
const onMeetingStarted = () => {
11
  setMeetingStarted(true);
12
};

Explanation:

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

5. Initialize Video Huddle

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 VideoHuddle({
19
      participantType: "host",
20
    });
21

22
    video.subscribe(VideoEvent.MEETING_STATE_UPDATE, onMeetingStateUpdate);
23
    video.subscribe(VideoEvent.MY_PARTICIPANT_JOINED, onMeetingStarted);
24
    video.subscribe(VideoEvent.MY_PARTICIPANT_LEFT, onParticipantLeft);
25

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

Explanation:

• createRoom: Creates a new SuperViz room with the specified configuration.
• VideoHuddle: Creates a video conference component, setting the participant type to 'host'.
• subscribe: Registers event handlers for various video huddle 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 huddle</div>
7
    ) : meetingStarted ? (
8
      <div className="text-lg font-semibold text-white">Content going here</div>
9
    ): (
10
      <button
11
        className="bg-[#6210cc] text-white px-5 py-3 text-xs rounded-lg"
12
        onClick={initialize}
13
      >
14
        START VIDEO CONFERENCE
15
      </button>
16
    )}
17
  </div>
18
);

Explanation:

• isLoading state: Shows a loading spinner when the huddle is loading.
• meetingEnded state: Shows a message when the meeting has ended.
• meetingStarted state: Shows the content of the application when the meeting has started.
• 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 huddle and invite other participants to join.

2. Test the Application

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

Summary

In this tutorial, we integrated a video huddle feature into a JavaScript application using SuperViz. We configured an application to handle video huddles, 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.