Add video chat to your web app in 7 quick steps 🔌 📹

Video chats are a great way to enhance the overall utility and experience of your app. Adding real-time communication capabilities can elevate the interactions between users and take your engagement to the next level.

And if you're not already using video chat on your web app, you could miss out on a valuable opportunity to enable more powerful and interactive experiences for your users.

Be it virtual meetings, brainstorming sessions, calls, customer support, or live consultations, video chat breaks down barriers and enhances collaboration, regardless of geographical distance.

Why Huddle01?

1️⃣ Seamless Integration: Huddle01 offers modular and easy-to-integrate SDKs, making it super quick for you to add video conferencing features directly into your web app. It lets you seamlessly blend the UI with your app's design and functionality, providing a consistent user experience.

2️⃣ User-Friendly Interface: Huddle01 boasts a user-friendly interface, ensuring that both you and your visitors can navigate and use the video conferencing features effortlessly. It's intuitive, reducing the learning curve and enabling hassle-free interactions.

3️⃣ Reliability and Security: Huddle01 video chat requires no email sign-ins, can host up to 500 members, has low latency and 1080p video quality.

4️⃣ Feature-Rich Experience: Huddle01 offers a range of features to enhance your video conferencing experience. From screen sharing and chat functionality to recording and live-streaming capabilities, you can create dynamic and engaging sessions that captivate your users.

Add Huddle01 video chat to your platform in 7 steps -

1. Install @huddle01/react in your react app

To power your React DApp with audio/video communication using Huddle01, install @huddle01/react package by using your favorite package manager:

pnpm i @huddle01/react

2. Initialization of project

Head over to the API Keys Page and connect your wallet to get your project credentials:

• API Key

• projectId

Once done, initialize your project by calling the initialize() method and pass projectId in params.

3. Joining the lobby

Room Id can be generated using the: Create Room API

Add the following button to your JSX and call the joinLobby() method.

The isCallable is an attribute available on all methods to check whether the function is callable or not.

Room creation using the Create Room API can be done in the following ways:

NextJs API Route to create room (NodeJs)

This is how you can create a room using NextJS API Route and pass the roomId to the joinLobby() method.

NextJS getServerSideProps() room creation example

4. Enabling and Disabling Media Devices

⚠️ If cam and mic aren’t enabled in the lobby, video and audio won’t be shareable inside the room

⚠️ These methods are to be called only when in lobby state.

Then, add the locale codes to your file extensions (required for the default locale too):

The isCallable is an attribute available on all methods to check whether the function is callable or not.

Render your own video and audio streams

5. Joining and leaving the room

Finally adding a functionality to joining and leaving room with fetching audio/video stream.

The isCallable is an attribute available on all methods to check whether the function is callable or not.

Clicking on the JOIN_ROOM button, will make the user join the room and will allow them to send/receive media with other participants.

6. Sending media across to other participants

Here, we are using a term PRODUCE which means sending your audio/video stream across to the other peer who will CONSUME (or receive) the streams.

7. Receiving the audio and video streams

Here, we are using the term PRODUCE which means sending your audio/video stream across to the other peer who will CONSUME (or receive) the streams.

• Getting access to data related to peers

    import { usePeers } from '@huddle01/react/hooks';
  
    export default function() {
      const peers = usePeers();
  
      return <div>{JSON.stringify(peers)}</div>
    }
  

  Output: (Example Output for 1 peer)

    [
      {
        peerId: "sdksjdsjd",
        mic: MediaStreamTrack,
        cam: MediaStreamTrack
      }
    ]
  

• Using the audio and video tags

  Importing the Audio and Video tags:

    // importing
    import { Video, Audio } from '@huddle01/react/components'
  

There are three ways to use the audio and video tags

1. Using peerId:

    <Video peerId="PEER_ID" />
    <Audio peerId="PEER_ID" />
   

2. Using track or stream :

   ⚠️ The stream value for mic and cam are available on the useAudio and useVideo hooks respectively.

   ⚠️ The tracks for peers can be found from the usePeers hook.

   🚨 To be used only when you want to make changes to streams from your side otherwise use peerId method!

    <Video peerId="PEER_ID" track={camTrack}  />
    <Audio peerId="PEER_ID" track={micTrack} />
   

The video and audio streams for the peers can be accessed using the usePeers hook. The usePeers hook returns an array of objects with the following structure:

[
  {
    peerId: "sdksjdsjd",
    mic: MediaStreamTrack,
    cam: MediaStreamTrack
  }
]

The peerId is the unique identifier for the peer. The mic and cam are the MediaStreamTrack objects for the audio and video streams, respectively.

The usePeers hook can be used to access the audio and video streams for the peers and can be used in the following way to render the audio and video streams:

You're all set! 🎉

For more information, you can check out our Builders’ Kit or drop us a 👋 on Discord