A Comprehensive Guide to Harnessing Huddle01 SDK for Innovative Development

Do you know you can now integrate high-quality live audio and video features into your application with just a few lines of code?

Huddle01 SDK stands at the forefront of modern software development. It offers developers a robust toolkit for immersive live audio/video apps.

Huddle01 is a real-time collaboration, communication, and engagement platform. Its operational model is decentralized, ensuring openness, neutrality, borderlessness, and decentralization.

Huddle01’s SDK empowers developers to build cutting-edge solutions. These solutions redefine how people interact and communicate in real time.

At its core, Huddle01 SDK gives developers the key tools. They use them to add high-quality audio and video streaming to their apps. It can host virtual meetings and power live events.

It also enables remote collaboration and facilitates interactive experiences. Huddle01 SDK is versatile and scalable. It meets the demands of diverse use cases.

These features make sure users have smooth experiences. They work even in tough networks. They make Huddle01 SDK the top choice for critical applications.

Also, Huddle01 SDK has many developer resources. These include clear documentation, tutorial videos, sample apps, and forums. These resources make integration easier and speed up time-to-market. They let developers focus on building new features.

In an era where remote communication and collaboration are more important than ever. Huddle01 SDK is a catalyst for innovation. It empowers developers to make immersive, engaging, and interactive experiences. The experiences cross geographical boundaries.

It is for both seasoned developers and newcomers. The SDK helps you push the limits of what’s possible. It also enables you to explore live audio/video applications. Huddle01 SDK provides the tools and support you need. They will help you bring your ideas to life.

This article’s purpose is to be a guide for developers and experts. It covers Huddle01 SDK. It offers practical tips, new ideas, and useful resources. These will help developers and experts build immersive live audio/video apps.

Understanding Huddle01 SDK Concepts

Huddle01’s SDK has a user-friendly structure. Its key principles underpin this. Below are key concepts and terms. You need to understand them before using the SDK.

Room: A room is a virtual space for Huddle01 meetings. It includes all participants and their media. Each room possesses a unique roomID generated upon creation.

Rooms persist indefinitely, accommodating multiple meeting sessions sequentially within the same room.

Peer: Within a room, a peer denotes an individual participant. It contains all a participant’s media streams. A peerId uniquely identifies these streams. Every peer has an affiliation with a specific room.

MediaStream: MediaStream represents a stream of media. It can have many tracks, including audio or video. Peers are associated with their corresponding MediaStreams.

MediaStreamTrack: A MediaStreamTrack signifies a single media track in a MediaStream. It can be an audio or video track.

Local: Upon joining a room, “local” denotes all operations on one’s Peer object within the room.”

Remote: All peers other than oneself within the same room are referenced as “remote.” Interactions with a remote peer require providing the peerID for that peer.

Data Message: Except for MediaStreams, peers in a room can chat. They use text-based messages, which are limited to 280 characters. These messages are termed “data messages.”

Metadata: Metadata is a versatile object. It can attach to both Peers and the Room. It enables storing supplementary information associated with a Peer or a Room. The SDKs offer methods for accessing and modifying this metadata.

Room States: Rooms can exist in one of six states at any given moment:

The concepts and glossary are foundational. They are crucial for using the Huddle01 SDK well.

Comparison with Similar SDKs in the Market

Several SDKs can be used to build live audio/video applications eg Twillo, Zoom, and VideoSDK. But, Huddle01 SDK stands out. It has a comprehensive set of features.

It is also affordable, reliable, scalable, and well-crafted documentation for developers. Here’s a brief comparison highlighting the strengths of Huddle01 SDK:

• Feature Richness: Huddle01 SDK offers many features. These include adaptive bitrate streaming and dynamic network resilience. These features are key for delivering high-quality audio/video.
• Developer Experience: The Huddle01 SDK has intuitive APIs and extensive documentation. It provides a seamless development experience. Developers can quickly integrate and deploy their applications.
• Community Support: The Huddle01 SDK has a vibrant community of developers and enthusiasts. They offer forums, tutorials, and sample applications. These resources support developers at every stage of their journey.

