SnapCall Stream UI

The Stream UI is a library that will help you to quickly integrate SnapCall on your application.

Installation

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>

Basic usage

import { streamUI } from '@snapcall/stream-ui';

const container = document.getElementById('container');
const roomToken = '123';

streamUI.init({ element: container });
streamUI.joinRoom(roomToken);

Methods

init(options: InitOptions): void

Initializes the UI, this function must be called before you join a room.

See InitOptions for more details.

joinRoom(token: string): Promise<void>

Joins a room.

leaveRoom(): void

Leaves a room.

terminateRoom(): void

Terminates the room, all participants will be disconnected and the room won't be usable anymore.

generateToken(buttonId: string): Promise<string>

Generate a room token with a SnapCall button ID.

sendNotification(message: string, options: NotificationOptions): void

Send a notification (tooltip), see NotificationOptions for the options.

API

InitOptions

{
  element: HTMLElement;
  sharedURL?: string;
  audioTiles?: boolean;
  settingsShortcuts?: { id: string, displayType: 'icon' | 'full' }[];
  controls?: {
    microphone?: ControlSettings;
    camera?: ControlSettings;
    screenshare?: ControlSettings;
  };
  showMenuButton?: boolean;
}

element

Required

The HTML element where the UI will be rendered.

sharedURL

Default value: window.location.href

The URL used for features such as "Open new tab" or "Quick Connect".

audioTiles

Default value: false

Enable audio-only tiles.

settingsShortcuts

Default value: []

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.

controls

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)
    }
  }
}

controls.microphone

Default value: { available: true, enabled: true }

controls.camera

Default value: { available: true, enabled: false }

controls.screenshare

Default value: { available: true, enabled: false }

showMenuButton

Default value: true

Display or hide the top-right menu button

NotificationOptions

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;
}