FunctioncreateLiveReact

Returns {
    jsBridge: JSBridgeProtocol;
    live: Live<KeyframesSnapshot>;
    LiveProvider: ((props: LiveProviderPropTypes<KeyframesSnapshot>) => FunctionComponentElement<ProviderProps<null | Live<KeyframesSnapshot>>>);
    unsafe__useLiveInstance: (() => Live<KeyframesSnapshot>);
    unsafe__useRTCInstance: (() => RTCProtocol);
    useConnect: (() => ((options: LiveConnectOptions) => Promise<true | Error>));
    useKeyframe: (<K>(key: K) => (undefined | KeyframesSnapshot[K] | ((frame: KeyframesSnapshot[K]) => boolean | Error))[]);
    useKeyframesSnapshot: (() => Partial<KeyframesSnapshot>);
    useKeyframeUpdateCallback: (<KeyOfKeyframe>(key: KeyOfKeyframe, callback: ((...args: Parameters<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>) => ReturnType<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>), deps?: DependencyList) => (() => void));
    useLiveAction: (() => {
        broadcast: ((data: Record<string, any>, toUserIds: string | string[], timeout?: number) => Promise<void>);
        connect: ((options: LiveConnectOptions) => Promise<void>);
        exit: (() => Promise<void>);
        forbidMicro: ((micro: MicroStatus, toUserIds?: string | string[]) => Promise<void>);
        forbidSync: ((sync: boolean, toUserIds?: string | string[]) => void);
        getFramesByKey: ((key: keyof KeyframesSnapshot) => undefined | Partial<KeyframesSnapshot>[keyof KeyframesSnapshot]);
        kick: ((toUserIds: string | string[]) => Promise<void>);
        sendKeyframe: ((key: keyof KeyframesSnapshot, frame: KeyframesSnapshot[keyof KeyframesSnapshot]) => void);
        setSelfInfo: ((userInfo: Partial<UserInfo>) => void);
        toggleMicro: ((microStatus: boolean) => void);
        updateStatus: ((evtType: BuiltinEventType, atnType: BuiltinActionType, status: Record<string, any>, toUserIds?: string | string[]) => void);
    });
    useLiveEventCallback: (<K>(name: K, callback: ((...args: Parameters<LiveEventType<KeyframesSnapshot>[K]>) => ReturnType<LiveEventType<KeyframesSnapshot>[K]>), deps?: DependencyList) => (() => void));
    useLiveState: (() => LiveState);
    useRTCAction: (() => {
        detectMicro: (() => Promise<boolean>);
        join: ((options: {
            roomId: string;
            type: RTCType;
            userId: string;
            voiceId: string;
        }) => Promise<boolean>);
        quit: (() => Promise<boolean>);
        shock: (() => undefined | void);
        toggleMicro: ((flag?: boolean) => Promise<boolean>);
    });
    useRTCEventCallback: (<K>(name: K, callback: ((...args: Parameters<RTCEventType[K]>) => ReturnType<RTCEventType[K]>), deps?: DependencyList) => (() => void));
    useSelfInfo: (() => (Partial<UserInfo> | ((userInfo: Partial<UserInfo>) => Promise<boolean>))[]);
    useUserList: (() => UserInfo[]);
}

包含 LiveProvider 组件和各种 Hooks 的对象

• jsBridge: JSBridgeProtocol

• live: Live<KeyframesSnapshot>

• LiveProvider: ((props: LiveProviderPropTypes<KeyframesSnapshot>) => FunctionComponentElement<ProviderProps<null | Live<KeyframesSnapshot>>>)

  • • (props): FunctionComponentElement<ProviderProps<null | Live<KeyframesSnapshot>>>

    • LiveProvider 组件

      用于在 React 组件树中提供 Live 实例的上下文。 所有子组件都可以通过 Hooks 访问 Live 实例。

      Parameters

      • props: LiveProviderPropTypes<KeyframesSnapshot>

      Returns FunctionComponentElement<ProviderProps<null | Live<KeyframesSnapshot>>>

      Example

      function App() {
        return (
          <LiveProvider>
            <MyComponent />
          </LiveProvider>
        )
      }
      Copy

