1
1
# Laravel WebRTC with Reverb & Echo
2
2
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.
4
4
5
5
## 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
24
6
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.
25
12
26
- 2. Install Dependencies:
27
-
28
- composer install
29
- npm install
13
+ ## Prerequisites
30
14
15
+ - ** PHP 8+**
16
+ - ** Laravel 10+**
17
+ - ** Composer**
18
+ - ** Node.js & npm**
19
+ - ** SQLite, MySQL, or PostgreSQL**
31
20
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
36
22
37
- BROADCAST_DRIVER=pusher
38
- PUSHER_APP_ID=reverb
39
- PUSHER_APP_KEY=reverb
40
- PUSHER_APP_SECRET=reverb
23
+ 1 . ** Clone the Repository** :
41
24
25
+ ``` bash
26
+ git clone https://github.com/mastashake08/laravel-webrtc.git
27
+ cd laravel-webrtc
28
+ ```
42
29
43
- • Generate an application key :
30
+ 2 . ** Install Dependencies ** :
44
31
45
- php artisan key: generate
32
+ ``` bash
33
+ composer install
34
+ npm install
35
+ ```
46
36
37
+ 3 . ** Environment Configuration** :
47
38
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:
49
42
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
+ ```
51
49
50
+ - Generate an application key:
52
51
53
- 5. Start Laravel Reverb (WebSocket Server):
52
+ ```bash
53
+ php artisan key:generate
54
+ ```
54
55
55
- php artisan reverb : start
56
+ 4. **Run Database Migrations**:
56
57
58
+ ```bash
59
+ php artisan migrate
60
+ ```
57
61
58
- 6. Start the Laravel Application :
62
+ 5 . ** Start Laravel Reverb (WebSocket Server) ** :
59
63
60
- php artisan serve
64
+ ``` bash
65
+ php artisan reverb:start
66
+ ```
61
67
68
+ 6 . ** Start the Laravel Application** :
62
69
63
- 7. Compile Frontend Assets:
70
+ ``` bash
71
+ php artisan serve
72
+ ```
64
73
65
- npm run dev
74
+ 7 . ** Compile Frontend Assets ** :
66
75
67
- Or for production:
76
+ ``` bash
77
+ npm run dev
78
+ ```
68
79
69
- npm run build
80
+ Or for production:
70
81
82
+ ``` bash
83
+ npm run build
84
+ ```
71
85
86
+ ## WebRTC Signaling Flow
72
87
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.
78
92
79
- Configuration for Laravel Echo
93
+ ## Configuration for Laravel Echo
80
94
81
- Your resources/js/bootstrap.js should have the following:
95
+ Your ` resources/js/bootstrap.js ` should have the following:
82
96
97
+ ``` javascript
83
98
import Echo from ' laravel-echo' ;
84
99
85
100
window .Pusher = require (' pusher-js' );
@@ -92,17 +107,21 @@ window.Echo = new Echo({
92
107
forceTLS: false ,
93
108
disableStats: true ,
94
109
});
110
+ ```
95
111
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
101
113
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
103
120
104
121
Contributions are welcome! Please fork the repo and submit a pull request.
105
122
106
- License
123
+ ## License
124
+
125
+ This project is open-source under the [ MIT License] ( LICENSE ) .
107
126
108
- This project is open-source under the MIT License.
127
+ ---
0 commit comments