@snapcall/stream-ui NPM

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