• unsafe__useLiveInstance: (() => Live<KeyframesSnapshot>)

  • • (): Live<KeyframesSnapshot>

    • 不安全地获取 Live 实例（不推荐使用）

      直接返回 Live 实例，不检查是否在 LiveProvider 内部。 可能导致在未初始化时访问实例。

      Returns Live<KeyframesSnapshot>

      Live 实例

      Deprecated

      请使用 useLiveInstance 替代

• unsafe__useRTCInstance: (() => RTCProtocol)

  • • (): RTCProtocol

    • 不安全地获取 RTC 实例（不推荐使用）

      Returns RTCProtocol

      RTC 实例

      Deprecated

      请使用 useRTCInstance 替代

• useConnect: (() => ((options: LiveConnectOptions) => Promise<true | Error>))

  • • (): ((options: LiveConnectOptions) => Promise<true | Error>)

    • 带看连接操作的 Hook

      返回一个连接函数，用于连接到带看房间。

      Returns ((options: LiveConnectOptions) => Promise<true | Error>)

      连接函数

      • • (options): Promise<true | Error>

        • Parameters

          • options: LiveConnectOptions

          Returns Promise<true | Error>

      Example

      function MyComponent() {
        const connect = useConnect()
        
        const handleConnect = async () => {
          await connect({
            url: 'wss://example.com/live',
            getTicket: async () => 'ticket'
          })
        }
      }
      Copy

• useKeyframe: (<K>(key: K) => (undefined | KeyframesSnapshot[K] | ((frame: KeyframesSnapshot[K]) => boolean | Error))[])

  • • <K>(key): (undefined | KeyframesSnapshot[K] | ((frame: KeyframesSnapshot[K]) => boolean | Error))[]

    • 使用指定键的帧数据 Hook

      返回指定键的帧数据状态和更新函数，类似于 useState。 当帧数据发生变化时，状态会自动更新。

      Type Parameters

      • K extends string | number | symbol

        帧数据的键类型

      Parameters

      • key: K

        帧数据的键

      Returns (undefined | KeyframesSnapshot[K] | ((frame: KeyframesSnapshot[K]) => boolean | Error))[]

      包含帧数据状态和更新函数的元组 [state, setState]

      Example

      function MyComponent() {
        const [camera, setCamera] = useKeyframe('camera')
        
        // 读取帧数据
        console.log('当前相机位置:', camera?.position)
        
        // 更新帧数据
        const handleUpdateCamera = () => {
          setCamera({ position: [1, 2, 3], rotation: [0, 0, 0] })
        }
      }
      Copy

• useKeyframesSnapshot: (() => Partial<KeyframesSnapshot>)

  • • (): Partial<KeyframesSnapshot>

    • 获取所有帧数据快照的 Hook

      返回当前所有帧数据的快照，当任何帧数据发生变化时会自动更新。

      Returns Partial<KeyframesSnapshot>

      当前所有帧数据的快照

      Example

      function MyComponent() {
        const snapshot = useKeyframesSnapshot()
        
        return (
          <div>
            <div>相机位置: {snapshot.camera?.position?.join(', ')}</div>
            <div>标注: {snapshot.annotation?.text}</div>
          </div>
        )
      }
      Copy

• useKeyframeUpdateCallback: (<KeyOfKeyframe>(key: KeyOfKeyframe, callback: ((...args: Parameters<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>) => ReturnType<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>), deps?: DependencyList) => (() => void))

  • • <KeyOfKeyframe>(key, callback, deps?): (() => void)

    • 监听指定键的帧数据更新回调 Hook

      当指定键的帧数据发生变化时，会调用回调函数。 回调函数会在组件卸载时自动清理。

      Type Parameters

      • KeyOfKeyframe extends string | number | symbol

        帧数据的键类型

      Parameters

      • key: KeyOfKeyframe

        帧数据的键
      • callback: ((...args: Parameters<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>) => ReturnType<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>)

        回调函数，接收新的帧数据、旧的帧数据和请求ID作为参数

        • • (...args): ReturnType<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>

          • Parameters

            • Rest...args: Parameters<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>

            Returns ReturnType<KeyframeEventType<KeyframesSnapshot>[KeyOfKeyframe]>

      • deps: DependencyList = []

        依赖项数组，当依赖项变化时会重新注册回调

      Returns (() => void)

      清理函数，可以手动取消监听

      • • (): void

        • Returns void

      Example

      function MyComponent() {
        useKeyframeUpdateCallback('camera', (nextFrame, prevFrame, requestId) => {
          console.log('相机位置更新:', nextFrame)
        }, [])
      }
      Copy

