130 lines
3 KiB
Markdown
130 lines
3 KiB
Markdown
# Quick Start: Making aethex.live Your Streaming Platform
|
|
|
|
## 🚀 5-Minute Setup
|
|
|
|
### Step 1: Choose Your Streaming Provider
|
|
|
|
**Easiest Option - Cloudflare Stream:**
|
|
1. Go to https://dash.cloudflare.com/
|
|
2. Select "Stream" from the sidebar
|
|
3. Create a new live input
|
|
4. Copy your HLS playback URL
|
|
|
|
**Alternative Options:**
|
|
- **Mux** - https://mux.com (great developer experience)
|
|
- **AWS IVS** - https://aws.amazon.com/ivs/ (scalable)
|
|
- **Self-hosted** - See STREAMING_SETUP.md
|
|
|
|
### Step 2: Configure Your Stream
|
|
|
|
```bash
|
|
# Create your environment file
|
|
cp .env.example .env.local
|
|
|
|
# Edit .env.local and add your stream URL:
|
|
NEXT_PUBLIC_STREAM_URL=your-hls-stream-url-here.m3u8
|
|
```
|
|
|
|
### Step 3: Test Locally
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Visit http://localhost:3000 - your stream should appear!
|
|
|
|
### Step 4: Set Up OBS Studio
|
|
|
|
1. Download OBS: https://obsproject.com/
|
|
2. In OBS: Settings → Stream
|
|
3. Add your RTMP URL and Stream Key (from your provider)
|
|
4. Click "Start Streaming"
|
|
|
|
### Step 5: Deploy to Production
|
|
|
|
**Deploy to Vercel (Recommended):**
|
|
|
|
```bash
|
|
# Install Vercel CLI
|
|
npm i -g vercel
|
|
|
|
# Deploy
|
|
vercel
|
|
|
|
# Add your environment variables in Vercel dashboard
|
|
# Settings → Environment Variables → Add NEXT_PUBLIC_STREAM_URL
|
|
```
|
|
|
|
**Or use the Vercel button:**
|
|
- Push to GitHub
|
|
- Click "Deploy with Vercel" button in README
|
|
- Add environment variables
|
|
|
|
## ✅ You're Live!
|
|
|
|
Your platform is now running at: `https://your-project.vercel.app`
|
|
|
|
## 🎯 Next Steps
|
|
|
|
### Make It Yours
|
|
|
|
1. **Update Branding**
|
|
- Edit `app/page.tsx` - Change "AeThex LABS" to your brand
|
|
- Replace favicon in `app/favicon.ico`
|
|
- Update colors in the components
|
|
|
|
2. **Add Real Chat** (Currently mock)
|
|
- Firebase: See `docs/FIREBASE_CHAT.md`
|
|
- WebSocket: See `docs/WEBSOCKET_CHAT.md`
|
|
- Use API routes in `app/api/chat/`
|
|
|
|
3. **Connect Custom Domain**
|
|
- In Vercel: Settings → Domains
|
|
- Add `aethex.live`
|
|
- Update DNS records
|
|
|
|
4. **Add Features**
|
|
- [ ] User authentication
|
|
- [ ] VOD archives
|
|
- [ ] Multiple channels
|
|
- [ ] Subscriptions/donations
|
|
- [ ] Analytics dashboard
|
|
|
|
## 📊 Monitor Your Stream
|
|
|
|
- **Viewer Count**: Update `components/ViewerCount.tsx` with real data
|
|
- **Stream Status**: Use `/api/stream/status` endpoint
|
|
- **Chat History**: Use `/api/chat/messages` endpoint
|
|
|
|
## 🛟 Common Issues
|
|
|
|
**Stream won't load:**
|
|
- Check your HLS URL is correct
|
|
- Verify CORS is enabled on your stream
|
|
- Check browser console for errors
|
|
|
|
**Chat not working:**
|
|
- Currently uses mock data
|
|
- Implement real backend (see API routes)
|
|
- Add WebSocket or Firebase
|
|
|
|
**Deployment fails:**
|
|
- Verify environment variables are set
|
|
- Check build logs in Vercel
|
|
- Ensure all dependencies are installed
|
|
|
|
## 📚 Additional Resources
|
|
|
|
- **Streaming Setup**: `STREAMING_SETUP.md`
|
|
- **Config Reference**: `config/streaming.ts`
|
|
- **API Routes**: `app/api/`
|
|
|
|
## 💬 Need Help?
|
|
|
|
- Check GitHub Issues
|
|
- Join our Discord (if configured)
|
|
- Review Next.js docs: https://nextjs.org/docs
|
|
|
|
---
|
|
|
|
**You're all set!** Start streaming and building your community on aethex.live! 🎉
|