📺 Agora Live Streaming App

⭐ If you find this project helpful, please give it a star! ⭐

A Flutter-based live streaming application using Agora SDK with full host control over viewers and co-hosts. Perfect for creating Instagram-style live streams where the host can invite co-hosts and control who watches.

✨ Features

Feature	Description
🎬 Host Live Stream	Start a live stream with your own channel name
👥 Co-Host Support	Invite others to broadcast alongside you (split-screen view)
👀 Viewer Mode	Allow viewers to watch without broadcasting
🔐 Access Control	Host controls who can join via unique access codes
🎤 Audio Controls	Mute/unmute microphone during stream
📹 Video Controls	Turn camera on/off during stream
📤 Easy Sharing	Share access codes via any app or copy to clipboard
📱 Cross-Platform	Works on Android, iOS, macOS, Linux, and Windows

🎥 Demo

The GIF above shows the complete flow:

Host starts a stream
Host shares viewer/co-host codes
Viewers and co-hosts join using the codes
Split-screen view when co-host joins

📦 Prerequisites

Before running this app, make sure you have:

✅ Flutter SDK (version 3.10.4 or higher)
✅ Dart SDK (comes with Flutter)
✅ Android Studio or Xcode (for mobile development)
✅ Agora Account (free tier available)

🚀 Setup Instructions

Step 1: Clone the Repository

git clone <your-repo-url>
cd Agora-Live-Streaming-App

Step 2: Get Your Agora App ID (⚠️ REQUIRED)

IMPORTANT: This app requires an Agora App ID to work. Without it, the live streaming will not function.

Go to Agora Console
Sign up for a free account (or log in)
Click "Create a Project"
Enter a project name (e.g., "LiveStreamApp")
Select "APP ID" as the authentication mechanism (NOT Token)
Click "Submit"
Copy your App ID from the project dashboard

Step 3: Configure the App ID

Navigate to the frontend folder:
```
cd frontend
```

Create or edit the .env file:

# Create .env file if it doesn't exist
touch .env

Add your Agora App ID to the .env file:

APP_ID=your_agora_app_id_here

Example:

APP_ID=48bd29358ed64d50a2496ca432adf444

⚠️ Security Note: Never commit your actual App ID to public repositories. The .env file should be in .gitignore.

Step 4: Install Dependencies

cd frontend
flutter pub get

Step 5: Run the App

# For Android
flutter run -d android

# For iOS
flutter run -d ios

# For macOS
flutter run -d macos

# For any available device
flutter run

📱 How to Use

🎬 As a Host (Starting a Stream)

Open the app
Enter a Channel Name (e.g., "mystream", "gaming", "cooking")
Tap "Start as Host"
Grant camera and microphone permissions when prompted
You're now live! 🔴
Tap the Share icon (top right) to get access codes
Share the codes with your audience:
- Viewer Code → For people who want to watch
- Co-Host Code → For people who want to broadcast with you

👀 As a Viewer (Watching a Stream)

Get the Viewer Access Code from the host
Open the app
Paste the code in the "Access Code" field
Tap "Join Stream"
Enjoy watching! 📺

👥 As a Co-Host (Broadcasting with Host)

Get the Co-Host Access Code from the host
Open the app
Paste the code in the "Access Code" field
Tap "Join Stream"
Grant camera and microphone permissions
You're now broadcasting alongside the host! 🎥

📁 Project Structure

Agora-Live-Streaming-App/
├── README.md                    # This file
├── agora_live_streaming.gif     # Demo GIF
├── agora_live_streaming.mp4     # Demo video
├── agora_live_streaming.mov     # Demo video (original)
│
└── frontend/                    # Flutter app
    ├── .env                     # ⚠️ Contains your Agora App ID
    ├── pubspec.yaml             # Dependencies
    ├── lib/
    │   ├── main.dart            # Main app code
    │   └── live_stream_screen.dart
    ├── android/                 # Android-specific files
    ├── ios/                     # iOS-specific files
    ├── macos/                   # macOS-specific files
    ├── linux/                   # Linux-specific files
    └── test/                    # Test files

🔐 Access Code System

The app uses a simple but effective code-based access control:

Code Format

Type	Format	Example
Viewer	`channelName_viewer_XXXXXX`	`mystream_viewer_123456`
Co-Host	`channelName_cohost_XXXXXX`	`mystream_cohost_789012`

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                           HOST                                   │
│                                                                  │
│  1. Creates channel "mystream"                                   │
│  2. Generates unique codes:                                      │
│     • Viewer Code:  mystream_viewer_123456                       │
│     • Co-Host Code: mystream_cohost_789012                       │
│  3. Shares codes selectively                                     │
└─────────────────────────────────────────────────────────────────┘
                              │
              ┌───────────────┴───────────────┐
              │                               │
              ▼                               ▼
┌─────────────────────────┐     ┌─────────────────────────┐
│        VIEWER           │     │        CO-HOST          │
│                         │     │                         │
│ • Enters viewer code    │     │ • Enters co-host code   │
│ • Can only watch        │     │ • Can broadcast video   │
│ • No camera/mic needed  │     │ • Appears in split view │
└─────────────────────────┘     └─────────────────────────┘

Why Codes Instead of Real-Time Requests?

✅ Simple - No complex signaling infrastructure needed
✅ Reliable - Works without additional messaging SDK
✅ Host Control - Host decides who gets which code
✅ Easy to Share - Codes can be shared via any messaging app

🔒 Permissions

Android Permissions (Automatically configured)

Permission	Purpose
`INTERNET`	Network access for streaming
`CAMERA`	Video broadcasting
`RECORD_AUDIO`	Audio broadcasting
`MODIFY_AUDIO_SETTINGS`	Audio configuration
`ACCESS_NETWORK_STATE`	Network status
`BLUETOOTH`	Bluetooth audio devices
`ACCESS_WIFI_STATE`	WiFi status

iOS Permissions (Automatically configured)

Permission	Description in App
`NSCameraUsageDescription`	"This app needs camera access for live streaming"
`NSMicrophoneUsageDescription`	"This app needs microphone access for live streaming"

Permission Handling

The app automatically:

Requests permissions when you try to start/join as host or co-host
Shows a dialog if permissions are denied
Offers to open device settings if permissions are permanently denied

🔧 Troubleshooting

Common Issues

Issue	Solution
"Camera/Mic not working"	Grant permissions in device settings
"Cannot connect to stream"	Check your internet connection
"Invalid code"	Make sure you copied the entire code
"App crashes on start"	Verify your Agora App ID in `.env` file
"Black screen on video"	Restart the app and grant camera permission

iOS Simulator Limitation

⚠️ Note: iOS Simulator does NOT support camera or microphone hardware. Test on a real iOS device or use Android emulator/macOS for full functionality.

Resetting Permissions

Android:

Go to Settings → Apps → Live Stream → Permissions
Enable Camera and Microphone

iOS:

Go to Settings → Privacy → Camera/Microphone
Enable for Live Stream app

📚 Dependencies

Package	Version	Purpose
`agora_rtc_engine`	^6.3.0	Agora's Flutter SDK for video streaming
`permission_handler`	^11.0.1	Request camera/mic permissions
`share_plus`	^7.2.2	Share access codes
`flutter_dotenv`	^5.1.0	Load environment variables (.env file)
`cupertino_icons`	^1.0.8	iOS-style icons

🎮 Controls Reference

Host/Co-Host Controls

Button	Action
🎤 Mic	Toggle microphone on/off
📹 Camera	Toggle camera on/off
📞 End	Leave the stream
📤 Share	View and share access codes

Viewer Controls

Button	Action
📞 End	Leave the stream

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📞 Support

If you encounter any issues:

Check the Troubleshooting section
Review Agora Documentation
Open an issue in this repository

Made with ❤️ using Flutter and Agora SDK

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
frontend		frontend
.gitignore		.gitignore
README.md		README.md
agora_live_streaming.gif		agora_live_streaming.gif
agora_live_streaming.mov		agora_live_streaming.mov
agora_live_streaming.mp4		agora_live_streaming.mp4

Pinkisingh13/Agora-Live-Streaming-App

Folders and files

Latest commit

History

Repository files navigation