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

Meta

Created by @GoldinGuy and @JoeSemrai

The master branch of this repository contains Catalyst V3, the latest version. The older V2 version can be found on the Catalyst V2 Branch.

Catalyst is designed with safety and security in mind. Visit our terms of service and privacy policy to learn more.

Catalyst V3 is based on a custom version of WebRTC SFU LiveKit infrastructure to allow for more stability and scalability. Prior versions of Catalyst made use of direct P2P protocols.

Distributed under the AGPL-3.0-only license. See LICENSE for more information.