• useLiveAction: (() => {
      broadcast: ((data: Record<string, any>, toUserIds: string | string[], timeout?: number) => Promise<void>);
      connect: ((options: LiveConnectOptions) => Promise<void>);
      exit: (() => Promise<void>);
      forbidMicro: ((micro: MicroStatus, toUserIds?: string | string[]) => Promise<void>);
      forbidSync: ((sync: boolean, toUserIds?: string | string[]) => void);
      getFramesByKey: ((key: keyof KeyframesSnapshot) => undefined | Partial<KeyframesSnapshot>[keyof KeyframesSnapshot]);
      kick: ((toUserIds: string | string[]) => Promise<void>);
      sendKeyframe: ((key: keyof KeyframesSnapshot, frame: KeyframesSnapshot[keyof KeyframesSnapshot]) => void);
      setSelfInfo: ((userInfo: Partial<UserInfo>) => void);
      toggleMicro: ((microStatus: boolean) => void);
      updateStatus: ((evtType: BuiltinEventType, atnType: BuiltinActionType, status: Record<string, any>, toUserIds?: string | string[]) => void);
  })

  • • (): {
          broadcast: ((data: Record<string, any>, toUserIds: string | string[], timeout?: number) => Promise<void>);
          connect: ((options: LiveConnectOptions) => Promise<void>);
          exit: (() => Promise<void>);
          forbidMicro: ((micro: MicroStatus, toUserIds?: string | string[]) => Promise<void>);
          forbidSync: ((sync: boolean, toUserIds?: string | string[]) => void);
          getFramesByKey: ((key: keyof KeyframesSnapshot) => undefined | Partial<KeyframesSnapshot>[keyof KeyframesSnapshot]);
          kick: ((toUserIds: string | string[]) => Promise<void>);
          sendKeyframe: ((key: keyof KeyframesSnapshot, frame: KeyframesSnapshot[keyof KeyframesSnapshot]) => void);
          setSelfInfo: ((userInfo: Partial<UserInfo>) => void);
          toggleMicro: ((microStatus: boolean) => void);
          updateStatus: ((evtType: BuiltinEventType, atnType: BuiltinActionType, status: Record<string, any>, toUserIds?: string | string[]) => void);
      }

    • 带看操作函数的 Hook

      返回一组用于操作带看功能的函数，包括连接、发送帧数据、控制麦克风等。 所有函数都使用 useCallback 包装，避免不必要的重新渲染。

      Returns {
          broadcast: ((data: Record<string, any>, toUserIds: string | string[], timeout?: number) => Promise<void>);
          connect: ((options: LiveConnectOptions) => Promise<void>);
          exit: (() => Promise<void>);
          forbidMicro: ((micro: MicroStatus, toUserIds?: string | string[]) => Promise<void>);
          forbidSync: ((sync: boolean, toUserIds?: string | string[]) => void);
          getFramesByKey: ((key: keyof KeyframesSnapshot) => undefined | Partial<KeyframesSnapshot>[keyof KeyframesSnapshot]);
          kick: ((toUserIds: string | string[]) => Promise<void>);
          sendKeyframe: ((key: keyof KeyframesSnapshot, frame: KeyframesSnapshot[keyof KeyframesSnapshot]) => void);
          setSelfInfo: ((userInfo: Partial<UserInfo>) => void);
          toggleMicro: ((microStatus: boolean) => void);
          updateStatus: ((evtType: BuiltinEventType, atnType: BuiltinActionType, status: Record<string, any>, toUserIds?: string | string[]) => void);
      }

      包含各种带看操作函数的对象

      • broadcast: ((data: Record<string, any>, toUserIds: string | string[], timeout?: number) => Promise<void>)

        • • (data, toUserIds, timeout?): Promise<void>

          • Parameters

            • data: Record<string, any>
            • toUserIds: string | string[]
            • timeout: number = 0

            Returns Promise<void>

      • connect: ((options: LiveConnectOptions) => Promise<void>)

        • • (options): Promise<void>

          • Parameters

            • options: LiveConnectOptions

            Returns Promise<void>

      • exit: (() => Promise<void>)

        • • (): Promise<void>

          • Returns Promise<void>

      • forbidMicro: ((micro: MicroStatus, toUserIds?: string | string[]) => Promise<void>)

        • • (micro, toUserIds?): Promise<void>

          • Parameters

            • micro: MicroStatus
            • toUserIds: string | string[] = []

            Returns Promise<void>

      • forbidSync: ((sync: boolean, toUserIds?: string | string[]) => void)

        • • (sync, toUserIds?): void

          • Parameters

            • sync: boolean
            • toUserIds: string | string[] = []

            Returns void

      • getFramesByKey: ((key: keyof KeyframesSnapshot) => undefined | Partial<KeyframesSnapshot>[keyof KeyframesSnapshot])

        • • (key): undefined | Partial<KeyframesSnapshot>[keyof KeyframesSnapshot]

          • Parameters

            • key: keyof KeyframesSnapshot

            Returns undefined | Partial<KeyframesSnapshot>[keyof KeyframesSnapshot]

      • kick: ((toUserIds: string | string[]) => Promise<void>)

        • • (toUserIds): Promise<void>

          • Parameters

            • toUserIds: string | string[]

            Returns Promise<void>

      • sendKeyframe: ((key: keyof KeyframesSnapshot, frame: KeyframesSnapshot[keyof KeyframesSnapshot]) => void)

        • • (key, frame): void

          • Parameters

            • key: keyof KeyframesSnapshot
            • frame: KeyframesSnapshot[keyof KeyframesSnapshot]

            Returns void

      • setSelfInfo: ((userInfo: Partial<UserInfo>) => void)

        • • (userInfo): void

          • Parameters

            • userInfo: Partial<UserInfo>

            Returns void

      • toggleMicro: ((microStatus: boolean) => void)

        • • (microStatus): void

          • Parameters

            • microStatus: boolean

            Returns void

      • updateStatus: ((evtType: BuiltinEventType, atnType: BuiltinActionType, status: Record<string, any>, toUserIds?: string | string[]) => void)

        • • (evtType, atnType, status, toUserIds?): void

          • Parameters

            • evtType: BuiltinEventType
            • atnType: BuiltinActionType
            • status: Record<string, any>
            • OptionaltoUserIds: string | string[]

            Returns void

      Example

      function MyComponent() {
        const {
          connect,
          sendKeyframe,
          toggleMicro,
          broadcast,
          exit,
          kick,
          forbidMicro,
          forbidSync,
          getFramesByKey,
          setSelfInfo,
          updateStatus
        } = useLiveAction()
        
        // 连接带看
        const handleConnect = async () => {
          await connect({ url: 'wss://example.com/live', getTicket: async () => 'ticket' })
        }
        
        // 发送帧数据
        const handleSendFrame = () => {
          sendKeyframe('camera', { position: [1, 2, 3] })
        }
        
        // 切换麦克风
        const handleToggleMicro = () => {
          toggleMicro(true)
        }
      }
      Copy

