Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@huddle01/huddle01-iframe

a4748g11MITdeprecated0.0.9TypeScript support: included

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Simple plug-&-play & easy-to-use Iframe to embed video meetings to your app or website within seconds. Add a few lines of code and save a huge amounts of development time and money.

huddle01, iframe, web3, video-conferencing

readme

Huddle01-Iframe

https://huddle01-assets-frontend.s3.amazonaws.com/general/huddle01-logo-blue.svg

Web3-Native Zoom for Builders/DAOs/NFT Communities

Community · Documentation

NOTE: Request for access to the Iframe pkg on Huddle01's discord or reach out to the team.

Quick Start

Install the huddle01-iframe pkg from npm or yarn

# npm
npm i @huddle01/huddle01-iframe

# yarn
yarn add @huddle01/huddle01-iframe

Huddle App Setup

import <HuddleIframe /> from the npm pkg

// HuddleIframe to be imported
import { HuddleIframe } from '@huddle01/huddle01-iframe';

Create a config object as follows:

// JavaScript
const iframeConfig = {
  roomUrl: 'https://iframe.huddle01.com/123',
  height: '600px',
  width: '80%',
  noBorder: false, // false by default
};
// TypeScript
// import *IframeConfig* type from pkg too
import { HuddleIframe, IframeConfig } from '@huddle01/huddle01-iframe';

const iframeConfig: IframeConfig = {
  roomUrl: 'https://iframe.huddle01.com/123',
  height: '600px',
  width: '80%',
  noBorder: false, // false by default
};

Pass the configObj as a parameter to the <HuddleIframeApp /> component

// JavaScript | TypeScript
<HuddleIframe config={iframeConfig} />

Instance Methods

Usage:

// JavaScript | TypeScript
import { huddleIframeApp } from '@huddle01/huddle01-iframe';

//format
huddleIframeApp.methods.methodName();

//e.g.
huddleIframeApp.methods.muteMic();

Action Methods:

  • muteMic()
  • unmuteMic()
  • enableShare()
  • disableShare()
  • startRecording()
  • stopRecording()
  • sendReaction(emogi) [allowed emogis: 😂, 😢, 😦, 😍, 🤔, 👀, 🙌, 👍, 👎, 🔥, 🍻, 🚀, 🎉, ❤️, 💯]
  • toggleHandRaise()
  • connectWallet(address)

Info Methods

// Javascript | Typescript
const participants = huddleIframeApp.infoMethods.getParticipants();
// example participant
"EEXTeIr5C6": {
    peerId: "EEXTeIr5C6"
    avatarUrl: "https://bit.ly/3O7wUeR",
    displayName: "axit.eth",
    isCamPaused: false
    isHandRaised: false
    isMicPaused: false
    isSharePaused: false
}
  • getParticipants()
    • peer {type: Peer}
      • peerId {type: String}
      • avatarUrl {type: String}
      • displayName {type: String}
      • isHandRaised {type: Boolean}
      • isCamPaused {type: Boolean}
      • isMicPaused {type: Boolean}
      • isSharePaused {type: Boolean}

Events

All Action methods have their own events and can be listened to if they are called using the api. There are some additional meeting events that you can listen to as well:

  • peer-join
  • peer-left
  • me-left
  • avatar-url-changed
// JavaScript
import { huddleIframeApp, HuddleAppEvent } from '@huddle01/huddle01-iframe';

huddleIframeApp.on('peer-join', (data) => console.log({ data }));
// TypeScript
import { huddleIframeApp, HuddleAppEvent } from '@huddle01/huddle01-iframe';

huddleIframeApp.on(HuddleAppEvent.PEER_JOIN, (data) => console.log({ data }));

💡 For any help reach out to us on Discord