React TypeScript

使用 @convai/experience-embed 在你的 React TypeScript 应用中设置并集成 Convai 的 Pixel Streaming 组件。

https://www.npmjs.com/package/@convai/experience-embedwww.npmjs.com

安装说明

要安装 @convai/experience-embed 使用您偏好的包管理器，请使用以下命令之一：

npm

npm install @convai/experience-embed

yarn

yarn add @convai/experience-embed

pnpm

pnpm add @convai

快速开始（React Ts）

1. 导入组件

import { PixelStreamComponent } from '@convai/experience-embed';

---

2. 设置一个 ref 以访问方法

import { useRef } from 'react';
import { PixelStreamComponentHandles } from '@convai/experience-embed';

const pixelStreamRef = useRef<PixelStreamComponentHandles>(null);

3. 在 JSX 中使用组件

<PixelStreamComponent
  ref={pixelStreamRef}
  expId="您的体验 ID"
  InitialScreen={<div>正在加载您的体验...</div>}
/>

expId 是您在 Convai 仪表板中的唯一体验 ID。

4. 使用可用方法进行交互

启用/禁用摄像头

await pixelStreamRef.current?.enableCamera();
await pixelStreamRef.current?.disableCamera();

启用/禁用角色音频

await pixelStreamRef.current?.enableCharacterAudio();
await pixelStreamRef.current?.disableCharacterAudio();

初始化体验

await pixelStreamRef.current?.initializeExperience();

5. 自定义加载界面（可选）

const CustomLoadingScreen = () => (
  <div style={{
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: '#000',
    color: '#fff',
  }}>
    <h2>正在加载您的体验...</h2>
  </div>
);

用法：

<PixelStreamComponent
  ref={pixelStreamRef}
  expId="您的体验 ID"
  InitialScreen={<CustomLoadingScreen />}
/>

完整示例

import React, { useRef } from 'react';
import {
  PixelStreamComponent,
  PixelStreamComponentHandles,
} from '@convai/experience-embed';

function App() {
  const pixelStreamRef = useRef<PixelStreamComponentHandles>(null);

  const handleEnableCamera = async () => {
    await pixelStreamRef.current?.enableCamera();
  };

  const handleDisableCamera = async () => {
    await pixelStreamRef.current?.disableCamera();
  };

  return (
    <div>
      <PixelStreamComponent
        ref={pixelStreamRef}
        expId="您的体验 ID"
        InitialScreen={<div>正在加载您的体验...</div>}
      />
      <button onClick={handleEnableCamera}>启用摄像头</button>
      <button onClick={handleDisableCamera}>禁用摄像头</button>
    </div>
  );
}

export default App;