Building a Vanilla App with Huddle01

Walkthrough

The following guide explains how you can integrate audio/video into your application seamlessly using the Huddle01 vanilla JS SDK.

Add the following code snippet to the head of your HTML file: Replace with our CDN

To power your Vanilla App with audio/video communication using Huddle01.

app.js

<script src="https://unpkg.com/@huddle01/web-core@latest/dist/index.js" />

Initialization of project

Head over to 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.

app.js

<script src="https://unpkg.com/@huddle01/web-core@latest/dist/index.js" / >
 
<script type="module">
  huddleClient.initialize("YOUR_PROJECT_ID")
</script>

Joining the lobby

Once the client has been initialized,

Room Id can be generated using the : Create Room API

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

app.js

<script type="module">
  huddleClient.initialize("YOUR_PROJECT_ID")
 
  document.getElementById('joinLobby').onclick = () => {
    huddleClient.joinLobby('YOUR_ROOM_ID');
  };
</script>

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):

app.js

<script type="module">
  huddleClient.initialize("YOUR_PROJECT_ID")
 
  document.getElementById('joinLobby').onclick = () => {
    huddleClient.joinLobby('YOUR_ROOM_ID');
  };
 
  document.getElementById('enableMic').onclick = () => {
    huddleClient.enableMic();
  };
 
  document.getElementById('enableCam').onclick = () => {
    huddleClient.enableCam();
  };
</script>

Joining and leaving the room

The joinRoom() method can be called to enter the room, once the lobby has been joined. To leave that respective room you can call the leaveRoom() method in the ROOM state.

app.js

<script type="module">
  huddleClient.initialize("YOUR_PROJECT_ID")
 
  document.getElementById('joinLobby').onclick = () => {
    huddleClient.joinLobby('YOUR_ROOM_ID');
  };
 
  document.getElementById('enableMic').onclick = () => {
    huddleClient.enableMic();
  };
 
  document.getElementById('enableCam').onclick = () => {
    huddleClient.enableCam();
  };
 
  document.getElementById('joinRoom').onclick = () => {
    huddleClient.joinRoom();
  };
 
  document.getElementById('leaveRoom').onclick = () => {
    huddleClient.leaveRoom();
  };
</script>

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

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.

app.js

<script type="module">
 
  huddleClient.initialize("YOUR_PROJECT_ID");
 
  document.getElementById('joinLobby').onclick = () => {
    huddleClient.joinLobby('YOUR_ROOM_ID');
  };
 
  document.getElementById('joinRoom').onclick = () => {
    huddleClient.joinRoom();
  };
 
  document.getElementById('leaveRoom').onclick = () => {
    huddleClient.leaveRoom();
  };
 
  document.getElementById('enableMic').onclick = () => {
    huddleClient.enableMic();
  };
 
  document.getElementById('enableCam').onclick = () => {
    huddleClient.enableCam();
  };
 
  document.getElementById('produceMic').onclick = () => {
    huddleClient.produceMic();
  };
 
  document.getElementById('produceCam').onclick = () => {
    huddleClient.produceCam();
  };
</script>

You're all set! Happy Hacking! 🎉

For more information, please refer to the SDK Reference.

Send Data Start from an example