• useLiveEventCallback: (<K>(name: K, callback: ((...args: Parameters<LiveEventType<KeyframesSnapshot>[K]>) => ReturnType<LiveEventType<KeyframesSnapshot>[K]>), deps?: DependencyList) => (() => void))

  • • <K>(name, callback, deps?): (() => void)

    • 监听带看事件的 Hook

      监听指定的带看事件，当事件触发时调用回调函数。 回调函数会在组件卸载时自动清理。

      Type Parameters

      • K extends keyof LiveEventType<KeyframesSnapshot>

        事件名称类型

      Parameters

      • name: K

        事件名称
      • callback: ((...args: Parameters<LiveEventType<KeyframesSnapshot>[K]>) => ReturnType<LiveEventType<KeyframesSnapshot>[K]>)

        回调函数，参数类型根据事件类型自动推断

        • • (...args): ReturnType<LiveEventType<KeyframesSnapshot>[K]>

          • Parameters

            • Rest...args: Parameters<LiveEventType<KeyframesSnapshot>[K]>

            Returns ReturnType<LiveEventType<KeyframesSnapshot>[K]>

      • deps: DependencyList = []

        依赖项数组，当依赖项变化时会重新注册回调

      Returns (() => void)

      清理函数，可以手动取消监听

      • • (): void

        • Returns void

      Example

      function MyComponent() {
        useLiveEventCallback('stateChange', (state, prevState) => {
          console.log(`状态从 ${prevState} 变为 ${state}`)
        }, [])
        
        useLiveEventCallback('userListUpdate', (userList, requestId) => {
          console.log('用户列表更新:', userList)
        }, [])
      }
      Copy

