LiveAvatarView

import { LiveAvatarView } from "@interviewflowai/talking-avatar/live";

Your page never holds the API key: LiveAvatarView talks to one route on your server that returns avatar.handleView(body). Use it in direct mode only; in LiveKit mode, your LiveKit client plays the avatar.

new LiveAvatarView(options)

const view = new LiveAvatarView({
  container: document.getElementById("avatar"),
  endpoint: "/avatar",
  onStatus: (status) => console.log(status),
});

startButton.onclick = () => view.connect();

HTMLElement

required

The element the video fills, fitted whole and never cropped. Or pass your own <video> element.

string | (body) => Promise<object>

required

Your route that returns avatar.handleView(body) as JSON. A string is POSTed with same-origin cookies. Pass a function to make the request yourself, for example with auth headers:

endpoint: (body) =>
  fetch("/avatar", {
    method: "POST",
    headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
    body: JSON.stringify(body),
  }).then((r) => r.json()),

RTCIceServer[]

default:"a public STUN server"

Add your TURN server for viewers behind strict firewalls.

(status) => void

Called when the status changes.

(error: Error) => void

default:"console.warn"

Errors while connecting. The view retries by itself.

Methods

Method	Description
`connect()`	Starts playing. Call it from a click, so the browser lets the voice play.
`disconnect()`	Stops playing, for example when the conversation UI goes away. It doesn’t end the session; `avatar.close()` on your server does.
`unmute()`	After status `muted`, call it from a click to turn the voice on.

Properties

Property	Type	Description
`video`	`HTMLVideoElement`	The `<video>` element
`status`	`string`	The current status

Status

Status	Meaning
`connecting`	Connecting to the stream
`live`	Playing
`muted`	Playing, but the browser blocked sound. Show a button that calls `unmute()`.
`reconnecting`	The connection dropped, or frames stopped arriving. It reconnects by itself.
`closed`	Not connected

React example

import { useEffect, useRef, useState } from "react";
import { LiveAvatarView } from "@interviewflowai/talking-avatar/live";

export function Avatar() {
  const box = useRef(null);
  const view = useRef(null);
  const [status, setStatus] = useState("closed");

  useEffect(() => {
    view.current = new LiveAvatarView({ container: box.current, endpoint: "/avatar", onStatus: setStatus });
    return () => view.current.disconnect();
  }, []);

  return (
    <>
      <div ref={box} style={{ width: "100%", aspectRatio: "16 / 9" }} />
      {status === "closed" && <button onClick={() => view.current.connect()}>Start</button>}
      {status === "muted" && <button onClick={() => view.current.unmute()}>Turn on sound</button>}
    </>
  );
}

Package

Realistic Avatars

Open Source

new LiveAvatarView(options)

Methods

Properties

Status

React example

​new LiveAvatarView(options)

​Methods

​Properties

​Status

​React example

new LiveAvatarView(options)

Methods

Properties

Status

React example