11# Laravel WebRTC with Reverb & Echo
22
3- This project integrates WebRTC with Laravel Reverb and Laravel Echo, enabling real-time peer-to-peer communication using Laravel’ s native WebSocket capabilities.
3+ This project integrates ** WebRTC** with ** Laravel Reverb** and ** Laravel Echo** , enabling real-time peer-to-peer communication using Laravel' s native WebSocket capabilities.
44
55## Features
6- • Real-Time Communication: Uses WebRTC for live audio and video calls.
7- • WebSockets with Laravel Reverb: Provides scalable and low-latency signaling for WebRTC.
8- • Laravel Echo Integration: Handles WebSocket events seamlessly.
9- • Vue.js Frontend: A dynamic and interactive UI built with Vue.js.
10- • Self-Hosted WebSocket Server: No need for third-party WebSocket services.
11-
12- ## Prerequisites
13- • PHP 8+
14- • Laravel 10+
15- • Composer
16- • Node.js & npm
17- • SQLite, MySQL, or PostgreSQL
18-
19- Installation
20- 1. Clone the Repository:
21-
22- git clone https://github.com/mastashake08/laravel-webrtc.git
23- cd laravel-webrtc
246
7+ - ** Real-Time Communication** : Uses ** WebRTC** for live audio and video calls.
8+ - ** WebSockets with Laravel Reverb** : Provides scalable and low-latency signaling for WebRTC.
9+ - ** Laravel Echo Integration** : Handles WebSocket events seamlessly.
10+ - ** Vue.js Frontend** : A dynamic and interactive UI built with Vue.js.
11+ - ** Self-Hosted WebSocket Server** : No need for third-party WebSocket services.
2512
26- 2. Install Dependencies:
27-
28- composer install
29- npm install
13+ ## Prerequisites
3014
15+ - ** PHP 8+**
16+ - ** Laravel 10+**
17+ - ** Composer**
18+ - ** Node.js & npm**
19+ - ** SQLite, MySQL, or PostgreSQL**
3120
32- 3. Environment Configuration:
33- • Duplicate .env.example and rename it to .env.
34- • Update your database settings.
35- • Set the WebSockets connection driver:
21+ ## Installation
3622
37- BROADCAST_DRIVER=pusher
38- PUSHER_APP_ID=reverb
39- PUSHER_APP_KEY=reverb
40- PUSHER_APP_SECRET=reverb
23+ 1 . ** Clone the Repository** :
4124
25+ ``` bash
26+ git clone https://github.com/mastashake08/laravel-webrtc.git
27+ cd laravel-webrtc
28+ ```
4229
43- • Generate an application key :
30+ 2 . ** Install Dependencies ** :
4431
45- php artisan key: generate
32+ ``` bash
33+ composer install
34+ npm install
35+ ```
4636
37+ 3 . ** Environment Configuration** :
4738
48- 4. Run Database Migrations:
39+ - Duplicate ` .env.example ` and rename it to ` .env ` .
40+ - Update your database settings.
41+ - Set the WebSockets connection driver:
4942
50- php artisan migrate
43+ ``` ini
44+ BROADCAST_DRIVER =pusher
45+ PUSHER_APP_ID =reverb
46+ PUSHER_APP_KEY =reverb
47+ PUSHER_APP_SECRET =reverb
48+ ```
5149
50+ - Generate an application key:
5251
53- 5. Start Laravel Reverb (WebSocket Server):
52+ ```bash
53+ php artisan key:generate
54+ ```
5455
55- php artisan reverb : start
56+ 4. **Run Database Migrations**:
5657
58+ ```bash
59+ php artisan migrate
60+ ```
5761
58- 6. Start the Laravel Application :
62+ 5 . ** Start Laravel Reverb (WebSocket Server) ** :
5963
60- php artisan serve
64+ ``` bash
65+ php artisan reverb:start
66+ ```
6167
68+ 6 . ** Start the Laravel Application** :
6269
63- 7. Compile Frontend Assets:
70+ ``` bash
71+ php artisan serve
72+ ```
6473
65- npm run dev
74+ 7 . ** Compile Frontend Assets ** :
6675
67- Or for production:
76+ ``` bash
77+ npm run dev
78+ ```
6879
69- npm run build
80+ Or for production:
7081
82+ ``` bash
83+ npm run build
84+ ```
7185
86+ ## WebRTC Signaling Flow
7287
73- WebRTC Signaling Flow
74- 1. User joins a call → Laravel Echo broadcasts an event via Reverb.
75- 2. New peer detected → WebRTC initiates a peer-to-peer connection.
76- 3. ICE Candidates exchanged → STUN/TURN servers handle NAT traversal.
77- 4. Media streams established → Users can see and hear each other.
88+ 1 . ** User joins a call** → Laravel Echo broadcasts an event via Reverb.
89+ 2 . ** New peer detected** → WebRTC initiates a peer-to-peer connection.
90+ 3 . ** ICE Candidates exchanged** → STUN/TURN servers handle NAT traversal.
91+ 4 . ** Media streams established** → Users can see and hear each other.
7892
79- Configuration for Laravel Echo
93+ ## Configuration for Laravel Echo
8094
81- Your resources/js/bootstrap.js should have the following:
95+ Your ` resources/js/bootstrap.js ` should have the following:
8296
97+ ``` javascript
8398import Echo from ' laravel-echo' ;
8499
85100window .Pusher = require (' pusher-js' );
@@ -92,17 +107,21 @@ window.Echo = new Echo({
92107 forceTLS: false ,
93108 disableStats: true ,
94109});
110+ ```
95111
96- Usage
97- 1. Open two different browser windows (or devices).
98- 2. Start a call and invite the other participant.
99- 3. Laravel Reverb will handle WebSocket signaling.
100- 4. WebRTC will establish the peer-to-peer connection.
112+ ## Usage
101113
102- Contributing
114+ 1 . Open two different browser windows (or devices).
115+ 2 . Start a call and invite the other participant.
116+ 3 . Laravel Reverb will handle WebSocket signaling.
117+ 4 . WebRTC will establish the peer-to-peer connection.
118+
119+ ## Contributing
103120
104121Contributions are welcome! Please fork the repo and submit a pull request.
105122
106- License
123+ ## License
124+
125+ This project is open-source under the [ MIT License] ( LICENSE ) .
107126
108- This project is open-source under the MIT License.
127+ ---
0 commit comments