iFrame
Vanilla iFrame

Vanilla iFrame

The Huddle01 Vanilla iFrame provides a simple way to embed real-time audio and video communication into your application. After embedding the iFrame, you can customise the appearance using the configuration options provided by the package.

Step by step guide:

To begin, you can copy and paste the iFrame markup provided below into your HTML document.

Include the below CDN

<script src="https://unpkg.com/@huddle01/iframe@0.0.15/dist/index.global.js"></script>

Markup Paste the below code into your web app's markup

💡

You need to generate roomId using our Create Room API and projectId from Developer Dashboard (opens in a new tab)

<iframe
  id="huddle01-iframe"
  src="https://iframe.huddle01.com/YOUR_ROOM_ID?projectId=PROJECT_ID"
  name="myiFrame"
  scrolling="no"
  height="90%"
  width="90%"
  allowFullScreen
  allow="camera; microphone; clipboard-read; clipboard-write; display-capture"
></iframe>

Methods

Initialize

To use the methods listed below, you first need to get the iFrame element and its content window. After adding the CDN to your code you can call the methods in the following way:

MethodDescriptionParameter
logoUrlChange the default logo in the meeting roomstring
backgroundChange the background of the meeting roomstring
redirectUrlOnLeaveRedirect to a given URL after the meeting endsstring
virtualBgsLinks to additional virtual backgrounds for the meeting.string[]

Example:

const HIframe = document.getElementById("huddle01-iframe");
HIframe.iframeApi.initialize({
  background: "YOUR_BACKGROUND_URL",
  logoUrl: "YOUR_LOGO_URL",
});

Enable/Disable Features

You can enable or disable the following features by calling HIframe.iframeApi.updateFeatures() method.

MethodDescriptionParameterDefault
isChatEnabledEnable chat featurebooleantrue
isReactionsEnabledEnable reactions featurebooleantrue
isVirtualBgEnabledEnable virtual background featurebooleantrue
isCopyInviteLinkEnabledEnable copy invite link featurebooleanfalse
isRecordingEnabledEnable recording functionalitybooleantrue
isScreenShareEnabledEnable screen share featurebooleantrue
isRoomLockedEnable lock screen optionbooleantrue

Example Usage

const HIframe = document.getElementById("huddle01-iframe");
HIframe.iframeApi.updateFeatures({
  isChatEnabled: false,
  isReactionsEnabled: false,
  isVirtualBgEnabled: false,
  isCopyInviteLinkEnabled: false,
  isRecordingEnabled: false,
  isScreenShareEnabled: false,
  isRoomLocked: false,
});

Other Methods

You can also handle media devices, send reactions and other actions using the following methods:

MethodDescriptionParameter
muteMicMute the user's microphonevoid
unmuteMicUnmute the user's microphonevoid
enableShareEnable screen sharingvoid
disableShareDisable screen sharingvoid
startRecordingStart recording the meetingvoid
stopRecordingStop recording the meetingvoid
sendReactionSend a reaction during the meetingstring
changeAvatarUrlChange the avatarUrl for your peer once joined roomstring

Example Usage

const HIframe = document.getElementById("huddle01-iframe");
HIframe.iframeApi.muteMic();
HIframe.iframeApi.unmuteMic();
HIframe.iframeApi.enableShare();
HIframe.iframeApi.disableShare();
HIframe.iframeApi.startRecording();
HIframe.iframeApi.stopRecording();
HIframe.iframeApi.sendReaction("😂");
HIframe.iframeApi.changeAvatarUrl("YOUR_AVATAR_URL");
Audio/Video Infrastructure designed for developers to empower them to ship simple yet powerful Audio/Video Apps.
support
company
Copyright © 2024 Graphene 01, Inc. All Rights Reserved.