Creative Application Ideas with Huddle01 SDK

Virtual Conference Hub

Build a full virtual conference platform. Users can use it to host and attend conferences, seminars, and workshops.

With Huddle01’s SDK, The application can have the following features:

• Builders can integrate audio/ video spaces enabling real-time discussions.
• Recording/live streaming capabilities to ensure content accessibility beyond live sessions.
• Collaborative whiteboard functionality to foster interactive workshops.
• Token-gated rooms with digital assets for exclusive sessions or premium content access.

Interactive Learning Platform

Develop an interactive e-learning platform that goes beyond traditional video lectures.

With Huddle01’s SDK, The application can have the following features:

• Students can join live video discussions with teachers and peers. This improves collaboration and understanding.
• Recordings/Livestreaming SDK lets the students access past lessons on demand.
• A Collaborative whiteboard feature will help with interactive problem-solving within the platform
• Token-gated rooms with digital assets incentivize participation and reward achievements with NFTs.

Creative Collaboration Hub

Build a platform for creative professionals to collaborate and showcase their work.

With Huddle01’s SDK, The application can have the following features:

• Audio space to allow real-time brainstorming and feedback.
• Users can record or live stream collaborative projects, providing visibility and engagement opportunities.
• The collaborative whiteboard feature allows for visual ideation and planning
• In Token-Gated Rooms, artists can make money by selling exclusive access to their work.

Virtual Event Marketplace

Create a marketplace for virtual events. It will include concerts, art shows, workshops, and gaming tournaments.

With Huddle01’s SDK, The application can have the following features:

• The integrated live-streaming feature offers immersive experiences. Attendees can interact with performers or exhibitors in real-time.
• Video Recording capabilities to ensure broader reach and monetization options for event organizers.
• Token-gated rooms with digital assets enable VIP access or exclusive content offerings.

Health and Wellness Community

Develop a digital platform for health and wellness enthusiasts. They will use it to connect, learn, and support each other.

With Huddle01’s SDK, The application can have the following features:

• The Video Rooms will host live discussions with experts. The topics will include fitness, nutrition, and mental health.
• Recordings of past sessions are valuable resources. Members can access them at their convenience.
• You can use the collaborative whiteboard feature for group workouts or meal planning.

Virtual Gaming Experience

Create an immersive virtual gaming platform where users can play games while seeing themselves via live video feeds.

With Huddle01’s SDK, The application can have the following features:

• Integrated Rooms allow players to communicate in real-time, enhancing teamwork and strategizing.
• Use the SDK’s recording and live-streaming features. Use them to share epic gaming moments with friends and streaming audiences.

Remote Team Collaboration Tool

Develop a full collaboration tool for remote teams. It will have Rooms for real-time discussions and brainstorming.

With Huddle01’s SDK, The application can have the following features:

• Recording and live streaming ensure that important meetings and decisions are documented.
• Collaborative whiteboard functionality allows teams to visualize concepts, plan projects, and track progress together.
• Rooms gated with tokens and digital assets offer better security and privacy. They are for sensitive discussions or sharing proprietary information.

Virtual Social Networking Platform

Build a virtual social network. Users can use it to connect with friends. They can also join interest-based groups and attend virtual events.

With Huddle01’s SDK, The application can have the following features:

• Integrated Rooms enable real-time conversations, fostering meaningful connections and interactions.
• You can use the recording/live-streaming feature to share experiences, talents, and interests.
• Token-gated Rooms to offer exclusive access to premium content.

Remote Consultation Service

Create a platform for remote consultations. They will be between professionals and clients. The clients will be in industries like healthcare, legal, finance, etc.

With Huddle01’s SDK, The application can have the following features:

• Integrated Token-gated Rooms enable secure, private conversations.
• You can record or live-stream sessions with the SDK.

Virtual Fitness and Wellness Platform

Develop a virtual fitness and wellness platform. Users can access live workout classes, nutrition workshops, and mindfulness sessions.

With Huddle01’s SDK, The application can have the following features:

• Integrated Rooms allow instructors and participants to interact in real-time. They provide personalized guidance and motivation.
• Recording and live streaming let users revisit their favorite classes. They also allow users to share their fitness journey with others.
• The whiteboard feature can be used for setting goals, tracking progress, and sharing tips or recipes.

The app ideas show how the Huddle01 SDK is versatile. They work in many industries and use cases. They show its potential to change communication, collaboration, and engagement.

Huddle01 React SDK

The Huddle01 React SDK provides many hooks, methods, and event listeners. They make adding real-time audio and video into your apps easy with little code.

Before you use the Huddle01 React SDK, make sure to have Node.js installed on your system. You can install Node.js using one of the following methods:

1. Install Node.js with NVM.
2. Install Node.js with FNM.
3. Alternatively, you can download Node.js from the official website.

Once you install Node.js, you can check that it is installed. Do this by running this command in your terminal:

node --version

Building an Application with Huddle01 React SDK

We will explore using the Huddle01 react SDK to develop a basic virtual conference platform that integrates the Video/Audio and Token-gated features from the Huddle01 SDK.

We’ll explore step-by-step instructions. We’ll cover best practices and real-world examples.

These will guide you through the journey of building your applications.

Step 1: Set up a NextJS Project

To kickstart the process, open your terminal and execute the following command to initialize a new Next.js project:

npx create-next-app my-project

Replace “my-project” with your preferred project name.

This command utilizes the create-next-app package to establish a new Next.js project with default configurations and structure.

Navigating to the Project Directory

Next, navigate into the newly created project directory by entering the following command:

cd my-project

Ensure to substitute “my-project” with the name of your project.

Running the Development Server

To launch the development server, execute the following command:

npm run dev

This command initiates the building process for your Next.js application and starts a development server.

You can access your application by visiting http://localhost:3000 in your preferred web browser.

Step 2: Install @huddle01/react in your react app

npm i @huddle01/react @huddle01/server-sdk

Step 3: Get Your Project Credentials from Huddle01

Proceed to the API Keys Page

Connect your wallet (Metamask, Trustwallet, etc)

Submit your project details to get your project credentials.

Step 4: Initialize Huddle01 SDK into your project

Afterward, initialize your nextJS project by creating an instance of HuddleClient and passing it into HuddleProvider.

Ensure to encapsulate HuddleProviderwithin the root component in your NextJS app.

import "@/styles/globals.css";
import type { AppProps } from "next/app";

import { HuddleClient, HuddleProvider } from "@huddle01/react";

const huddleClient = new HuddleClient({
  projectId: "REPLACE_WITH_YOUR_PROJECT_ID",
  options: {
    activeSpeakers: {
      size: 8,
    },
  },
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <HuddleProvider client={huddleClient}>
      <Component {...pageProps} />
    </HuddleProvider>
  );
}

Step 5: Create Room for Virtual Meetings

A roomId is required to join a room. You can get it by calling the Create Room API.

Inside the src folder of your NextJS app, create a folder titledcreate-room. inside that folder, create a typescript file room.tsx , and paste the code below.

export const getServerSideProps = async () => {
  const response = await fetch("https://api.huddle01.com/api/v1/create-room", {
    method: "POST",
    body: JSON.stringify({
      title: "Huddle01 Room",
    }),
    headers: {
      "Content-type": "application/json",
      "x-api-key": "ENTER_YOUR_PROJECT_API_KEY",
    },
  });

  const data = await response.json();

  const roomId = data.data.roomId;

  return {
    redirect: {
      destination: `/${roomId}`,
      permanent: false,
    },
  };
};

Solana token-gated rooms can also be created to allow meeting access to a selected few. Create a token gated room using the Create Room API Function.

First, let’s create an API to create a token gated room. Inside the create-room folder, create another typescript file create-gated-room and paste the code below.

