Skip to content

tyaga001/facetime-on-stream

Repository files navigation

πŸš€ FaceTime with Stream

Welcome to FaceTime, a video communication app powered by GetStream.io.

Check out the blog post on how I built this app here.

img.png

Demo

img.png

Check out the live demo here.

🌟 Key Features

  • Real-time Video Communication: Powered by GetStream.io for smooth, high-quality video calls.
  • Instant Meetings: Create on-the-fly video sessions with a single click.
  • Scheduled Calls: Plan ahead with our calendar integration.
  • Shareable Links: Generate and share meeting links easily.

πŸ“‹ Prerequisites

Before you begin, ensure you have the following:

  • Node.js (v14.x or higher)
  • npm (usually comes with Node.js)
  • Clerk account for auth
  • GetStream.io account for video streaming

πŸš€ Getting Started

Follow these steps to set up the project locally:

1. Clone the Repository

git clone https://github.com/your-username/face-time-on-stream.git
cd face-time-on-stream

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env.local file in the root directory and add the following:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# GetStream.io
STREAM_APP_ID=your_stream_app_id
NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key
STREAM_SECRET_KEY=your_stream_secret_key

# App Configuration
NEXT_PUBLIC_FACETIME_HOST=http://localhost:3000/facetime

Replace the placeholder values with your actual credentials.

4. Run the Development Server

npm run dev

Your app should now be running at http://localhost:3000.

πŸ›  Project Structure

face-time-on-stream/
β”‚
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ app/
β”‚   β”‚   β”œβ”€β”€ modals/
β”‚   β”‚   β”‚   β”œβ”€β”€ CreateLink.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ InstantMeeting.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ JoinMeeting.tsx
β”‚   β”‚   β”‚   └── UpcomingMeeting.tsx
β”‚   β”‚   β”‚
β”‚   β”‚   β”œβ”€β”€ layout.tsx
β”‚   β”‚   └── page.tsx
β”‚   β”‚
β”‚   β”œβ”€β”€ hooks/
β”‚   β”‚   └── []
β”‚   β”‚
β”‚   └── lib/
β”‚       └── [util.ts]
β”‚
β”œβ”€β”€ public/
β”‚   └── stream-logo.png
β”‚
β”œβ”€β”€ .env.local
β”œβ”€β”€ next.config.js
β”œβ”€β”€ package.json
└── README.md

πŸ“š API Reference

Clerk Authentication

I use Clerk for user auth. Learn more about Clerk's API.

GetStream.io Video

All video calls are powered by GetStream.io. Explore GetStream's video API.

img_1.png

πŸ™ Acknowledgements

  • GetStream.io for their excellent video streaming platform.

Built with ❀️ by Ankur Tyagi