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 |

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.