@avaturn-live/web-sdk
v0.0.22
Published
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.
Downloads
64
Readme
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-sdkUsage
Import the
AvaturnHeadclass from the@avaturn-live/web-sdkpackage.import { AvaturnHead } from "@avaturn-live/web-sdk";Initialize the
AvaturnHeadinstance 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>