HeyGen LiveKit React Native Demo

A React Native demo application showcasing real-time avatar streaming using HeyGen's Streaming API and LiveKit. This demo demonstrates how to integrate HeyGen's AI avatars with real-time video streaming capabilities in a mobile application.

React Native Integration Guide with Streaming API + LiveKit - HeyGen Documentation

ios-livekit-demo2.mp4

Features

• Real-time AI avatar streaming
• Text-to-speech functionality
• WebRTC video streaming using LiveKit
• React Native/Expo implementation
• iOS and Android support

Prerequisites

• Node.js
• Bun package manager
• Expo CLI
• iOS Simulator/Android Emulator or physical device
• HeyGen API Key

Installation

1. Clone the repository:

git clone https://github.com/agmmnn/streaming-api-react-native
cd streaming-api-react-native

bun i

2. Configure API token variable:

Make sure to replace API_CONFIG.apiKey with your actual API key.

const API_CONFIG = {
  apiKey: "apikey",
  serverUrl: "https://api.heygen.com",
};

Development

1. Create development build:

expo prebuild

Run on iOS:

expo run:ios
# For physical device
expo run:ios --device

Run on Android:

expo run:android

Note: This app requires a development build and cannot run in Expo Go due to native dependencies.

Project Structure

├── App.tsx              # Main application component
├── app.json            # Expo configuration
├── babel.config.js     # Babel configuration
├── tsconfig.json       # TypeScript configuration
└── package.json        # Project dependencies

Implementation Details

The app demonstrates:

• HeyGen Streaming API integration
• LiveKit WebRTC setup
• Real-time video streaming
• Text-to-speech functionality
• Session management
• Error handling

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Resources

• HeyGen API Documentation
• LiveKit React Native Client SDK
• Expo Documentation

---

Built with using HeyGen API and LiveKit