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 web application using SuperViz. 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 React Application

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

1. Create a New React Project

First, create a new React application using Create React App with TypeScript.

1
npm create vite@latest video-huddle-app -- --template react-ts
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/sdk uuid react-icons

• @superviz/sdk: SDK for integrating real-time collaboration features, including video conferencing.
• uuid: A library for generating unique identifiers, useful for creating unique participant IDs.
• react-icons: A library for including icons in React applications, used here for a call button icon.

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/index.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 SuperViz and handle video conferencing.

1. Implement the App Component

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

1
import { useCallback, useEffect, useRef, useState } from "react";
2
import SuperVizRoom, { VideoConference, LauncherFacade } from '@superviz/sdk';
3
import { v4 as generateId } from 'uuid';
4
import { IoIosCall } from "react-icons/io";

Explanation:

• Imports: Import necessary components from React, SuperViz SDK, UUID, and React Icons for managing state, initializing SuperViz, and rendering the call button.

2. Define Constants

Define constants for the API key and room ID.

1
const apiKey = import.meta.env.VITE_SUPERVIZ_API_KEY as string;
2
const ROOM_ID = 'video-huddle';

Explanation:

• apiKey: Retrieves the SuperViz API key from environment variables.
• ROOM_ID: Defines the room ID for the SuperViz session, representing the video huddle room.

3. Create the App Component

Set up the main App component and initialize state variables.

1
export default function App() {
2
  const [initialized, setInitialized] = useState(false);
3
  const [videoInitialized, setVideoInitialized] = useState(false);
4
  const superviz = useRef<LauncherFacade | null>(null);

Explanation:

• initialized: A state variable to track whether the SuperViz environment has been set up.
• videoInitialized: A state variable to track whether the video conferencing component has been initialized.
• superviz: A ref to store the SuperViz room instance.

4. Initialize SuperViz

Create an initialize function to set up the SuperViz environment.

1
const initialize = useCallback(async () => {
2
  if (initialized) return;
3

4
  superviz.current = await SuperVizRoom(apiKey, {
5
    roomId: ROOM_ID,
6
    participant: {
7
      id: generateId(),
8
      name: 'participant-name',
9
    },
10
    group: {
11
      id: 'video-huddle',
12
      name: 'video-huddle',
13
    }
14
  });
15

16
  setInitialized(true);
17
}, [initialized]);

Explanation:

• initialize: An asynchronous function that initializes the SuperViz room and checks if it's already initialized to prevent duplicate setups.
• SuperVizRoom: Configures the room, participant, and group details for the session.

5. Initialize Video Conference

Create a function to initialize the video conferencing component.

1
const initializeVideo = useCallback(() => {
2
  if (!initialized || !superviz.current) return;
3

4
  const video = new VideoConference({
5
    participantType: 'host',
6
  });
7

8
  superviz.current.addComponent(video);
9
  setVideoInitialized(true);
10
}, [initialized]);

Explanation:

• initializeVideo: Checks if SuperViz is initialized before setting up the video conference component.
• VideoConference: Creates a video conference component, setting the participant type to 'host'.
• addComponent: Adds the video conference component to the SuperViz room.

6. Use Effect Hook for Initialization

Use the useEffect hook to trigger the initialize function on component mount.

1
useEffect(() => {
2
  initialize();
3
}, [initialize]);

Explanation:

• useEffect: Calls the initialize function once when the component mounts, setting up the SuperViz environment.

7. Render the Application

Return the JSX structure for rendering the application, including the video conference button.

1
return (
2
  <>
3
    <div className='w-full h-full bg-gray-200 flex items-center justify-center flex-col'>
4
      <header className='w-full p-5 bg-purple-400 flex items-center justify-between'>
5
        <h2 className='text-white text-2xl font-bold'>Video Huddle</h2>
6
        {
7
          !videoInitialized && (
8
            <button className="rounded-full bg-green-400 p-3 text-white text-lg disabled:opacity-75" onClick={initializeVideo} disabled={!initialized}>
9
              <IoIosCall />
10
            </button>
11
          )
12
        }
13
      </header>
14
      <main className='w-full h-full bg-app-background bg-[24px_10%] bg-no-repeat bg-[length:70%_auto]'></main>
15
    </div>
16
  </>
17
);

Explanation:

• Header: Displays the title of the application.
• Video Call Button: Renders a button to initialize the video conference, using the IoIosCall icon from React Icons. The button is disabled until SuperViz is initialized.

Step 3: Understanding the Project Structure

Here's a quick overview of how the project structure supports video huddles:

1. App.tsx
   • Initializes the SuperViz environment.
   • Sets up participant information and room details.
   • Handles video conferencing initialization and interaction.
2. Video Conferencing
   • Uses the VideoConference component from SuperViz to manage video huddles.
   • Allows users to start a video call directly within the application.
3. Real-Time Collaboration
   • Supports real-time communication and interaction between participants during the video huddle.

Step 4: Running the Application

1. Start the React 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 video call button to start a video conference. Open the application in multiple browser windows or tabs to simulate multiple participants joining the call.
• Collaborative Interaction: Test the responsiveness of the application by interacting with participants during the video huddle.

Summary

In this tutorial, we integrated a video huddle feature into a web application using SuperViz. We configured a React 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.