Upgrade your dApps with Huddle01 Video Conferencing SDK ⚒️

Huddle01 is building a dRTC engine that enables users to create tools that fuel the future of real-time communication. Our platform aims to bring people closer via seamless video calling from anywhere in the world and help them express their thoughts and feelings without any privacy concerns.

Huddle01’s Video SDK is built upon the infrastructure that powers Huddle01 platform. So now you can create your dApp that can be as powerful as the Huddle01 dApp itself 🎥

React is the most widely used framework by developers around the world to build efficient, scalable, and fast web applications. We’ve built our SDKs around it and have handled state management too!

Introducing Huddle01 Client SDK:

Web SDK - Client SDK Architecture 🏗

The @huddle01/huddle01-client package comprises of 4 modules:

• store Built-in state management built on top of zustand holding all states relevant to the conferencing (no need to manage your own state)

• hooks We’ve extracted and encapsulated stateful logic and side effects from reused components, making it easier for you to reuse this logic across multiple components

• utils Added standalone functions that are usually small and focused, and they are designed to be used as needed throughout and are helpers which are optional

• schema This includes useful types and interfaces that will give you access to datatypes while implementing the @huddle01/huddle01-client package in Typescript

Guide to building your own conferencing solution 📚

Prerequisites:

Before starting with development, setup your environment with these prerequisites:

1. Generate an app from scratch

Run the following command to generate an app instantly ⚡

npx create-huddle01

or

yarn create huddle01

2. Add to an existing application

To add the @huddle01/huddle01-client package to an existing application, you will need to install it using npm, yarn or any other package manager of your choice

Open a terminal window and navigate to the root directory of your application, then run the following command:

npm install @huddle01/huddle01-client

or

yarn add @huddle01/huddle01-client

Get your API key

Initialise the app

The HuddleClientProvider lets you access the huddleClient in any component within your application:

//src/App.tsx
import { HuddleClientProvider, getHuddleClient } from '@huddle01/huddle01-client';

const App = () => {
  const huddleClient = getHuddleClient('<Your-API-Key>')
  return (
    <HuddleClientProvider client = {huddleClient} >
      <YourApp>
        ...
      </YourApp>
    </HuddleClientProvider>
  );
};

Using the huddleClient instance

huddleClient.join('roomId');

Other methods can be found in the Builders' Kit ⚒️

Access state in the application

The useHuddleStore is a custom react hook built by us to give you access to the state of the app in a similar fashion as redux does.

// JavaScript | TypeScript
import { useHuddleStore } from "huddle01-client/hooks";

// Example
const isCamPaused = useHuddleStore((state) => state.isCamPaused);

You can even use the redux-devtools extension to monitor the state of your apps which are created using @huddle01/huddle01-client

Example Apps

• Javascript - https://github.com/Huddle01/sdk-vite-example-app

• Typescript - https://github.com/Huddle01/sdk-vite-example-app-ts

That's a wrap!

Now that you know how easy it is to use Huddle01 SDKs, we leave it to your imagination and creativity to play with the infra.

In case you have some doubts or need help with the integration, feel free to reach out to us on Discord or Twitter, and keep up with everything at Huddle01 🎥

Read more about Huddle01 SDKs 📚

Try out Huddle01 for a quick meeting 🎥