This quickstart guide will walk you through the process of setting up, authenticating, and implementing a real-time AI Avatar application.
By the end of this guide, you’ll have a Interactive AI Avatar that you can interact with.
Create a new stream by setting your API key, AI Avatar ID, and language.
You can explore various AI Avatars at https://app.vmonster.io/profiles.
Copy
const fetchNewStream = async () => { const formData = new FormData(); // Enter the ID of the AI Avatar you want to use. formData.append("aiavatar_id", "b9065cba-07ba-4720-8686-69dfca10a94c"); // Enter the language. The accent and speech pattern will vary based on the language. formData.append("language", "en"); const response = await fetch("https://api.vmonster.io/v1/streams", { method: "POST", headers: { "x-api-key": process.env.VMONSTER_API_KEY, }, body: formData, }); const data = await response.json(); return data;};
In a production environment, call the above code from the backend. If you call it from the client side, the API key may be exposed.
Use the created stream information to join a room.
Copy
const { stream_id, token, session_id } = await fetchRoomConfig();const room = new VmonsterRoom({ serverUrl: "https://api.vmonster.ai/v1/streaming",});room.join({ sessionId: session_id, streamId: stream_id, token: token,});// When joined to a room, add the AI Avatar's video.// It will be appended to the element with the ID "aiavatar-video-parent" or to the body.room.on("joined", () => { room.addVideo({ width: "400px", borderRadius: "10px", });});