• useLiveState: (() => LiveState)

  • • (): LiveState

    • 获取带看连接状态的 Hook

      返回当前带看连接的状态，当状态发生变化时会自动更新。

      Returns LiveState

      当前连接状态

      Example

      function MyComponent() {
        const state = useLiveState()
        
        return (
          <div>
            连接状态: {state}
            {state === LiveState.OPEN && <div>已连接</div>}
            {state === LiveState.CONNECTING && <div>连接中...</div>}
          </div>
        )
      }
      Copy

• useRTCAction: (() => {
      detectMicro: (() => Promise<boolean>);
      join: ((options: {
          roomId: string;
          type: RTCType;
          userId: string;
          voiceId: string;
      }) => Promise<boolean>);
      quit: (() => Promise<boolean>);
      shock: (() => undefined | void);
      toggleMicro: ((flag?: boolean) => Promise<boolean>);
  })

  • • (): {
          detectMicro: (() => Promise<boolean>);
          join: ((options: {
              roomId: string;
              type: RTCType;
              userId: string;
              voiceId: string;
          }) => Promise<boolean>);
          quit: (() => Promise<boolean>);
          shock: (() => undefined | void);
          toggleMicro: ((flag?: boolean) => Promise<boolean>);
      }

    • RTC 操作函数的 Hook

      返回一组用于操作 RTC 语音通信的函数。

      Returns {
          detectMicro: (() => Promise<boolean>);
          join: ((options: {
              roomId: string;
              type: RTCType;
              userId: string;
              voiceId: string;
          }) => Promise<boolean>);
          quit: (() => Promise<boolean>);
          shock: (() => undefined | void);
          toggleMicro: ((flag?: boolean) => Promise<boolean>);
      }

      包含各种 RTC 操作函数的对象

      • detectMicro: (() => Promise<boolean>)

        • • (): Promise<boolean>

          • Returns Promise<boolean>

      • join: ((options: {
            roomId: string;
            type: RTCType;
            userId: string;
            voiceId: string;
        }) => Promise<boolean>)

        • • (options): Promise<boolean>

          • Parameters

            • options: {
                  roomId: string;
                  type: RTCType;
                  userId: string;
                  voiceId: string;
              }

              • roomId: string

              • type: RTCType

              • userId: string

              • voiceId: string

            Returns Promise<boolean>

      • quit: (() => Promise<boolean>)

        • • (): Promise<boolean>

          • Returns Promise<boolean>

      • shock: (() => undefined | void)

        • • (): undefined | void

          • Returns undefined | void

      • toggleMicro: ((flag?: boolean) => Promise<boolean>)

        • • (flag?): Promise<boolean>

          • Parameters

            • Optionalflag: boolean

            Returns Promise<boolean>

      Example

      function MyComponent() {
        const { join, quit, toggleMicro, detectMicro, shock } = useRTCAction()
        
        // 加入语音房间
        const handleJoin = async () => {
          await join({
            voiceId: 'voice-id',
            userId: 'user-id',
            roomId: 'room-id',
            type: RTCType.RealseeBrowserRTC
          })
        }
        
        // 检测麦克风权限
        const handleDetectMicro = async () => {
          const hasPermission = await detectMicro()
          console.log('麦克风权限:', hasPermission)
        }
      }
      Copy

