Lybic Docs

快速开始

开始使用 Lybic UI SDK

通过阅读本指南,您可以了解如何使用 Lybic UI SDK 在您自己的 Web 应用程序中嵌入沙箱流式传输。

安装

您可以使用 npm 或 yarn 安装 Lybic UI SDK。

bash npm install @lybic/ui
bash pnpm install @lybic/ui
bash yarn add @lybic/ui

获取沙箱连接详情

您应该从自己的后端获取沙箱连接详情。永远不要将您的 Lybic API 密钥暴露给客户端!

请参阅您所用语言的文档,了解如何获取沙箱连接详情。

实时流式传输到沙箱

Lybic UI SDK 提供向沙箱 GUI 实时流式传输的功能。

您必须在 DOM 中添加一个 canvas 元素,例如:

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

然后使用 canvas 元素初始化 Lybic UI SDK 并开始流式传输:

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

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

您应该监听 errorEvent$ 来处理错误:

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

这些事件始终是关键的,意味着发出时实时流被视为失败。

销毁流式传输客户端

当您想停止流式传输时,应该销毁流式传输客户端:

await streamingClient.destroy()

销毁后,您不应重用同一个流式传输客户端。

本页内容