A collection of ui-kit addons that extends the RealtimeKit's prebuilt ui-kit capability.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
This repository contains all the ui-kit addons available for the RealtimeKit Web SDK.
A comprehensive guide detailing the usage of these ui-kit addons is available here.
Here are the list of available examples at the moment.
To use these addons you would need to perform the following steps:
- Install the addon package:
npm install @cloudflare/realtimekit-ui-addons- Import the addons that you need.
// Host controls
import CameraHostControl from '@cloudflare/realtimekit-ui-addons/camera-host-control';
import MicHostControl from '@cloudflare/realtimekit-ui-addons/mic-host-control';
import ChatHostControl from '@cloudflare/realtimekit-ui-addons/chat-host-control';
// Reactions
import HandRaise from '@cloudflare/realtimekit-ui-addons/hand-raise';
import ReactionsManagerAddon from '@cloudflare/realtimekit-ui-addons/reactions-manager';
// Participant Tile
import ParticipantTileMenu from "@cloudflare/realtimekit-ui-addons/participant-tile-menu";
// Participant Tab Actions
import ParticipantMenuItem from '@cloudflare/realtimekit-ui-addons/participant-menu-item';
import ParticipantsTabAction from "@cloudflare/realtimekit-ui-addons/participants-tab-action";
import ParticipantsTabToggle from "@cloudflare/realtimekit-ui-addons/participants-tab-toggle";
// Video Background (Effects)
import RealtimeKitVideoBackground from '@cloudflare/realtimekit-ui-addons/video-background';
// Control bar button
import CustomControlbarButton from '@cloudflare/realtimekit-ui-addons/custom-controlbar-button';- Initialize the addons
// Host controls
const cameraHostControl = await CameraHostControl.init({
meeting,
hostPresets: ['webinar_presenter'],
targetPresets: ['webinar_viewer'],
addActionInParticipantMenu: true,
});
const micHostControl = await MicHostControl.init({
meeting,
hostPresets: ['webinar_presenter'],
targetPresets: ['webinar_viewer'],
addActionInParticipantMenu: true,
});
const chatHostControl = await ChatHostControl.init({
meeting,
hostPresets: ['webinar_presenter'],
targetPresets: ['webinar_viewer'],
addActionInParticipantMenu: true,
});
// Reactions
const handRaise = await HandRaise.init({
meeting,
canRaiseHand: true,
canManageRaisedHand: true,
handRaiseIcon: '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 12.02c0 1.06.2 2.1.6 3.08l.6 1.42c.22.55.64 1.01 1.17 1.29.27.14.56.21.86.21h2.55c.77 0 1.49-.41 1.87-1.08.5-.87 1.02-1.7 1.72-2.43l1.32-1.39c.44-.46.97-.84 1.49-1.23l.59-.45a.6.6 0 0 0 .23-.47c0-.75-.54-1.57-1.22-1.79a3.34 3.34 0 0 0-2.78.29V4.5a1.5 1.5 0 0 0-2.05-1.4 1.5 1.5 0 0 0-2.9 0A1.5 1.5 0 0 0 6 4.5v.09A1.5 1.5 0 0 0 4 6v6.02ZM8 4.5v4a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0v5a.5.5 0 0 0 1 0v-4a.5.5 0 0 1 1 0v6a.5.5 0 0 0 .85.37h.01c.22-.22.44-.44.72-.58.7-.35 2.22-.57 2.4.5l-.53.4c-.52.4-1.04.78-1.48 1.24l-1.33 1.38c-.75.79-1.31 1.7-1.85 2.63-.21.36-.6.58-1.01.58H7.23a.87.87 0 0 1-.4-.1 1.55 1.55 0 0 1-.71-.78l-.59-1.42a7.09 7.09 0 0 1-.53-2.7V6a.5.5 0 0 1 1 0v3.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0Z" fill="#ff0000"></path></svg>'
});
const CUSTOM_REACTIONS = [
{ emoji: "🔥", label: "fire" },
{ emoji: "😢", label: "sad" },
{ emoji: '👍', label: 'thumbs up' },
{ emoji: '👎', label: 'thumbs down' },
{ emoji: '❤️', label: 'heart' },
{ emoji: '😂', label: 'laugh' },
{ emoji: '👏', label: 'clap' },
{ emoji: '🎉', label: 'celebrate' },
];
const reactionsAddon = await ReactionsManagerAddon.init({
meeting,
reactions: CUSTOM_REACTIONS,
canSendReactions: true,
});
// Participant Tile
const participantTileMenu = new ParticipantTileMenu([{
label: "Custom Toggle",
onClick: (participantId) => {
console.log('Clicked on custom toggle for ', participantId);
}
}], 'top-right');
// Participant Tab Actions
const rightTickSVG = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M4 12l6 6 10-14' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>";
const participantMenuItem = new ParticipantMenuItem({
label: "Custom Menu Item",
icon: rightTickSVG,
styles: "rtk-icon { color: green !important; }",
onClick: () => {
alert('Participant Menu Item clicked');
}
});
const participantsTabAction = new ParticipantsTabAction({
onClick: () => {
alert("Clicked!");
},
label: "Click me",
position: "start"
});
// Participant Tab Toggle
const participantsTabToggle = new ParticipantsTabToggle({
onEnabled: () => {
alert('toggled true!');
},
onDisabled: () => {
alert('toggled true!');
},
label: 'Click me',
initialValue: () => true,
position: 'start',
});
// Video Background (Effects)
const videoBackground = await RealtimeKitVideoBackground.init({
modes: ["blur", "virtual", "random"],
blurStrength: 30, // 0 - 100 for opacity
meeting,
images: [
"https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3",
"https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3",
"https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3"
],
randomCount: 10,
onVideoBackgroundUpdate: ({backgroundMode, backgroundURL}) => {
console.log('videoBackgroundUpdated => ', {backgroundMode, backgroundURL});
}, // Listen to background update action
});
// Control Bar
const customControlBarButton = new CustomControlbarButton({
position: 'left',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 17.75a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5zM12 14c0-2.5 4-2.5 4-6a4 4 0 1 0-8 0" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>',
label: 'Click Me!',
onClick: () => alert('Custom Control Bar Button Clicked'),
});- Register addon
import { registerAddons } from "@cloudflare/realtimekit-ui";
...
const newConfig = registerAddons([cameraHostControl, micHostControl, chatHostControl, handRaise, reactionsAddon, participantTileMenu, participantMenuItem, participantsTabAction, participantsTabToggle, videoBackground, customControlBarButton], meeting);- Pass the config to meeting UI
<rtk-meeting meeting={meeting} config={newConfig}></rtk-meeting>
you can apply, replace, or remove a background programmatically.
await videoBackground.applyVirtualBackground('https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3')
await videoBackground.applyBlurBackground();
// Common for virtual and blur backgrounds.
await videoBackground.removeBackground();This project is created & maintained by Cloudflare, Inc.
The names and logos for Cloudflare are trademarks of Cloudflare, Inc.
We love open source software! See our other projects and our products.