@sendbird/live-uikit-react v1.0.0-beta.5

Sendbird Live UIKit for React

Requirements

The minimum requirements for 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 UIKit for Live is an add-on to Sendbird Live SDK which provides live streaming feature and uses open channels from Sendbird Chat SDK for chat. Installing the Sendbird UiKit for Live will automatically install the Live SDK and the Chat SDK.

Before installing Sendbird UIKit for Live, create a Sendbird account to acquire an application ID which you will need to initialize the 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 UIKit for Live. When you install the UiKit for Live, Sendbird Live SDK will be installed implicitly.

Step 1 Install the UIKit

You can install 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, the minimum version of the Chat SDK must be equal or greater than minimum version specified by 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 file should look like the following:

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

Next, import UIKit components to your app.

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

Step 2 Implement UIKit to your web app

Once you're done installing Sendbird UIKit for Live, 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 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 app to start a streaming. First, create a live event by clicking on the icon in the top-left corner. Then, you can set the title and cover image, and hosts for your live event. After the live event has been created, start the live event by clicking on the icon in the bottom-right corner. Once the live event started, broadcast yourself and chat with the participants.

insert gif here

You've successfully started your first live with SendbirdLive.

App

The App component is a collection of all UIKit components needed to quickly implement a basic live, and only requires the app ID and user ID to be configured.

List of property

customize.liveEventList

customize.liveEventView

customize.hostView

customize.CreateEventView