import type { NextApiRequest, NextApiResponse } from 'next';
import { API } from '@huddle01/server-sdk/api';
 
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const { collectionAddress } = req.query;
 
    if (!collectionAddress) {
        return res.status(400).json({ error: 'collectionAddress is required' });
    }
 
    const api = new API({
        apiKey: "ENTER_YOUR_API_KEY_HERE",
    });
 
    const createNewRoom = await api.createRoom({
        title: 'Token Gated Room',
        tokenType: 'SPL',
        chain: 'SOLANA',
        contractAddress: [collectionAddress as string],
    });
 
    if (createNewRoom.error) {
        return res.status(500).json({
            error: createNewRoom.error,
        });
    }
 
    return res.status(200).json({
        roomId: createNewRoom.data.data.roomId,
    });
}

Step 6: Integrate Solana Wallet Adapter

Create a WalletContextProviderresponsible for managing the connection to the Solana Wallet.

Create a component folder at your app's root, create a contextProvider.tsx file, and paste the code below.

Adding this provider to the root of our app ensures the wallet is available to all components.

import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider as ReactUIWalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { PhantomWalletAdapter, SolflareWalletAdapter, TorusWalletAdapter } from '@solana/wallet-adapter-wallets';
import { clusterApiUrl } from '@solana/web3.js';
import type { FC, ReactNode } from 'react';
import React, { useMemo } from 'react';
 
const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
    const network = WalletAdapterNetwork.Mainnet;
 
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);
 
    const wallets = useMemo(
        () => [new PhantomWalletAdapter(), new SolflareWalletAdapter({ network }), new TorusWalletAdapter()],
        [network]
    );
 
    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets}>
                <ReactUIWalletModalProvider>{children}</ReactUIWalletModalProvider>
            </WalletProvider>
        </ConnectionProvider>
    );
};
 
export const ContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
    return <WalletContextProvider>{children}</WalletContextProvider>;
};

Step 7: Implement Sign-In With Solana Wallet

Create a signIn.tsx file still inside the components folder and paste the code below.

import base58 from 'bs58';
import axios, { isAxiosError } from 'axios';
import toast from 'react-hot-toast';
import bs58 from 'bs58';
import nacl from 'tweetnacl';
 
type SignMessage = {
    domain: string;
    publicKey: string;
    expTime: string;
    statement: string;
};
 
export class SigninMessage {
    domain: any;
    publicKey: any;
    expTime: any;
    statement: any;
 
    constructor({ domain, publicKey, expTime, statement }: SignMessage) {
        this.domain = domain;
        this.publicKey = publicKey;
        this.expTime = expTime;
        this.statement = statement;
    }
 
    prepare() {
        return `${this.statement}
 
${this.domain} 
 
Expires on ${this.expTime}`;
    }
 
    async validate(signature: string) {
        const msg = this.prepare();
        const signatureUint8 = bs58.decode(signature);
        const msgUint8 = new TextEncoder().encode(msg);
        const pubKeyUint8 = bs58.decode(this.publicKey);
 
        return nacl.sign.detached.verify(msgUint8, signatureUint8, pubKeyUint8);
    }
}
 
export const handleSignIn = async (roomId: string, displayName: string, signIn: any, publicKey: any) => {
    try {
        const time = {
            issuedAt: Date.now(),
            expiresAt: Date.now() + 1000 * 60 * 5,
        };
 
        const signInMessage = new SigninMessage({
            domain: window.location.host,
            publicKey: publicKey.toBase58(),
            expTime: new Date(time.expiresAt).toISOString(),
            statement: 'Please Sign In to verify wallet',
        });
 
        const data = new TextEncoder().encode(signInMessage.prepare());
 
        const signature = await signIn(data);
 
        const serializedSignature = base58.encode(signature);
 
        const token = await axios.request({
            method: 'POST',
            url: '/api/getAccessToken',
            data: {
                displayName,
                roomId,
                address: publicKey.toBase58(),
                expirationTime: time.expiresAt,
                domain: window.location.host,
                signature: serializedSignature,
            },
            headers: {
                'Content-Type': 'application/json',
            },
        });
 
        return token?.data?.token;
    } catch (error: any) {
        if (isAxiosError(error)) {
            toast.error(error.response?.data?.error);
        }
    }
};

