https://github.com/agmmnn/interactive-avatar-playground

Next.js starter for HeyGen Interactive Streaming Avatar service with various features.
https://github.com/agmmnn/interactive-avatar-playground

avatar heygen interactive nextjs streaming webrtc

Last synced: 3 months ago
JSON representation

Next.js starter for HeyGen Interactive Streaming Avatar service with various features.

• Host: GitHub
• URL: https://github.com/agmmnn/interactive-avatar-playground
• Owner: agmmnn
• Created: 2024-06-12T16:24:15.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-07-15T15:37:04.000Z (7 months ago)
• Last Synced: 2024-10-11T12:45:44.960Z (4 months ago)
• Topics: avatar, heygen, interactive, nextjs, streaming, webrtc
• Language: TypeScript
• Homepage: https://sa-play.vercel.app
• Size: 1.53 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# Streaming Avatar Next.js Demo

This project is a demonstration of how to use HeyGen's [Streaming Avatar](https://docs.heygen.com/docs/streaming-avatars-api) service in your application built with Next.js. It offers various features to enhance your streaming experience, including background removal, screenshot capabilities, video recording, and more.

https://github.com/agmmnn/streaming-avatar-playground/assets/16024979/76c08640-189d-4354-a1b7-397b80d2f197

## Getting Started

To get started with the development server, follow these steps:

```bash

bun install

bun dev

```

The server will start on [http://localhost:3000](http://localhost:3000). Open this URL in your browser to view the application.

## Features

- [x] **Remove Background:** Automatically remove the green background from your video stream.

- [x] **Screenshot Current Frame:** Capture a screenshot of the current frame in your video stream.

- [x] **Record Stream Video:** Record your stream video and download.

- [x] **Custom Background:** Replace your background with a custom image or video.

- [ ] **Multiple LLMs:** Integrate with multiple Language Learning Models (coming soon).

- [ ] **Speech to Text:** Convert speech to text in real-time (coming soon).

- [ ] **Chatbox:** Interactive chatbox for communication. (coming soon).

- [ ] **Save Conversation History:** Save and retrieve past conversation history (coming soon).

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.