Get Started

By reading this guide, you can learn how to use Lybic UI SDK to embed the sandbox streaming in your own web application.

Install

You can install Lybic UI SDK using npm or yarn.

npm install @lybic/ui

pnpm install @lybic/ui

yarn add @lybic/ui

Get Sandbox Connection Details

You should get the sandbox connection details from your own backend. Never expose your Lybic API key to the client!

See the documentation of your language to learn how to get the sandbox connection details.

Live Streaming to the Sandbox

Lybic UI SDK provides the power of live streaming to the sandbox GUI.

You have to add a canvas element to your DOM, for example:

<canvas id="lybic-ui-canvas" tabindex="0"></canvas>

And then initialize the Lybic UI SDK with the canvas element and start the streaming:

import { StreamingClient } from '@lybic/ui/streaming-client-ts'

const el = document.getElementById('lybic-ui-canvas')
const streamingClient = new StreamingClient(el)
await streamingClient.start(connectionDetails)

You should listen to the errorEvent$ to handle the errors:

streamingClient.errorEvent$.subscribe({
  error: (error) => {
    console.error(error)
  },
})

These events are always critical, means the live stream is considered as failed when emitted.

Destroy the Streaming Client

You should destroy the streaming client when you want to stop the streaming:

await streamingClient.destroy()

You should not reuse the same streaming client after destroying it.