Catalyst-vc-react NPM

Catalyst Video Chat

📷💬 Reliable and scalable open-source video chat in a few lines of code.

Check out the full Catalyst documentation!

Quick Start

Installation

Catalyst can be installed using either npm or yarn

npm i catalyst-vc-react

Importation

import CatalystChat from "catalyst-vc-react"

Implementation

	<CatalystChat
			room="ROOM_NAME"
			appId="YOUR_CATALYST_PROJECT_ID"
			name="MEMBER_NAME"
			onEndCall={() => console.log('Call ended!')}
		/>

You will need a Catalyst appId API key to connect to our servers. This can be obtained in under a minute by visiting the API keys tab of our management portal.

Our servers are free for your first 30 monthly active users, which means they should not cost you anything in development (and possibly production)!

We recommend a minimum parent container size of 400px X 450px.

Parameters

Prop	Description	Type	Example Value	Required
`room`	Unique session identifier (peers with the same `room` are connected)	`string`	`ROOM_NAME`	Required
`appId`	Unique project identifier, obtained from the API keys tab of our management portal	`string`	`YOUR_CATALYST_PROJECT_ID`	Required
`name`	Display name of member joining the call	`string`	`MEMBER_NAME`	Optional
`fade`	Milliseconds of no user interaction before fading out controls. Disabled when set to `0`	`number`	`600`	Optional
`audioOffDefault`	Is microphone disabled by default	`boolean`	`true`	Optional
`videoOffDefault`	Is webcam disabled by default	`boolean`	`true`	Optional
`theme`	Color scheme. Includes: primary (main color), secondary (background color), tertiary (button color), quaternary (button hover color), quinary (text color)	`string`	`{ primary?: string; secondary?: string; tertiary?: string; quaternary?: string; quinary?: string; }`	`default`	Optional
`simulcast`	Publish multiple levels of quality for video streams	`boolean`	`true`	Optional
`disableChat`	Hide text chat functionality	`boolean`	`true`	Optional
`disableSetupView`	Skip setup view	`boolean`	`true`	Optional
`disableNameField`	Hide user name input field in setup view	`boolean`	`true`	Optional
`cstmSetupBg`	Gradient or hex-code background for setup view	`string`	`#fff`	Optional
`disableRefreshBtn`	Hide refresh button in top settings bar	`boolean`	`true`	Optional
`cstmWelcomeMsg`	Message displayed when you are the only member in room	`string`, `HTMLElement`	`Welcome!`	Optional
`cstmSupportUrl`	Url for all help/support messages. When set to an empty string hides support icon.	`string`	`https://catalyst.chat/contact.html`	Optional
`arbData`	Data passed to all other members of room	`Uint8Array`	`TextEncoder().encode('str')`	Optional
`handleReceiveArbData`	Function triggered whenever arbitrary data is received	`Function`	`(arbData: Uint8Array) => void`	Optional
`handleUserData`	Function passed all user metadata after token is generated	`Function`	`(userData: CatalystUserData) => void`	Optional
`onJoinCall`	Function triggered when user joins the call	`Function`	`() => void`	Optional
`onMemberJoin`	Function triggered when a member joins the call	`Function`	`() => void`	Optional
`onMemberLeave`	Function triggered when a member leaves the call	`Function`	`() => void`	Optional
`onLeaveCall`	Function triggered when user leaves call	`Function`	`() => void`	Optional

catalyst-vc-react v3.2.1