Step 8: Establish an API for Wallet Verification and Access Token Generation

Verify the signature and expiration time. Afterward, we’ll use the Shyft API to confirm if the user possesses the necessary NFT.

Check the user’s NFT ownership. Then, generate an access token and use it for room access.

Create an accessToken.tsxfile inside the component folder and paste the code below

import type { NextApiRequest, NextApiResponse } from 'next';
import { AccessToken, Role } from '@huddle01/server-sdk/auth';
import { API } from '@huddle01/server-sdk/api';
import { SigninMessage } from '../signIn';
 
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const { roomId, address, displayName, expirationTime, signature, domain } = req.body as {
        roomId: string;
        address: string;
        expirationTime: number;
        displayName: string;
        domain: string;
        signature: string;
    };
 
    if (!roomId || !address) {
        return res.status(400).json({ error: 'Invalid Request' });
    }
 
    if (expirationTime < Date.now()) {
        return res.status(400).json({ error: 'Signature expired' });
    }
 
    const api = new API({
        apiKey: process.env.API_KEY!,
    });
 
    const { data: roomDetails } = await api.getRoomDetails({
        roomId: roomId,
    });
 
    if (!roomDetails?.tokenGatingInfo) {
        return res.status(400).json({ error: 'Room is not token gated' });
    }
 
    const signInMessage = new SigninMessage({
        domain,
        publicKey: address,
        expTime: new Date(expirationTime).toISOString(),
        statement: 'Please Sign In to verify wallet',
    });
 
    const isVerified = await signInMessage.validate(signature);
 
    if (!isVerified) {
        return res.status(400).json({ error: 'Invalid Signature' });
    }
 
    const collectionAddress = roomDetails?.tokenGatingInfo?.tokenGatingConditions[0]?.contractAddress;
 
    const apiResponse = await fetch(
        `https://api.shyft.to/sol/v1/nft/search?wallet=${address}&network=mainnet-beta&size=1&collection=${collectionAddress}`,
        {
            method: 'GET',
            headers: {
                'x-api-key': process.env.SHYFT_API_KEY!,
            },
        }
    );
 
    const nftData = (await apiResponse.json()) as {
        result: {
            nfts: any[];
        };
    };
 
    if (nftData.result.nfts.length === 0) {
        return res.status(400).json({ error: 'User does not own the required NFT' });
    }
 
    const accessToken = new AccessToken({
        apiKey: process.env.API_KEY!,
        roomId: roomId as string,
        role: Role.HOST,
        permissions: {
            admin: true,
            canConsume: true,
            canProduce: true,
            canProduceSources: {
                cam: true,
                mic: true,
                screen: true,
            },
            canRecvData: true,
            canSendData: true,
            canUpdateMetadata: true,
        },
        options: {
            metadata: {
                displayName: displayName,
                walletAddress: address,
            },
        },
    });
 
    const token = await accessToken.toJwt();
 
    return res.status(200).json({ token });
}

Step 9: Enable Access To Join Room only if the user has the required NFT

We’ll add walletConnectComponent to link with Solana Wallet. We’ll use the handleSignIn function to sign the message and get the token from our API.

After we connect to the wallet, we’ll call handleSignIn. Then, we’ll join the room if we get the token.

import { useWallet } from '@solana/wallet-adapter-react';
import { useEffect } from 'react';
import { useRoom } from '@huddle01/react/hooks';
 
