@avaturn-live/web-sdk NPM

Avaturn Live Integration Example

This example demonstrates how to integrate and use the AvaturnHead from the @avaturn-live/web-sdk package to display an avatar's video stream on a web page.

Prerequisites

Before running the code, make sure you have a valid session token for Avaturn:

Installation

npm install @avaturn-live/web-sdk

Usage

Import the AvaturnHead class from the @avaturn-live/web-sdk package.
```
import { AvaturnHead } from "@avaturn-live/web-sdk";
```

Initialize the AvaturnHead instance with your session token.

const avatar = new AvaturnHead({ sessionToken: "<YOUR_SESSION_TOKEN>" });

Once the avatar is initialized, get a reference to the HTML video element where you want to display the avatar's video stream.

avatar.init().then(() => {
  const videoRef: HTMLVideoElement = document.querySelector("#video")!;
  videoRef.srcObject = avatar.mediaStream;
  videoRef.play();
});

HTML Structure

Ensure you have an HTML structure with a video element that has an id of video:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Avaturn Head Example</title>
  </head>
  <body>
    <video id="video" autoplay></video>

    <!-- Include your bundled JavaScript here -->
  </body>
</html>

@daily-co/daily-js axios

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago