@snapcall/stream-ui

SnapCall Stream UI

The Stream UI is a library that will help you to quickly integrate SnapCall on your application. It allows you to join a call or record media.

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

Depending on your Stream token you will join a call or start a media recording session.

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

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

streamUI.initV2({ element: container, token: roomToken });

Methods

initV2(options: InitOptions): void

Initializes the UI and start the session.

See InitOptions for more details.

leaveRoom(): void

Leaves a room.

terminateRoom(): void

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

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

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

API

InitOptions

{
  element: HTMLElement;
  sharedURL?: string;
  audioTiles?: boolean;
  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.

controls

Allows to manage the available and enabled devices for call.

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