Skip to content

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

License

Notifications You must be signed in to change notification settings

Catalyst-Video/catalyst-react

Repository files navigation

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.