Discussions

Hello, I hope you are okay, I am using React to try to create an interactive avatar demo, everything is working fine except for the start voice and start video functions, please help.

import StreamingAvatar, {
  AvatarQuality,
  StreamingEvents,
} from "@heygen/streaming-avatar";

// DOM elements
const videoElement = document.getElementById("avatarVideo") as HTMLVideoElement;
const startButton = document.getElementById(
  "startSession"
) as HTMLButtonElement;
const endButton = document.getElementById("endSession") as HTMLButtonElement;
const speakButton = document.getElementById("speakButton") as HTMLButtonElement;
const userInput = document.getElementById("userInput") as HTMLInputElement;

let avatar: StreamingAvatar | null = null;
let sessionData: any = null;

async function fetchAccessToken(): Promise<string> {
  const apiKey = import.meta.env.VITE_HEYGEN_API_KEY;
  const response = await fetch(
    "https://api.heygen.com/v1/streaming.create_token",
    {
      method: "POST",
      headers: { "x-api-key": apiKey },
    }
  );

  const { data } = await response.json();
  return data.token;
}

async function initializeAvatarSession() {
  const token = await fetchAccessToken();
  avatar = new StreamingAvatar({ token });

  sessionData = await avatar.createStartAvatar({
    quality: AvatarQuality.High,
    avatarName: "Wayne_20240711",
    voice: {
      voiceId: '814e0b1c99e9474896b17ec7c2b2a371'
    },
  });

  console.log("Session data:", sessionData);

  endButton.disabled = false;
  startButton.disabled = true;

  avatar.on(StreamingEvents.STREAM_READY, handleStreamReady);
  avatar.on(StreamingEvents.STREAM_DISCONNECTED, handleStreamDisconnected);
  avatar.on(StreamingEvents.USER_START, () => {
    alert("User Speaking!");
  });
}

async function handleStreamReady(event: any) {
  
  if (event.detail && videoElement) {
    videoElement.srcObject = event.detail;
    videoElement.onloadedmetadata = async () => {
      await avatar?.room?.startAudio();
      await avatar?.room?.startVideo();

      videoElement.play().catch(console.error);
    };
  } else {
    console.error("Stream is not available");
  }
}

function handleStreamDisconnected() {
  console.log("Stream disconnected");
  if (videoElement) {
    videoElement.srcObject = null;
  }

  startButton.disabled = false;
  endButton.disabled = true;
}

async function terminateAvatarSession() {
  if (!avatar || !sessionData) return;

  await avatar.stopAvatar({ sessionId: sessionData.session_id });
  videoElement.srcObject = null;
  avatar = null;
}

async function handleSpeak() {
  if (avatar && userInput.value) {
    await avatar.speak({
      text: userInput.value,
      sessionId: sessionData.session_id,
    });
    userInput.value = "";
  }
}

startButton.addEventListener("click", initializeAvatarSession);
endButton.addEventListener("click", terminateAvatarSession);
speakButton.addEventListener("click", handleSpeak);