快速开始
开始使用 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()销毁后,您不应重用同一个流式传输客户端。