Live JavaScript v1
Live JavaScript
Live
JavaScript
Home
/
Live
/
JavaScript

Start your first live

Sendbird Live UIKit for React is a set of prebuilt UI components that allows you to easily craft an in-app livestream with the essential streaming features including real-time chat. Our development kit includes UI components which you can customize to create an engaging live event experience for users.

Follow the guide below to start your live event with our easy to use UI components in React. This library isn't designed to work with other frameworks such as Vue or Angular. If you would like to build using the Live SDK only, refer to Sendbird Live SDK.


Requirements

The minimum requirements for the Live UIKit for React are:

  • React 16.8.0 or higher
  • React DOM 16.8.0 or higher
  • WebRTC API supported browsers

Before you start

Sendbird Live UIKit is an add-on to Sendbird Live SDK which provides live streaming feature and uses open channels for chat from Sendbird Chat SDK. Installing the Live UIKit will automatically install the Live SDK and the Chat SDK.

Before installing the Live UIKit, create a Sendbird account to acquire an application ID which you will need to initialize the Live UIKit. Go to Sendbird Dashboard and create an application by selecting Calls+Live in product type. Once you have created an application, go to Overview and you will see the Application ID.


Get started

You can start building your first live event by installing the Live UIKit. When you install the Live UIKit, Sendbird Live SDK will be installed implicitly.

Step 1 Install the Live UIKit

You can install the Live UIKit for React through npm. Enter the following code on the command line with npm. The minimum requirements listed above must be installed on your system to use npm.

Note: If you have already been using Sendbird Chat or want to know the minimum version of the Chat SDK to use the Live UIKit, you can check the information in Sendbird Live SDK.

npm i @sendbird/live-uikit-react

When using yarn, enter the following command.

yarn add @sendbird/live-uikit-react

An example of a tsconfig.json file should look like the following.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "esModuleInterop": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Next, import the Live UIKit components to your app.

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

Step 2 Implement the Live UIKit to your web app

Once you're done installing Sendbird Live UIKit, you can now implement it to your web app by using the App component. The App component is a group of essential UI components needed to build a functioning streaming interface.

Add the following pattern to your project to use the App component.

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

const App = () => {
    return (
        <div className="App">
            <SendbirdLiveApp
                // Add the two lines below.
                appId={YOUR_APP_ID}     // Specify your Sendbird application ID.
                userId={USER_ID}        // Specify your user ID.
            />
        </div>
    );
};

Specify the dimensions of your chat interface.

.App {
    height: 100vh;  // Add this line.
    width: 100vw;       // Add this line.
}

Step 3 Start you first live

You can now run the web app to start streaming. First, create a live event by selecting the Create button in the top-left corner. Then, you can set the title and cover image, and add users who can take turns being a host for your live event. After the live event has been created, start the live event by selecting the Start live event button in the bottom-right corner. Once the live event has started, you can share your media stream and chat with the participants.


App

The App component is a collection of all the Live UIKit components needed to quickly implement a basic live event, and only requires appId and userId to configure.

List of properties

Properties
RequiredTypeDescription

appId

string

The unique ID of the application.

userId

string

The unique ID of the user.

OptionalTypeDescription

accessToken

string

An opaque string that identifies the user. It is recommended that every user has their own access token and provides it upon login for security. (Default: null)

stringSet

object

The set of strings for the Live UIKit components. This can override the default language. (Default: null)

colorSet

object

The set of colors used in the Live UIKit themes. This can override the default theme. (Default: null)

imageSet

object

The set of images for the Live UIKit components. This can override the default images. (Default: null)

fontSet

object

The set of fonts for the Live UIKit components. This can override the default fonts. (Default: null)

customize

object

The set of objects that customize each component in App. (Default: null)

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

/* example 'customize' object.
const CUSTOMIZE = {
    LiveEventList: {
        showHostNickname: false
    }
};
*/

const App = () => {
    return (
        <div className="App">
            <SendbirdLiveApp
                // Add the two lines below.
                appId={YOUR_APP_ID}     // Specify your Sendbird application ID.
                userId={USER_ID}        // Specify your user ID.
                accessToken={ACCESS_TOKEN}
                stringSet={STRING_SET}
                customize={CUSTOMIZE}
            />
        </div>
    );
};