> ## Documentation Index
> Fetch the complete documentation index at: https://docs.talking-avatar.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# LiveAvatarView

> Plays a Realistic Avatars session's video and voice in your page over WebRTC, and reconnects by itself.

```js theme={null}
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](https://docs.talking-avatar.dev/realistic-avatars/livekit.md), your LiveKit client plays the avatar.

## new LiveAvatarView(options)

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

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

**container** `HTMLElement` *required*

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

**endpoint** `string | (body) =\> Promise\<object\>` *required*

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

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

**iceServers** `RTCIceServer[]` (default: a public STUN server)

Add your TURN server for viewers behind strict firewalls.

**onStatus** `(status) =\> void`

Called when the [status](#status) changes.

**onError** `(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

| 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

```jsx theme={null}
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>}
    </>
  );
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.