Building a Vanilla App with Huddle01

import { HuddleClient } from "@huddle01/web-core";
 
export const client = new HuddleClient({
  projectId: "TxG-OolMwGeCoZPzX660e65wwuU2MP83",
});

import { AccessToken, Role } from "@huddle01/server-sdk/auth";
 
const generateAccessToken = async () => {
  const accessToken = new AccessToken({
    apiKey,
    roomId: "YOUR_ROOM_ID",
    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: {
        // you can add any custom attributes here which you want to associate with the user
        walletAddress: "vrajdesai.eth",
      },
    },
  });
  const token = await accessToken.toJwt();
  return token;
};

document.getElementById("joinRoom").onclick = async () => {
  // you can use roomId and accessToken which we have generated in the above steps
  await huddleClient.joinRoom({
    roomId: "YOUR_ROOM_ID",
    token: "YOUR_ACCESS_TOKEN",
  });
};
 
document.getElementById("leaveRoom").onclick = async () => {
  await huddleClient.leaveRoom();
};

import { client } from "./client";
 
// This function will enable or disable audio stream
export function handleAudioStream(element) {
  element.addEventListener("click", async () => {
    // Reference to the button to enable/disable audio
    const audioRef = document.querySelector("#audio");
    // If audio stream is disabled, then enable it
    if (audioRef.textContent == "Disable Audio") {
      // This will disable the audio stream and other participants will not be able to hear you
      await client.localPeer.disableAudio();
      audioRef.textContent = "Enable Audio";
    } else {
      // This will enable the audio stream and other participants will be able to hear you
      await client.localPeer.enableAudio();
      audioRef.textContent = "Disable Audio";
    }
  });
}
 
// This function will enable or disable video stream
export function handleVideoStream(element) {
  element.addEventListener("click", async () => {
    // Reference to the button to enable/disable video
    const videoRef = document.querySelector("#videoRef");
 
    // If video stream is already enabled, then disable it
    if (videoRef.srcObject) {
      client.localPeer.disableVideo();
      videoRef.srcObject = null;
      document.querySelector("#video").textContent = "Enable Video";
      return;
    }
 
    // This will fetch video stream and return MediaStream
    const stream = await client.localPeer.enableVideo();
 
    // This will set the stream to the video element
    videoRef.srcObject = stream;
    videoRef.onloadedmetadata = async () => {
      try {
        await videoRef.play();
        document.querySelector("#video").textContent = "Disable Video";
      } catch (error) {
        console.error(error);
      }
    };
  });
}
 
// This function will enable or disable screen share
export function handleScreenStream(element) {
  element.addEventListener("click", async () => {
    // Reference to the button to enable/disable screen share
    const screenRef = document.querySelector("#screenRef");
 
    // If screen share is already enabled, then disable it
    if (screenRef.srcObject) {
      client.localPeer.stopScreenShare();
      screenRef.srcObject = null;
      document.querySelector("#screen").textContent = "Share Screen";
      return;
    }
 
    // This will fetch screen share stream and return MediaStream
    const stream = await client.localPeer.startScreenShare();
 
    // This will set the stream to the video element
    screenRef.srcObject = stream;
    screenRef.onloadedmetadata = async () => {
      try {
        await screenRef.play();
        document.querySelector("#screen").textContent = "Stop Sharing";
      } catch (error) {
        console.error(error);
      }
    };
  });
}

import { client } from "./client";
 
// This function needs to be called in app.js file
export function handleEvents() {
  // This event will be triggered when a new stream is added to the room
  client.room.on("stream-added", ({ peerId, label }) => {
    const container = document.querySelector("#remotePeers");
 
    // Create a new video element to show the remote stream
    let mediaRef = document.createElement("video");
 
    // If the stream is audio, then create audio element
    if (label == "audio") {
      mediaRef = document.createElement("audio");
    }
 
    // Get the track of remote peer from the room by getting the remote peer's consumer
    const remoteTrack = client.room
      .getRemotePeerById(peerId)
      ?.getConsumer(label)?.track;
 
    // Create a new media stream from the remote track and set it to the media element
    mediaRef.srcObject = new MediaStream([remoteTrack]);
    mediaRef.id = `${peerId}-${label}`;
    mediaRef.autoplay = true;
 
    // If the stream is video, then mute it
    if (label == "video") {
      mediaRef.muted = true;
    }
    mediaRef.className = "border-2 rounded-xl border-white-400 aspect-video";
    container.appendChild(mediaRef);
  });
 
  // This event will be triggered when a stream is closed in the room
  client.room.on("stream-closed", ({ peerId, label }) => {
    // Get the reference of media element
    const mediaRef = document.querySelector(`#${peerId}-${label}`);
    // Stop the track and remove the media element
    mediaRef.srcObject.getTracks().forEach((track) => track.stop());
    mediaRef.srcObject = null;
    mediaRef.remove();
  });
}