const walletConnectComponent = dynamic(
    async () => (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,
    { ssr: false }
);
 
export default function Home() {
    
    const wallet = useWallet();
    const { joinRoom, state } = useRoom();
 
    useEffect(() => {
        const handleWallet = async () => {
            const token = await handleSignIn(
                router.query.roomId as string,
                displayName,
                wallet.signMessage,
                wallet.publicKey
            );
            if (token) {
                await joinRoom({
                    token,
                    roomId: router.query.roomId as string,
                });
            }
        };
        if (wallet.connected && state === 'idle') {
            handleWallet();
        }
    }, [wallet.connected]);
 
    return (
        <>
            <walletConnectComponent />
        </>
    );
};

Step 10: Enable Video Recording (optional)

To initiate meeting recordings, utilize the Huddle01 Server SDK. This SDK provides a Recorder class.

It has functions for starting and ending meeting recordings. This process happens on the server. You’ll need to make an API route to manage the recording.

Inside the components folder, create a startRecording.tsx file and paste the code below

import type { NextApiRequest, NextApiResponse } from 'next';
import { Recorder } from '@huddle01/server-sdk/recorder';
import { AccessToken, Role } from '@huddle01/server-sdk/auth';
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { roomId } = req.query;
 
  //checking for project credentials
  if (!process.env.NEXT_PUBLIC_PROJECT_ID && !process.env.API_KEY) {
    return res
      .status(400)
      .json({ error: 'NEXT_PUBLIC_PROJECT_ID and API_KEY are required' });
  }
 
  //creating the Recorder class instance
  const recorder = new Recorder(
    process.env.NEXT_PUBLIC_PROJECT_ID!,
    process.env.API_KEY!
  );
 
 
  //starting the recording
if (token) {
  const recording = await recorder.startRecording({
    roomId: roomId as string,
    token: accessToken,
  });
}
 
  console.log('recording', recording);
 
  return res.status(200).json({ recording });
}

Inside the components folder, create a stopRecording.tsx file and paste the code below

import type { NextApiRequest, NextApiResponse } from 'next';
import { Recorder } from '@huddle01/server-sdk/recorder';
 
interface Recordings {
  id: string;
  recordingUrl: string;
  recordingSize: number;
}
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { roomId } = req.query;
 
  //checking for project credentials
  if (!process.env.NEXT_PUBLIC_PROJECT_ID && !process.env.API_KEY) {
    return res
      .status(400)
      .json({ error: 'NEXT_PUBLIC_PROJECT_ID and API_KEY are required' });
  }
 
  //creating the Recorder class instance
  const recorder = new Recorder(
    process.env.NEXT_PUBLIC_PROJECT_ID!,
    process.env.API_KEY!
  );
 
  //stopping the recording
  const recording = await recorder.stop({
    roomId: roomId as string,
  });
 
  console.log('recording', recording);
 
  const { msg } = recording;
 
  if (msg === 'Stopped') {
 
    //fetching the recording
    const response = await fetch(
      'https://api.huddle01.com/api/v1/get-recordings',
      {
        headers: {
          'x-api-key': process.env.API_KEY!,
        },
      }
    );
    const data = await response.json();
 
    const { recordings } = data as { recordings: Recordings[] };
 
    //return the most recent recording from the list
    return res.status(200).json({ recording: recordings[0] });
  }
 
  return res.status(200).json({ recording });
}

Next, we can use these APIs on the client side to start or stop recording. First, we’ll set a boolean to track the status. Then, we’ll add a button for control.

  const [isRecording, setIsRecording] = useState<boolean>(false);
 
  return (
    <button
        className="bg-blue-500 p-2 mx-2 rounded-lg"
        onClick={async () => {
            const status = isRecording
            ? await fetch(
                `/api/stopRecording?roomId=${myRoomId}`
                )
            : await fetch(
                `/api/startRecording?roomId=${myRoomId}`
                );
 
            const data = await status.json();
 
            if(isRecording) {
                console.log("Recording Stopped", { data });
            } else {
                console.log("Recording Started", { data });
            }
            setIsRecording(!isRecording);
        }}
    >
        {isRecording ? "Stop Recording" : "Start Recording"}
    </button>
  );

You’re all set!

There are other cool functionalities you can add to make the app better so go ahead and start hacking 🎉

I look forward to seeing the amazing project you come up with. Don’t forget to share it on X and tag @huddle01com and @amdonatusprince.

Useful Resources

Huddle Website: https://huddle01.com/

Huddle01 Documentation: https://docs.huddle01.com/

Huddle01 Blog: https://huddle01.com/blog

Project Examples: https://github.com/orgs/Huddle01/repositories