• useRTCEventCallback: (<K>(name: K, callback: ((...args: Parameters<RTCEventType[K]>) => ReturnType<RTCEventType[K]>), deps?: DependencyList) => (() => void))

  • • <K>(name, callback, deps?): (() => void)

    • 监听 RTC 事件的 Hook

      监听指定的 RTC 事件，当事件触发时调用回调函数。 回调函数会在组件卸载时自动清理。

      Type Parameters

      • K extends keyof RTCEventType

        事件名称类型

      Parameters

      • name: K

        事件名称
      • callback: ((...args: Parameters<RTCEventType[K]>) => ReturnType<RTCEventType[K]>)

        回调函数，参数类型根据事件类型自动推断

        • • (...args): ReturnType<RTCEventType[K]>

          • Parameters

            • Rest...args: Parameters<RTCEventType[K]>

            Returns ReturnType<RTCEventType[K]>

      • deps: DependencyList = []

        依赖项数组，当依赖项变化时会重新注册回调

      Returns (() => void)

      清理函数，可以手动取消监听

      • • (): void

        • Returns void

      Example

      function MyComponent() {
        useRTCEventCallback('joined', (info) => {
          console.log('已加入语音房间:', info)
        }, [])
        
        useRTCEventCallback('userVolumes', (volumes) => {
          console.log('用户音量:', volumes)
        }, [])
      }
      Copy

• useSelfInfo: (() => (Partial<UserInfo> | ((userInfo: Partial<UserInfo>) => Promise<boolean>))[])

  • • (): (Partial<UserInfo> | ((userInfo: Partial<UserInfo>) => Promise<boolean>))[]

    • 获取和设置当前用户信息的 Hook

      返回当前用户信息的状态和更新函数，类似于 useState。 当用户信息发生变化时，状态会自动更新。

      Returns (Partial<UserInfo> | ((userInfo: Partial<UserInfo>) => Promise<boolean>))[]

      包含用户信息状态和更新函数的元组 [state, setState]

      Example

      function MyComponent() {
        const [selfInfo, setSelfInfo] = useSelfInfo()
        
        // 读取用户信息
        console.log('用户ID:', selfInfo?.id)
        console.log('麦克风状态:', selfInfo?.micro_status)
        
        // 更新用户信息
        const handleUpdateInfo = async () => {
          await setSelfInfo({
            extension: {
              nickname: '新昵称',
              avatar: 'https://example.com/avatar.jpg'
            }
          })
        }
      }
      Copy

• useUserList: (() => UserInfo[])

  • • (): UserInfo[]

    • 获取用户列表的 Hook

      返回当前房间内的用户列表，当用户列表发生变化时会自动更新。

      Returns UserInfo[]

      用户信息数组

      Example

      function MyComponent() {
        const userList = useUserList()
        
        return (
          <div>
            <h3>房间用户 ({userList.length})</h3>
            {userList.map(user => (
              <div key={user.id}>
                {user.extension?.nickname || user.id}
                {user.micro_status ? '🎤' : '🔇'}
              </div>
            ))}
          </div>
        )
      }
      Copy

// 定义帧数据类型
interface MyKeyframes {
  camera: { position: [number, number, number] }
  annotation: { text: string; position: [number, number] }
}

// 创建 LiveReact 实例
const { LiveProvider, useLiveAction, useKeyframe } = createLiveReact<MyKeyframes>({
  url: 'wss://example.com/live',
  getTicket: async () => 'ticket',
  getVoiceSign: async (params) => ({ sdkAppId: 0, userId: '', userSig: '', roomId: '' }),
  useBuiltInRTC: true
})

// 在组件中使用
function App() {
  return (
    <LiveProvider>
      <MyComponent />
    </LiveProvider>
  )
}

function MyComponent() {
  const { connect, sendKeyframe } = useLiveAction()
  const [camera, setCamera] = useKeyframe('camera')
  
  // 使用带看功能...
}
Copy