diff --git a/README.md b/README.md index f84a050..23ff29a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # HeyGen Streaming Avatar NextJS Demo +![HeyGen Streaming Avatar NextJS Demo Screenshot](./public/demo.png) + This is a sample project and was bootstrapped using [NextJS](https://nextjs.org/). Feel free to play around with the existing code and please leave any feedback for the SDK [here](https://github.com/HeyGen-Official/StreamingAvatarSDK/discussions). diff --git a/app/page.tsx b/app/page.tsx index c39416a..61a8b8b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -20,7 +20,7 @@ export default function App() { return (
-
+
{(items) => ( diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 163b7e6..cb1b3ae 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -26,24 +26,28 @@ export default function NavBar() { Avatars Voices API Docs diff --git a/components/StreamingAvatar.tsx b/components/StreamingAvatar.tsx index aa43a22..c5f6b65 100644 --- a/components/StreamingAvatar.tsx +++ b/components/StreamingAvatar.tsx @@ -83,7 +83,7 @@ export default function StreamingAvatar() { } } - async function start() { + async function startSession() { setIsLoadingSession(true); await updateToken(); if (!avatar.current) { @@ -131,7 +131,7 @@ export default function StreamingAvatar() { setInitialized(true); } - async function stop() { + async function endSession() { if (!initialized || !avatar.current) { setDebug("Avatar API not initialized"); return; @@ -169,7 +169,7 @@ export default function StreamingAvatar() { init(); return () => { - stop(); + endSession(); }; }, []); @@ -251,11 +251,11 @@ export default function StreamingAvatar() {
) : !isLoadingSession ? ( @@ -272,7 +272,7 @@ export default function StreamingAvatar() { />