The Stream UI is a library that will help you to quickly integrate SnapCall on your application.
npm install @snapcall/stream-ui
The NPM package is distributed both as a CommonJS and ES module.
We also distrubute a UMD build of the package, which can be used directly in the browser.
<script src="https://unpkg.com/@snapcall/stream-ui@latest/dist/stream-ui.umd.js"></script>
import { streamUI } from '@snapcall/stream-ui';
const container = document.getElementById('container');
const roomToken = '123';
streamUI.init({ element: container });
streamUI.joinRoom(roomToken);
Initializes the UI, this function must be called before you join a room.
See InitOptions for more details.
Joins a room.
Leaves a room.
Terminates the room, all participants will be disconnected and the room won't be usable anymore.
Generate a room token with a SnapCall button ID.
Send a notification (tooltip), see NotificationOptions for the options.
{
element: HTMLElement;
sharedURL?: string;
audioTiles?: boolean;
settingsShortcuts?: { id: string, displayType: 'icon' | 'full' }[];
controls?: {
microphone?: ControlSettings;
camera?: ControlSettings;
screenshare?: ControlSettings;
};
showMenuButton?: boolean;
}
The HTML element where the UI will be rendered.
The URL used for features such as "Open new tab" or "Quick Connect".
Enable audio-only tiles.
Specified options are added as a small shortcut next to the menu button.
Type are full
or icon
.
Possible id values are: openNewTab
, copyLink
, quickConnect
, settings
and pip
.
Allows to manage the available and enabled devices
type Device = 'microphone' | 'camera' | 'screenshare';
{
controls: {
<Device>: {
available: boolean; // Display or hide the corresponding device button
enabled: boolean; // Enable or disable the default state of the device (when entering a room)
}
}
}
Display or hide the top-right menu button
interface NotificationOptions {
icon?: JSX.Element | string;
subText?: string;
button?: {
icon?: JSX.Element | string;
text: string;
action: ({ close }: { close: () => void }) => void;
};
status?: {
icon?: JSX.Element | string;
text?: string;
boldText?: string;
};
width?: string;
backgroundColor?: string;
messageStyle?: React.CSSProperties;
ellipsis?: boolean;
duration?: number;
}