Complete Guide to WebRTC Screen Sharing: Implementation & Best Practices

Screen sharing has become essential for remote collaboration, online education, and technical support. This comprehensive guide shows you how to implement professional-grade WebRTC screen sharing with advanced features like multi-monitor support, window selection, and recording capabilities.

WebRTC screen sharing uses the Screen Capture API (getDisplayMedia()) to capture screen content and share it through peer-to-peer connections.

Key APIs and Concepts#

1
// Screen Capture API
2
navigator.mediaDevices.getDisplayMedia(constraints)
3

4
// Screen sharing constraints
5
const constraints = {
6
  video: {
7
    mediaSource: 'screen',
8
    width: { max: 1920 },
9
    height: { max: 1080 },
10
    frameRate: { max: 30 }
11
  },
12
  audio: {
13
    echoCancellation: true,
14
    noiseSuppression: true,
15
    sampleRate: 44100
16
  }
17
};

Browser Support Matrix#

Browser	Screen Sharing	Audio Capture	Window Selection
Chrome 72+	✅	✅	✅
Firefox 66+	✅	✅	✅
Safari 13+	✅	❌	✅
Edge 79+	✅	✅	✅

Let’s start with a complete screen sharing application:

HTML Structure#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>WebRTC Screen Sharing</title>
7
    <link rel="stylesheet" href="style.css">
8
</head>
9
<body>
10
    <div class="container">
11
        <header>
12
            <h1>WebRTC Screen Sharing</h1>
13
            <div class="status-indicator" id="connectionStatus">Disconnected</div>
14
        </header>
15

16
        <main>
17
            <div class="controls-panel">
18
                <div class="control-group">
19
                    <button id="startScreenShare" class="btn btn-primary">Start Screen Share</button>
20
                    <button id="stopScreenShare" class="btn btn-secondary" disabled>Stop Screen Share</button>
21
                </div>
22

23
                <div class="control-group">
24
                    <label for="qualitySelect">Quality:</label>
25
                    <select id="qualitySelect">
26
                        <option value="low">Low (720p)</option>
27
                        <option value="medium" selected>Medium (1080p)</option>
28
                        <option value="high">High (1440p)</option>
29
                        <option value="ultra">Ultra (4K)</option>
30
                    </select>
31
                </div>
32

33
                <div class="control-group">
34
                    <label>
35
                        <input type="checkbox" id="includeAudio"> Include System Audio
36
                    </label>
37
                </div>
38

39
                <div class="control-group">
40
                    <button id="recordScreen" class="btn btn-accent" disabled>Start Recording</button>
41
                    <button id="stopRecording" class="btn btn-secondary" disabled>Stop Recording</button>
42
                </div>
43
            </div>
44

45
            <div class="video-container">
46
                <div class="local-screen">
47
                    <h3>Your Screen</h3>
48
                    <video id="localVideo" autoplay muted playsinline></video>
49
                    <div class="video-info" id="localInfo"></div>
50
                </div>
51

52
                <div class="remote-screen">
53
                    <h3>Shared Screen</h3>
54
                    <video id="remoteVideo" autoplay playsinline controls></video>
55
                    <div class="video-info" id="remoteInfo"></div>
56
                </div>
57
            </div>
58

59
            <div class="participants-panel">
60
                <h3>Participants</h3>
61
                <div id="participantsList"></div>
62
            </div>
63
        </main>
64
    </div>
65

66
    <script src="/socket.io/socket.io.js"></script>
67
    <script src="screen-sharing.js"></script>
68
</body>
69
</html>

CSS Styling#

1
* {
2
    margin: 0;
3
    padding: 0;
4
    box-sizing: border-box;
5
}
6

7
body {
8
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
10
    color: #333;
11
    min-height: 100vh;
12
}
13

14
.container {
15
    max-width: 1400px;
16
    margin: 0 auto;
17
    padding: 20px;
18
}
19

20
header {
21
    text-align: center;
22
    margin-bottom: 30px;
23
    color: white;
24
}
25

26
header h1 {
27
    font-size: 2.5rem;
28
    margin-bottom: 10px;
29
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
30
}
31

32
.status-indicator {
33
    display: inline-block;
34
    padding: 8px 16px;
35
    border-radius: 20px;
36
    font-weight: 500;
37
    background: rgba(255,255,255,0.2);
38
    backdrop-filter: blur(10px);
39
}
40

41
.status-indicator.connected {
42
    background: rgba(76, 175, 80, 0.8);
43
}
44

45
.status-indicator.connecting {
46
    background: rgba(255, 193, 7, 0.8);
47
}
48

49
main {
50
    background: rgba(255,255,255,0.95);
51
    border-radius: 15px;
52
    padding: 30px;
53
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
54
    backdrop-filter: blur(10px);
55
}
56

57
.controls-panel {
58
    display: flex;
59
    gap: 20px;
60
    align-items: center;
61
    margin-bottom: 30px;
62
    padding: 20px;
63
    background: #f8f9fa;
64
    border-radius: 10px;
65
    flex-wrap: wrap;
66
}
67

68
.control-group {
69
    display: flex;
70
    align-items: center;
71
    gap: 10px;
72
}
73

74
.btn {
75
    padding: 10px 20px;
76
    border: none;
77
    border-radius: 8px;
78
    font-size: 14px;
79
    font-weight: 500;
80
    cursor: pointer;
81
    transition: all 0.3s ease;
82
    text-transform: uppercase;
83
    letter-spacing: 0.5px;
84
}
85

86
.btn:disabled {
87
    opacity: 0.5;
88
    cursor: not-allowed;
89
}
90

91
.btn-primary {
92
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
93
    color: white;
94
}
95

96
.btn-primary:hover:not(:disabled) {
97
    transform: translateY(-2px);
98
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
99
}
100

101
.btn-secondary {
102
    background: #6c757d;
103
    color: white;
104
}
105

106
.btn-accent {
107
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
108
    color: white;
109
}
110

111
.btn-accent:hover:not(:disabled) {
112
    transform: translateY(-2px);
113
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
114
}
115

116
select {
117
    padding: 8px 12px;
118
    border: 2px solid #e9ecef;
119
    border-radius: 6px;
120
    font-size: 14px;
121
    background: white;
122
}
123

124
.video-container {
125
    display: grid;
126
    grid-template-columns: 1fr 1fr;
127
    gap: 30px;
128
    margin-bottom: 30px;
129
}
130

131
.local-screen,
132
.remote-screen {
133
    background: #000;
134
    border-radius: 10px;
135
    overflow: hidden;
136
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
137
}
138

139
.local-screen h3,
140
.remote-screen h3 {
141
    background: rgba(0,0,0,0.8);
142
    color: white;
143
    padding: 12px 20px;
144
    margin: 0;
145
    font-size: 16px;
146
}
147

148
video {
149
    width: 100%;
150
    height: 400px;
151
    object-fit: contain;
152
    background: #000;
153
}
154

155
.video-info {
156
    background: rgba(0,0,0,0.8);
157
    color: white;
158
    padding: 10px 20px;
159
    font-size: 12px;
160
    font-family: monospace;
161
}
162

163
.participants-panel {
164
    background: #f8f9fa;
165
    padding: 20px;
166
    border-radius: 10px;
167
}
168

169
.participants-panel h3 {
170
    margin-bottom: 15px;
171
    color: #495057;
172
}
173

174
.participant-item {
175
    display: flex;
176
    align-items: center;
177
    gap: 10px;
178
    padding: 10px;
179
    background: white;
180
    border-radius: 8px;
181
    margin-bottom: 10px;
182
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
183
}
184

185
.participant-status {
186
    width: 10px;
187
    height: 10px;
188
    border-radius: 50%;
189
    background: #28a745;
190
}
191

192
@media (max-width: 768px) {
193
    .video-container {
194
        grid-template-columns: 1fr;
195
    }
196

197
    .controls-panel {
198
        flex-direction: column;
199
        align-items: stretch;
200
    }
201

202
    .control-group {
203
        justify-content: center;
204
    }
205
}

Core JavaScript Implementation#

1
class ScreenSharingApp {
2
    constructor() {
3
        this.socket = null;
4
        this.localConnection = null;
5
        this.remoteConnection = null;
6
        this.localStream = null;
7
        this.remoteStream = null;
8
        this.mediaRecorder = null;
9
        this.recordedChunks = [];
10
        this.isRecording = false;
11
        this.roomId = null;
12
        this.userId = this.generateUserId();
13

14
        this.qualitySettings = {
15
            low: { width: 1280, height: 720, frameRate: 15 },
16
            medium: { width: 1920, height: 1080, frameRate: 24 },
17
            high: { width: 2560, height: 1440, frameRate: 30 },
18
            ultra: { width: 3840, height: 2160, frameRate: 30 }
19
        };
20

21
        this.init();
22
    }
23

24
    generateUserId() {
25
        return 'user_' + Math.random().toString(36).substr(2, 9);
26
    }
27

28
    init() {
29
        this.initializeSocket();
30
        this.setupEventListeners();
31
        this.setupWebRTC();
32
        this.requestRoomId();
33
    }
34

35
    initializeSocket() {
36
        this.socket = io();
37

38
        this.socket.on('connect', () => {
39
            console.log('Connected to signaling server');
40
            this.updateConnectionStatus('Connected', 'connected');
41
        });
42

43
        this.socket.on('disconnect', () => {
44
            console.log('Disconnected from signaling server');
45
            this.updateConnectionStatus('Disconnected', 'disconnected');
46
        });
47

48
        this.socket.on('room-joined', (data) => {
49
            console.log('Joined room:', data.roomId);
50
            this.roomId = data.roomId;
51
            this.updateParticipants(data.participants);
52
        });
53

54
        this.socket.on('participant-joined', (participant) => {
55
            console.log('Participant joined:', participant);
56
            this.handleParticipantJoined(participant);
57
        });
58

59
        this.socket.on('participant-left', (participant) => {
60
            console.log('Participant left:', participant);
61
            this.handleParticipantLeft(participant);
62
        });
63

64
        this.socket.on('offer', async (data) => {
65
            console.log('Received offer from:', data.from);
66
            await this.handleOffer(data.offer, data.from);
67
        });
68

69
        this.socket.on('answer', async (data) => {
70
            console.log('Received answer from:', data.from);
71
            await this.handleAnswer(data.answer);
72
        });
73

74
        this.socket.on('ice-candidate', async (data) => {
75
            console.log('Received ICE candidate from:', data.from);
76
            await this.handleIceCandidate(data.candidate);
77
        });
78

79
        this.socket.on('screen-share-started', (data) => {
80
            console.log('Screen share started by:', data.userId);
81
            this.handleRemoteScreenShare(data);
82
        });
83

84
        this.socket.on('screen-share-stopped', (data) => {
85
            console.log('Screen share stopped by:', data.userId);
86
            this.handleRemoteScreenShareStopped(data);
87
        });
88
    }
89

90
    setupEventListeners() {
91
        document.getElementById('startScreenShare').addEventListener('click', () => {
92
            this.startScreenShare();
93
        });
94

95
        document.getElementById('stopScreenShare').addEventListener('click', () => {
96
            this.stopScreenShare();
97
        });
98

99
        document.getElementById('recordScreen').addEventListener('click', () => {
100
            this.startRecording();
101
        });
102

103
        document.getElementById('stopRecording').addEventListener('click', () => {
104
            this.stopRecording();
105
        });
106

107
        document.getElementById('qualitySelect').addEventListener('change', (e) => {
108
            this.handleQualityChange(e.target.value);
109
        });
110
    }
111

112
    setupWebRTC() {
113
        const configuration = {
114
            iceServers: [
115
                { urls: 'stun:stun.l.google.com:19302' },
116
                { urls: 'stun:stun1.l.google.com:19302' },
117
                {
118
                    urls: 'turn:your-turn-server.com:3478',
119
                    username: 'your-username',
120
                    credential: 'your-password'
121
                }
122
            ],
123
            iceCandidatePoolSize: 10
124
        };
125

126
        this.localConnection = new RTCPeerConnection(configuration);
127
        this.remoteConnection = new RTCPeerConnection(configuration);
128

129
        // Local connection event handlers
130
        this.localConnection.onicecandidate = (event) => {
131
            if (event.candidate) {
132
                this.socket.emit('ice-candidate', {
133
                    candidate: event.candidate,
134
                    to: 'remote',
135
                    roomId: this.roomId
136
                });
137
            }
138
        };
139

140
        this.localConnection.oniceconnectionstatechange = () => {
141
            console.log('Local ICE connection state:', this.localConnection.iceConnectionState);
142
            this.updateConnectionStatus(this.localConnection.iceConnectionState, 'connecting');
143
        };
144

145
        // Remote connection event handlers
146
        this.remoteConnection.onicecandidate = (event) => {
147
            if (event.candidate) {
148
                this.socket.emit('ice-candidate', {
149
                    candidate: event.candidate,
150
                    to: 'local',
151
                    roomId: this.roomId
152
                });
153
            }
154
        };
155

156
        this.remoteConnection.ontrack = (event) => {
157
            console.log('Received remote track:', event.streams[0]);
158
            this.remoteStream = event.streams[0];
159
            document.getElementById('remoteVideo').srcObject = this.remoteStream;
160
            this.updateVideoInfo('remote', this.remoteStream);
161
        };
162

163
        this.remoteConnection.oniceconnectionstatechange = () => {
164
            console.log('Remote ICE connection state:', this.remoteConnection.iceConnectionState);
165
        };
166
    }
167

168
    async requestRoomId() {
169
        const urlParams = new URLSearchParams(window.location.search);
170
        const roomId = urlParams.get('room') || 'default-room';
171

172
        this.socket.emit('join-room', {
173
            roomId: roomId,
174
            userId: this.userId,
175
            userName: 'User ' + this.userId.slice(-4)
176
        });
177
    }
178

179
    async startScreenShare() {
180
        try {
181
            const quality = document.getElementById('qualitySelect').value;
182
            const includeAudio = document.getElementById('includeAudio').checked;
183
            const settings = this.qualitySettings[quality];
184

185
            const constraints = {
186
                video: {
187
                    mediaSource: 'screen',
188
                    width: { ideal: settings.width, max: settings.width },
189
                    height: { ideal: settings.height, max: settings.height },
190
                    frameRate: { ideal: settings.frameRate, max: settings.frameRate },
191
                    cursor: 'always'
192
                },
193
                audio: includeAudio ? {
194
                    echoCancellation: true,
195
                    noiseSuppression: true,
196
                    sampleRate: 44100
197
                } : false
198
            };
199

200
            this.localStream = await navigator.mediaDevices.getDisplayMedia(constraints);
201

202
            // Handle screen share end detection
203
            this.localStream.getVideoTracks()[0].onended = () => {
204
                console.log('Screen sharing ended by user');
205
                this.stopScreenShare();
206
            };
207

208
            document.getElementById('localVideo').srcObject = this.localStream;
209
            this.updateVideoInfo('local', this.localStream);
210

211
            // Add tracks to peer connection
212
            this.localStream.getTracks().forEach(track => {
213
                this.localConnection.addTrack(track, this.localStream);
214
            });
215

216
            // Create offer
217
            const offer = await this.localConnection.createOffer({
218
                offerToReceiveVideo: true,
219
                offerToReceiveAudio: includeAudio
220
            });
221

222
            await this.localConnection.setLocalDescription(offer);
223

224
            // Send offer to remote peer
225
            this.socket.emit('offer', {
226
                offer: offer,
227
                roomId: this.roomId,
228
                from: this.userId
229
            });
230

231
            // Notify room about screen sharing
232
            this.socket.emit('screen-share-started', {
233
                roomId: this.roomId,
234
                userId: this.userId,
235
                quality: quality,
236
                hasAudio: includeAudio
237
            });
238

239
            this.updateUIForScreenSharing(true);
240

241
        } catch (error) {
242
            console.error('Error starting screen share:', error);
243
            this.handleScreenShareError(error);
244
        }
245
    }
246

247
    async stopScreenShare() {
248
        try {
249
            if (this.localStream) {
250
                this.localStream.getTracks().forEach(track => {
251
                    track.stop();
252
                });
253
                this.localStream = null;
254
            }
255

256
            document.getElementById('localVideo').srcObject = null;
257

258
            if (this.localConnection) {
259
                this.localConnection.getSenders().forEach(sender => {
260
                    if (sender.track) {
261
                        this.localConnection.removeTrack(sender);
262
                    }
263
                });
264
            }
265

266
            // Notify room about screen sharing stop
267
            this.socket.emit('screen-share-stopped', {
268
                roomId: this.roomId,
269
                userId: this.userId
270
            });
271

272
            this.updateUIForScreenSharing(false);
273

274
            if (this.isRecording) {
275
                this.stopRecording();
276
            }
277

278
        } catch (error) {
279
            console.error('Error stopping screen share:', error);
280
        }
281
    }
282

283
    async handleOffer(offer, from) {
284
        try {
285
            await this.remoteConnection.setRemoteDescription(offer);
286

287
            const answer = await this.remoteConnection.createAnswer();
288
            await this.remoteConnection.setLocalDescription(answer);
289

290
            this.socket.emit('answer', {
291
                answer: answer,
292
                roomId: this.roomId,
293
                from: this.userId,
294
                to: from
295
            });
296

297
        } catch (error) {
298
            console.error('Error handling offer:', error);
299
        }
300
    }
301

302
    async handleAnswer(answer) {
303
        try {
304
            await this.localConnection.setRemoteDescription(answer);
305
        } catch (error) {
306
            console.error('Error handling answer:', error);
307
        }
308
    }
309

310
    async handleIceCandidate(candidate) {
311
        try {
312
            await this.localConnection.addIceCandidate(candidate);
313
        } catch (error) {
314
            console.error('Error handling ICE candidate:', error);
315
        }
316
    }
317

318
    startRecording() {
319
        if (!this.localStream) {
320
            alert('Please start screen sharing first');
321
            return;
322
        }
323

324
        try {
325
            const options = {
326
                mimeType: 'video/webm;codecs=vp9,opus',
327
                videoBitsPerSecond: 2500000
328
            };
329

330
            this.mediaRecorder = new MediaRecorder(this.localStream, options);
331
            this.recordedChunks = [];
332

333
            this.mediaRecorder.ondataavailable = (event) => {
334
                if (event.data.size > 0) {
335
                    this.recordedChunks.push(event.data);
336
                }
337
            };
338

339
            this.mediaRecorder.onstop = () => {
340
                this.saveRecording();
341
            };
342

343
            this.mediaRecorder.start(1000); // Record in 1-second chunks
344
            this.isRecording = true;
345
            this.updateUIForRecording(true);
346

347
        } catch (error) {
348
            console.error('Error starting recording:', error);
349
            alert('Recording failed: ' + error.message);
350
        }
351
    }
352

353
    stopRecording() {
354
        if (this.mediaRecorder && this.isRecording) {
355
            this.mediaRecorder.stop();
356
            this.isRecording = false;
357
            this.updateUIForRecording(false);
358
        }
359
    }
360

361
    saveRecording() {
362
        const blob = new Blob(this.recordedChunks, {
363
            type: 'video/webm'
364
        });
365

366
        const url = URL.createObjectURL(blob);
367
        const a = document.createElement('a');
368
        const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
369

370
        a.href = url;
371
        a.download = `screen-recording-${timestamp}.webm`;
372
        document.body.appendChild(a);
373
        a.click();
374
        document.body.removeChild(a);
375

376
        URL.revokeObjectURL(url);
377
        this.recordedChunks = [];
378
    }
379

380
    handleQualityChange(quality) {
381
        if (this.localStream) {
382
            const settings = this.qualitySettings[quality];
383
            const videoTrack = this.localStream.getVideoTracks()[0];
384

385
            if (videoTrack && videoTrack.applyConstraints) {
386
                videoTrack.applyConstraints({
387
                    width: { ideal: settings.width },
388
                    height: { ideal: settings.height },
389
                    frameRate: { ideal: settings.frameRate }
390
                }).catch(error => {
391
                    console.error('Error applying quality constraints:', error);
392
                });
393
            }
394
        }
395
    }
396

397
    updateUIForScreenSharing(isSharing) {
398
        document.getElementById('startScreenShare').disabled = isSharing;
399
        document.getElementById('stopScreenShare').disabled = !isSharing;
400
        document.getElementById('recordScreen').disabled = !isSharing;
401

402
        if (!isSharing && this.isRecording) {
403
            this.stopRecording();
404
        }
405
    }
406

407
    updateUIForRecording(isRecording) {
408
        document.getElementById('recordScreen').disabled = isRecording;
409
        document.getElementById('stopRecording').disabled = !isRecording;
410
    }
411

412
    updateConnectionStatus(status, className) {
413
        const statusElement = document.getElementById('connectionStatus');
414
        statusElement.textContent = status;
415
        statusElement.className = 'status-indicator ' + className;
416
    }
417

418
    updateVideoInfo(type, stream) {
419
        if (!stream) return;
420

421
        const videoTrack = stream.getVideoTracks()[0];
422
        const audioTrack = stream.getAudioTracks()[0];
423

424
        let info = '';
425

426
        if (videoTrack) {
427
            const settings = videoTrack.getSettings();
428
            info += `Video: ${settings.width}x${settings.height} @ ${settings.frameRate}fps\n`;
429
        }
430

431
        if (audioTrack) {
432
            const settings = audioTrack.getSettings();
433
            info += `Audio: ${settings.sampleRate}Hz, ${settings.channelCount} channels`;
434
        }
435

436
        document.getElementById(type + 'Info').textContent = info;
437
    }
438

439
    updateParticipants(participants) {
440
        const participantsList = document.getElementById('participantsList');
441
        participantsList.innerHTML = '';
442

443
        participants.forEach(participant => {
444
            const participantElement = document.createElement('div');
445
            participantElement.className = 'participant-item';
446
            participantElement.innerHTML = `
447
                <div class="participant-status"></div>
448
                <span>${participant.userName}</span>
449
                <small>${participant.userId === this.userId ? '(You)' : ''}</small>
450
            `;
451
            participantsList.appendChild(participantElement);
452
        });
453
    }
454

455
    handleParticipantJoined(participant) {
456
        console.log('New participant:', participant);
457
        // Update UI to show new participant
458
    }
459

460
    handleParticipantLeft(participant) {
461
        console.log('Participant left:', participant);
462
        // Update UI to remove participant
463
    }
464

465
    handleRemoteScreenShare(data) {
466
        console.log('Remote screen share started:', data);
467
        // Handle remote screen share UI updates
468
    }
469

470
    handleRemoteScreenShareStopped(data) {
471
        console.log('Remote screen share stopped:', data);
472
        document.getElementById('remoteVideo').srcObject = null;
473
    }
474

475
    handleScreenShareError(error) {
476
        let message = 'Screen sharing failed: ';
477

478
        switch (error.name) {
479
            case 'NotAllowedError':
480
                message += 'Permission denied. Please allow screen capture.';
481
                break;
482
            case 'NotFoundError':
483
                message += 'No screen capture source found.';
484
                break;
485
            case 'NotSupportedError':
486
                message += 'Screen capture not supported in this browser.';
487
                break;
488
            case 'AbortError':
489
                message += 'Screen capture was aborted.';
490
                break;
491
            default:
492
                message += error.message;
493
        }
494

495
        alert(message);
496
    }
497
}
498

499
// Initialize the application
500
document.addEventListener('DOMContentLoaded', () => {
501
    new ScreenSharingApp();
502
});

Advanced Screen Capture Features {#advanced-features}#

Multi-Source Capture#

1
class MultiSourceCapture {
2
    constructor() {
3
        this.captures = new Map();
4
        this.mixedStream = null;
5
    }
6

7
    async captureMultipleSources() {
8
        try {
9
            // Capture screen
10
            const screenStream = await navigator.mediaDevices.getDisplayMedia({
11
                video: { mediaSource: 'screen' }
12
            });
13

14
            // Capture window (user selection)
15
            const windowStream = await navigator.mediaDevices.getDisplayMedia({
16
                video: { mediaSource: 'window' }
17
            });
18

19
            // Capture tab
20
            const tabStream = await navigator.mediaDevices.getDisplayMedia({
21
                video: { mediaSource: 'browser' }
22
            });
23

24
            this.captures.set('screen', screenStream);
25
            this.captures.set('window', windowStream);
26
            this.captures.set('tab', tabStream);
27

28
            return this.createMixedStream();
29

30
        } catch (error) {
31
            console.error('Multi-source capture failed:', error);
32
            throw error;
33
        }
34
    }
35

36
    createMixedStream() {
37
        const canvas = document.createElement('canvas');
38
        const ctx = canvas.getContext('2d');
39
        canvas.width = 1920;
40
        canvas.height = 1080;
41

42
        const videos = [];
43
        this.captures.forEach((stream, source) => {
44
            const video = document.createElement('video');
45
            video.srcObject = stream;
46
            video.play();
47
            videos.push({ video, source });
48
        });
49

50
        const drawFrame = () => {
51
            ctx.fillStyle = '#000';
52
            ctx.fillRect(0, 0, canvas.width, canvas.height);
53

54
            // Layout: screen full, window in corner, tab as overlay
55
            if (videos[0]) { // Screen
56
                ctx.drawImage(videos[0].video, 0, 0, canvas.width, canvas.height);
57
            }
58

59
            if (videos[1]) { // Window
60
                const w = canvas.width * 0.3;
61
                const h = canvas.height * 0.3;
62
                ctx.drawImage(videos[1].video, canvas.width - w - 20, 20, w, h);
63
            }
64

65
            if (videos[2]) { // Tab
66
                const w = canvas.width * 0.2;
67
                const h = canvas.height * 0.2;
68
                ctx.drawImage(videos[2].video, 20, canvas.height - h - 20, w, h);
69
            }
70

71
            requestAnimationFrame(drawFrame);
72
        };
73

74
        drawFrame();
75
        this.mixedStream = canvas.captureStream(30);
76
        return this.mixedStream;
77
    }
78

79
    switchPrimarySource(source) {
80
        // Dynamically change which source is primary
81
        const layout = this.getLayoutForSource(source);
82
        this.applyLayout(layout);
83
    }
84

85
    getLayoutForSource(primarySource) {
86
        return {
87
            primary: primarySource,
88
            secondary: Array.from(this.captures.keys()).filter(s => s !== primarySource)
89
        };
90
    }
91
}

Window Selection Interface#

1
class WindowSelector {
2
    constructor() {
3
        this.availableSources = [];
4
    }
5

6
    async getAvailableWindows() {
7
        try {
8
            // This requires the Screen Capture API with getDisplayMedia
9
            const sources = await navigator.mediaDevices.enumerateDevices();
10
            return this.createSourcesInterface();
11
        } catch (error) {
12
            console.error('Failed to enumerate windows:', error);
13
            return [];
14
        }
15
    }
16

17
    createSourcesInterface() {
18
        return new Promise((resolve) => {
19
            const modal = document.createElement('div');
20
            modal.className = 'window-selector-modal';
21
            modal.innerHTML = `
22
                <div class="modal-content">
23
                    <h3>Select Window or Screen</h3>
24
                    <div class="source-grid">
25
                        <div class="source-item" data-source="screen">
26
                            <div class="source-preview">
27
                                <i class="icon-monitor"></i>
28
                            </div>
29
                            <span>Entire Screen</span>
30
                        </div>
31
                        <div class="source-item" data-source="window">
32
                            <div class="source-preview">
33
                                <i class="icon-window"></i>
34
                            </div>
35
                            <span>Application Window</span>
36
                        </div>
37
                        <div class="source-item" data-source="tab">
38
                            <div class="source-preview">
39
                                <i class="icon-tab"></i>
40
                            </div>
41
                            <span>Browser Tab</span>
42
                        </div>
43
                    </div>
44
                    <div class="modal-actions">
45
                        <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
46
                        <button class="btn btn-primary" onclick="selectSource()">Share</button>
47
                    </div>
48
                </div>
49
            `;
50

51
            document.body.appendChild(modal);
52

53
            window.closeModal = () => {
54
                document.body.removeChild(modal);
55
                resolve(null);
56
            };
57

58
            window.selectSource = () => {
59
                const selected = modal.querySelector('.source-item.selected');
60
                const source = selected ? selected.dataset.source : 'screen';
61
                document.body.removeChild(modal);
62
                resolve(source);
63
            };
64

65
            // Add selection handlers
66
            modal.querySelectorAll('.source-item').forEach(item => {
67
                item.addEventListener('click', () => {
68
                    modal.querySelectorAll('.source-item').forEach(i => i.classList.remove('selected'));
69
                    item.classList.add('selected');
70
                });
71
            });
72
        });
73
    }
74

75
    async selectAndCapture() {
76
        const source = await this.getAvailableWindows();
77
        if (!source) return null;
78

79
        const constraints = this.getConstraintsForSource(source);
80
        return navigator.mediaDevices.getDisplayMedia(constraints);
81
    }
82

83
    getConstraintsForSource(source) {
84
        const baseConstraints = {
85
            video: {
86
                width: { ideal: 1920, max: 1920 },
87
                height: { ideal: 1080, max: 1080 },
88
                frameRate: { ideal: 30, max: 30 }
89
            },
90
            audio: true
91
        };
92

93
        switch (source) {
94
            case 'screen':
95
                baseConstraints.video.mediaSource = 'screen';
96
                break;
97
            case 'window':
98
                baseConstraints.video.mediaSource = 'window';
99
                break;
100
            case 'tab':
101
                baseConstraints.video.mediaSource = 'browser';
102
                break;
103
        }
104

105
        return baseConstraints;
106
    }
107
}

Multi-Monitor & Window Selection {#multi-monitor}#

Monitor Detection and Selection#

1
class MultiMonitorCapture {
2
    constructor() {
3
        this.monitors = [];
4
        this.activeCaptures = new Map();
5
    }
6

7
    async detectMonitors() {
8
        try {
9
            // Request all available screens
10
            const stream = await navigator.mediaDevices.getDisplayMedia({
11
                video: { mediaSource: 'screen' }
12
            });
13

14
            // Get screen details
15
            const track = stream.getVideoTracks()[0];
16
            const settings = track.getSettings();
17

18
            this.monitors.push({
19
                id: 'primary',
20
                width: settings.width,
21
                height: settings.height,
22
                stream: stream
23
            });
24

25
            // Clean up initial stream
26
            stream.getTracks().forEach(track => track.stop());
27

28
            return this.monitors;
29

30
        } catch (error) {
31
            console.error('Monitor detection failed:', error);
32
            return [];
33
        }
34
    }
35

36
    async captureSpecificMonitor(monitorId) {
37
        try {
38
            const constraints = {
39
                video: {
40
                    mediaSource: 'screen',
41
                    width: { ideal: 1920 },
42
                    height: { ideal: 1080 }
43
                },
44
                audio: false
45
            };
46

47
            const stream = await navigator.mediaDevices.getDisplayMedia(constraints);
48
            this.activeCaptures.set(monitorId, stream);
49

50
            return stream;
51

52
        } catch (error) {
53
            console.error(`Failed to capture monitor ${monitorId}:`, error);
54
            throw error;
55
        }
56
    }
57

58
    async captureAllMonitors() {
59
        const captures = [];
60

61
        for (const monitor of this.monitors) {
62
            try {
63
                const stream = await this.captureSpecificMonitor(monitor.id);
64
                captures.push({
65
                    monitor: monitor,
66
                    stream: stream
67
                });
68
            } catch (error) {
69
                console.warn(`Skipping monitor ${monitor.id}:`, error);
70
            }
71
        }
72

73
        return captures;
74
    }
75

76
    createMultiMonitorLayout(captures) {
77
        const canvas = document.createElement('canvas');
78
        const ctx = canvas.getContext('2d');
79

80
        // Calculate layout dimensions
81
        const totalWidth = captures.reduce((sum, c) => sum + c.monitor.width, 0);
82
        const maxHeight = Math.max(...captures.map(c => c.monitor.height));
83

84
        canvas.width = totalWidth;
85
        canvas.height = maxHeight;
86

87
        const videos = captures.map(capture => {
88
            const video = document.createElement('video');
89
            video.srcObject = capture.stream;
90
            video.play();
91
            return { video, monitor: capture.monitor };
92
        });
93

94
        let xOffset = 0;
95
        const drawFrame = () => {
96
            ctx.fillStyle = '#000';
97
            ctx.fillRect(0, 0, canvas.width, canvas.height);
98

99
            videos.forEach(({ video, monitor }) => {
100
                ctx.drawImage(video, xOffset, 0, monitor.width, monitor.height);
101
                xOffset += monitor.width;
102
            });
103

104
            xOffset = 0;
105
            requestAnimationFrame(drawFrame);
106
        };
107

108
        drawFrame();
109
        return canvas.captureStream(30);
110
    }
111

112
    stopAllCaptures() {
113
        this.activeCaptures.forEach(stream => {
114
            stream.getTracks().forEach(track => track.stop());
115
        });
116
        this.activeCaptures.clear();
117
    }
118
}

Audio Capture Integration {#audio-capture}#

System Audio Capture#

1
class SystemAudioCapture {
2
    constructor() {
3
        this.audioContext = null;
4
        this.audioStream = null;
5
        this.mixedStream = null;
6
    }
7

8
    async captureSystemAudio() {
9
        try {
10
            // Capture system audio through getDisplayMedia
11
            const stream = await navigator.mediaDevices.getDisplayMedia({
12
                video: false,
13
                audio: {
14
                    echoCancellation: false,
15
                    noiseSuppression: false,
16
                    autoGainControl: false,
17
                    googEchoCancellation: false,
18
                    googNoiseSuppression: false,
19
                    googAutoGainControl: false
20
                }
21
            });
22

23
            this.audioStream = stream;
24
            return stream;
25

26
        } catch (error) {
27
            console.error('System audio capture failed:', error);
28
            throw error;
29
        }
30
    }
31

32
    async captureMicrophoneAudio() {
33
        try {
34
            return await navigator.mediaDevices.getUserMedia({
35
                audio: {
36
                    echoCancellation: true,
37
                    noiseSuppression: true,
38
                    autoGainControl: true,
39
                    sampleRate: 48000
40
                }
41
            });
42
        } catch (error) {
43
            console.error('Microphone capture failed:', error);
44
            throw error;
45
        }
46
    }
47

48
    async createMixedAudio(systemStream, micStream) {
49
        this.audioContext = new AudioContext({ sampleRate: 48000 });
50

51
        const systemSource = this.audioContext.createMediaStreamSource(systemStream);
52
        const micSource = this.audioContext.createMediaStreamSource(micStream);
53

54
        // Create gain nodes for volume control
55
        const systemGain = this.audioContext.createGain();
56
        const micGain = this.audioContext.createGain();
57

58
        // Default levels
59
        systemGain.gain.value = 0.7;
60
        micGain.gain.value = 0.5;
61

62
        // Create compressor for audio quality
63
        const compressor = this.audioContext.createDynamicsCompressor();
64
        compressor.threshold.value = -24;
65
        compressor.knee.value = 30;
66
        compressor.ratio.value = 12;
67
        compressor.attack.value = 0.003;
68
        compressor.release.value = 0.25;
69

70
        // Create mixer
71
        const mixer = this.audioContext.createGain();
72

73
        // Connect audio graph
74
        systemSource.connect(systemGain);
75
        micSource.connect(micGain);
76

77
        systemGain.connect(mixer);
78
        micGain.connect(mixer);
79

80
        mixer.connect(compressor);
81

82
        // Create output stream
83
        const destination = this.audioContext.createMediaStreamDestination();
84
        compressor.connect(destination);
85

86
        this.mixedStream = destination.stream;
87
        return this.mixedStream;
88
    }
89

90
    adjustSystemVolume(level) {
91
        if (this.audioContext) {
92
            const systemGain = this.audioContext.createGain();
93
            systemGain.gain.value = Math.max(0, Math.min(1, level));
94
        }
95
    }
96

97
    adjustMicrophoneVolume(level) {
98
        if (this.audioContext) {
99
            const micGain = this.audioContext.createGain();
100
            micGain.gain.value = Math.max(0, Math.min(1, level));
101
        }
102
    }
103

104
    addAudioEffects(effectType) {
105
        if (!this.audioContext) return;
106

107
        let effect;
108

109
        switch (effectType) {
110
            case 'reverb':
111
                effect = this.createReverbEffect();
112
                break;
113
            case 'echo':
114
                effect = this.createEchoEffect();
115
                break;
116
            case 'noise-gate':
117
                effect = this.createNoiseGateEffect();
118
                break;
119
        }
120

121
        if (effect) {
122
            // Insert effect into audio chain
123
            this.insertAudioEffect(effect);
124
        }
125
    }
126

127
    createReverbEffect() {
128
        const convolver = this.audioContext.createConvolver();
129

130
        // Create impulse response
131
        const impulseLength = this.audioContext.sampleRate * 2;
132
        const impulse = this.audioContext.createBuffer(2, impulseLength, this.audioContext.sampleRate);
133

134
        for (let channel = 0; channel < impulse.numberOfChannels; channel++) {
135
            const channelData = impulse.getChannelData(channel);
136
            for (let i = 0; i < impulseLength; i++) {
137
                channelData[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / impulseLength, 2);
138
            }
139
        }
140

141
        convolver.buffer = impulse;
142
        return convolver;
143
    }
144

145
    createEchoEffect() {
146
        const delay = this.audioContext.createDelay(1.0);
147
        const feedback = this.audioContext.createGain();
148
        const wetGain = this.audioContext.createGain();
149

150
        delay.delayTime.value = 0.3;
151
        feedback.gain.value = 0.3;
152
        wetGain.gain.value = 0.2;
153

154
        delay.connect(feedback);
155
        feedback.connect(delay);
156
        delay.connect(wetGain);
157

158
        return { input: delay, output: wetGain };
159
    }
160

161
    cleanup() {
162
        if (this.audioContext) {
163
            this.audioContext.close();
164
            this.audioContext = null;
165
        }
166

167
        if (this.audioStream) {
168
            this.audioStream.getTracks().forEach(track => track.stop());
169
            this.audioStream = null;
170
        }
171
    }
172
}

Recording & Streaming {#recording}#

Advanced Recording Features#

1
class AdvancedRecorder {
2
    constructor() {
3
        this.mediaRecorder = null;
4
        this.recordedChunks = [];
5
        this.isRecording = false;
6
        this.recordingStartTime = null;
7
        this.recordingMetadata = {};
8
    }
9

10
    async startAdvancedRecording(stream, options = {}) {
11
        const defaultOptions = {
12
            mimeType: 'video/webm;codecs=vp9,opus',
13
            videoBitsPerSecond: 5000000,
14
            audioBitsPerSecond: 128000,
15
            quality: 'high',
16
            format: 'webm',
17
            recordAudio: true,
18
            recordVideo: true
19
        };
20

21
        const recordingOptions = { ...defaultOptions, ...options };
22

23
        try {
24
            // Determine the best codec
25
            const mimeType = this.getBestMimeType(recordingOptions.format);
26

27
            this.mediaRecorder = new MediaRecorder(stream, {
28
                mimeType: mimeType,
29
                videoBitsPerSecond: recordingOptions.videoBitsPerSecond,
30
                audioBitsPerSecond: recordingOptions.audioBitsPerSecond
31
            });
32

33
            this.recordedChunks = [];
34
            this.recordingStartTime = Date.now();
35

36
            this.setupRecorderEvents(recordingOptions);
37

38
            this.mediaRecorder.start(1000); // 1-second timeslices
39
            this.isRecording = true;
40

41
            this.recordingMetadata = {
42
                startTime: this.recordingStartTime,
43
                options: recordingOptions,
44
                stream: {
45
                    videoTracks: stream.getVideoTracks().length,
46
                    audioTracks: stream.getAudioTracks().length
47
                }
48
            };
49

50
            console.log('Advanced recording started:', this.recordingMetadata);
51
            return true;
52

53
        } catch (error) {
54
            console.error('Failed to start recording:', error);
55
            throw error;
56
        }
57
    }
58

59
    getBestMimeType(format) {
60
        const mimeTypes = {
61
            'webm': [
62
                'video/webm;codecs=vp9,opus',
63
                'video/webm;codecs=vp8,opus',
64
                'video/webm;codecs=h264,opus',
65
                'video/webm'
66
            ],
67
            'mp4': [
68
                'video/mp4;codecs=h264,aac',
69
                'video/mp4;codecs=avc1.42E01E,mp4a.40.2',
70
                'video/mp4'
71
            ]
72
        };
73

74
        const candidates = mimeTypes[format] || mimeTypes['webm'];
75

76
        for (const mimeType of candidates) {
77
            if (MediaRecorder.isTypeSupported(mimeType)) {
78
                return mimeType;
79
            }
80
        }
81

82
        throw new Error(`No supported mime type found for format: ${format}`);
83
    }
84

85
    setupRecorderEvents(options) {
86
        this.mediaRecorder.ondataavailable = (event) => {
87
            if (event.data.size > 0) {
88
                this.recordedChunks.push(event.data);
89
                this.updateRecordingProgress();
90
            }
91
        };
92

93
        this.mediaRecorder.onstop = () => {
94
            this.finalizeRecording(options);
95
        };
96

97
        this.mediaRecorder.onerror = (event) => {
98
            console.error('Recording error:', event.error);
99
            this.handleRecordingError(event.error);
100
        };
101

102
        this.mediaRecorder.onpause = () => {
103
            console.log('Recording paused');
104
        };
105

106
        this.mediaRecorder.onresume = () => {
107
            console.log('Recording resumed');
108
        };
109
    }
110

111
    updateRecordingProgress() {
112
        const duration = Date.now() - this.recordingStartTime;
113
        const size = this.recordedChunks.reduce((total, chunk) => total + chunk.size, 0);
114

115
        const progress = {
116
            duration: Math.floor(duration / 1000),
117
            size: this.formatBytes(size),
118
            chunks: this.recordedChunks.length
119
        };
120

121
        this.onRecordingProgress?.(progress);
122
    }
123

124
    pauseRecording() {
125
        if (this.mediaRecorder && this.isRecording) {
126
            this.mediaRecorder.pause();
127
        }
128
    }
129

130
    resumeRecording() {
131
        if (this.mediaRecorder && this.isRecording) {
132
            this.mediaRecorder.resume();
133
        }
134
    }
135

136
    stopRecording() {
137
        if (this.mediaRecorder && this.isRecording) {
138
            this.mediaRecorder.stop();
139
            this.isRecording = false;
140
        }
141
    }
142

143
    async finalizeRecording(options) {
144
        const blob = new Blob(this.recordedChunks, {
145
            type: this.mediaRecorder.mimeType
146
        });
147

148
        const duration = Date.now() - this.recordingStartTime;
149
        const finalMetadata = {
150
            ...this.recordingMetadata,
151
            endTime: Date.now(),
152
            duration: duration,
153
            size: blob.size,
154
            chunks: this.recordedChunks.length
155
        };
156

157
        console.log('Recording finalized:', finalMetadata);
158

159
        if (options.autoSave !== false) {
160
            await this.saveRecording(blob, finalMetadata);
161
        }
162

163
        if (options.autoUpload) {
164
            await this.uploadRecording(blob, finalMetadata);
165
        }
166

167
        this.onRecordingComplete?.(blob, finalMetadata);
168
        return { blob, metadata: finalMetadata };
169
    }
170

171
    async saveRecording(blob, metadata) {
172
        const timestamp = new Date(metadata.startTime).toISOString().slice(0, 19).replace(/:/g, '-');
173
        const extension = this.getFileExtension(this.mediaRecorder.mimeType);
174
        const filename = `screen-recording-${timestamp}.${extension}`;
175

176
        // Save to downloads
177
        const url = URL.createObjectURL(blob);
178
        const a = document.createElement('a');
179
        a.href = url;
180
        a.download = filename;
181
        document.body.appendChild(a);
182
        a.click();
183
        document.body.removeChild(a);
184
        URL.revokeObjectURL(url);
185

186
        // Also save metadata
187
        const metadataBlob = new Blob([JSON.stringify(metadata, null, 2)], {
188
            type: 'application/json'
189
        });
190
        const metadataUrl = URL.createObjectURL(metadataBlob);
191
        const metadataLink = document.createElement('a');
192
        metadataLink.href = metadataUrl;
193
        metadataLink.download = `${filename.replace(/\.[^.]+$/, '')}-metadata.json`;
194
        document.body.appendChild(metadataLink);
195
        metadataLink.click();
196
        document.body.removeChild(metadataLink);
197
        URL.revokeObjectURL(metadataUrl);
198
    }
199

200
    async uploadRecording(blob, metadata) {
201
        const formData = new FormData();
202
        formData.append('recording', blob);
203
        formData.append('metadata', JSON.stringify(metadata));
204

205
        try {
206
            const response = await fetch('/api/recordings/upload', {
207
                method: 'POST',
208
                body: formData
209
            });
210

211
            if (!response.ok) {
212
                throw new Error(`Upload failed: ${response.statusText}`);
213
            }
214

215
            const result = await response.json();
216
            console.log('Recording uploaded:', result);
217
            return result;
218

219
        } catch (error) {
220
            console.error('Upload failed:', error);
221
            throw error;
222
        }
223
    }
224

225
    getFileExtension(mimeType) {
226
        const extensions = {
227
            'video/webm': 'webm',
228
            'video/mp4': 'mp4',
229
            'video/ogg': 'ogv'
230
        };
231

232
        for (const [type, ext] of Object.entries(extensions)) {
233
            if (mimeType.includes(type)) {
234
                return ext;
235
            }
236
        }
237

238
        return 'webm';
239
    }
240

241
    formatBytes(bytes) {
242
        if (bytes === 0) return '0 Bytes';
243
        const k = 1024;
244
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
245
        const i = Math.floor(Math.log(bytes) / Math.log(k));
246
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
247
    }
248

249
    handleRecordingError(error) {
250
        console.error('Recording error:', error);
251
        this.isRecording = false;
252
        this.onRecordingError?.(error);
253
    }
254

255
    // Event handlers (can be overridden)
256
    onRecordingProgress(progress) {
257
        console.log('Recording progress:', progress);
258
    }
259

260
    onRecordingComplete(blob, metadata) {
261
        console.log('Recording complete:', metadata);
262
    }
263

264
    onRecordingError(error) {
265
        console.error('Recording error:', error);
266
    }
267
}

Live Streaming Integration#

1
class LiveStreamingManager {
2
    constructor() {
3
        this.streamingTargets = new Map();
4
        this.isStreaming = false;
5
        this.streamingMetrics = {};
6
    }
7

8
    async startLiveStream(stream, targets) {
9
        try {
10
            for (const target of targets) {
11
                await this.initializeStreamingTarget(target, stream);
12
            }
13

14
            this.isStreaming = true;
15
            this.startMetricsCollection();
16

17
            console.log('Live streaming started to targets:', targets);
18
            return true;
19

20
        } catch (error) {
21
            console.error('Failed to start live streaming:', error);
22
            throw error;
23
        }
24
    }
25

26
    async initializeStreamingTarget(target, stream) {
27
        switch (target.type) {
28
            case 'rtmp':
29
                return this.initializeRTMPStream(target, stream);
30
            case 'webrtc':
31
                return this.initializeWebRTCStream(target, stream);
32
            case 'youtube':
33
                return this.initializeYouTubeStream(target, stream);
34
            case 'twitch':
35
                return this.initializeTwitchStream(target, stream);
36
            default:
37
                throw new Error(`Unsupported streaming target: ${target.type}`);
38
        }
39
    }
40

41
    async initializeRTMPStream(target, stream) {
42
        // RTMP streaming requires a media server
43
        const rtmpConfig = {
44
            url: target.url,
45
            key: target.streamKey,
46
            bitrate: target.bitrate || 2500,
47
            resolution: target.resolution || '1080p'
48
        };
49

50
        // This would typically use a WebRTC-to-RTMP bridge service
51
        const streamingEndpoint = await this.createRTMPBridge(rtmpConfig);
52

53
        // Create peer connection to streaming service
54
        const pc = new RTCPeerConnection();
55
        stream.getTracks().forEach(track => {
56
            pc.addTrack(track, stream);
57
        });
58

59
        // Connect to streaming endpoint
60
        await this.connectToStreamingEndpoint(pc, streamingEndpoint);
61

62
        this.streamingTargets.set(target.id, {
63
            type: 'rtmp',
64
            connection: pc,
65
            config: rtmpConfig,
66
            status: 'connected'
67
        });
68
    }
69

70
    async initializeWebRTCStream(target, stream) {
71
        const pc = new RTCPeerConnection({
72
            iceServers: target.iceServers || [
73
                { urls: 'stun:stun.l.google.com:19302' }
74
            ]
75
        });
76

77
        stream.getTracks().forEach(track => {
78
            pc.addTrack(track, stream);
79
        });
80

81
        // Handle WebRTC signaling
82
        pc.onicecandidate = (event) => {
83
            if (event.candidate) {
84
                this.sendSignalingMessage(target, {
85
                    type: 'ice-candidate',
86
                    candidate: event.candidate
87
                });
88
            }
89
        };
90

91
        const offer = await pc.createOffer();
92
        await pc.setLocalDescription(offer);
93

94
        // Send offer to target
95
        await this.sendSignalingMessage(target, {
96
            type: 'offer',
97
            offer: offer
98
        });
99

100
        this.streamingTargets.set(target.id, {
101
            type: 'webrtc',
102
            connection: pc,
103
            config: target,
104
            status: 'connecting'
105
        });
106
    }
107

108
    async createRTMPBridge(config) {
109
        // This would connect to a WebRTC-to-RTMP bridge service
110
        const response = await fetch('/api/streaming/rtmp-bridge', {
111
            method: 'POST',
112
            headers: { 'Content-Type': 'application/json' },
113
            body: JSON.stringify(config)
114
        });
115

116
        if (!response.ok) {
117
            throw new Error('Failed to create RTMP bridge');
118
        }
119

120
        return response.json();
121
    }
122

123
    startMetricsCollection() {
124
        this.metricsInterval = setInterval(() => {
125
            this.collectStreamingMetrics();
126
        }, 5000);
127
    }
128

129
    collectStreamingMetrics() {
130
        const metrics = {};
131

132
        this.streamingTargets.forEach((target, id) => {
133
            if (target.connection && target.connection.getStats) {
134
                target.connection.getStats().then(stats => {
135
                    metrics[id] = this.parseRTCStats(stats);
136
                });
137
            }
138
        });
139

140
        this.streamingMetrics = metrics;
141
        this.onMetricsUpdate?.(metrics);
142
    }
143

144
    parseRTCStats(stats) {
145
        const parsed = {
146
            bitrate: 0,
147
            packetsLost: 0,
148
            roundTripTime: 0,
149
            jitter: 0
150
        };
151

152
        stats.forEach(report => {
153
            if (report.type === 'outbound-rtp') {
154
                parsed.bitrate += report.bytesPerSecond || 0;
155
                parsed.packetsLost += report.packetsLost || 0;
156
            }
157
            if (report.type === 'candidate-pair' && report.nominated) {
158
                parsed.roundTripTime = report.currentRoundTripTime || 0;
159
            }
160
        });
161

162
        return parsed;
163
    }
164

165
    async stopLiveStream() {
166
        try {
167
            this.streamingTargets.forEach((target, id) => {
168
                if (target.connection) {
169
                    target.connection.close();
170
                }
171
            });
172

173
            this.streamingTargets.clear();
174
            this.isStreaming = false;
175

176
            if (this.metricsInterval) {
177
                clearInterval(this.metricsInterval);
178
                this.metricsInterval = null;
179
            }
180

181
            console.log('Live streaming stopped');
182
            return true;
183

184
        } catch (error) {
185
            console.error('Failed to stop live streaming:', error);
186
            throw error;
187
        }
188
    }
189

190
    getStreamingStatus() {
191
        const status = {
192
            isStreaming: this.isStreaming,
193
            targets: Array.from(this.streamingTargets.entries()).map(([id, target]) => ({
194
                id,
195
                type: target.type,
196
                status: target.status
197
            })),
198
            metrics: this.streamingMetrics
199
        };
200

201
        return status;
202
    }
203

204
    // Event handlers
205
    onMetricsUpdate(metrics) {
206
        console.log('Streaming metrics:', metrics);
207
    }
208

209
    async sendSignalingMessage(target, message) {
210
        // Implementation depends on signaling method
211
        if (target.signaling === 'websocket') {
212
            target.ws.send(JSON.stringify(message));
213
        } else if (target.signaling === 'http') {
214
            await fetch(target.signalingUrl, {
215
                method: 'POST',
216
                headers: { 'Content-Type': 'application/json' },
217
                body: JSON.stringify(message)
218
            });
219
        }
220
    }
221
}

Performance Optimization {#optimization}#

Adaptive Quality Control#

1
class AdaptiveQualityController {
2
    constructor() {
3
        this.currentQuality = 'medium';
4
        this.metrics = {
5
            bandwidth: 0,
6
            cpu: 0,
7
            frameRate: 0,
8
            packetsLost: 0
9
        };
10
        this.qualityLevels = {
11
            ultra: { width: 3840, height: 2160, frameRate: 30, bitrate: 8000 },
12
            high: { width: 2560, height: 1440, frameRate: 30, bitrate: 5000 },
13
            medium: { width: 1920, height: 1080, frameRate: 24, bitrate: 2500 },
14
            low: { width: 1280, height: 720, frameRate: 15, bitrate: 1000 },
15
            potato: { width: 854, height: 480, frameRate: 10, bitrate: 500 }
16
        };
17
        this.adaptationHistory = [];
18
    }
19

20
    async startAdaptiveMonitoring(stream, peerConnection) {
21
        this.stream = stream;
22
        this.peerConnection = peerConnection;
23

24
        this.monitoringInterval = setInterval(() => {
25
            this.collectMetrics();
26
            this.analyzeAndAdapt();
27
        }, 5000);
28

29
        this.cpuMonitor = this.startCPUMonitoring();
30
        await this.setupBandwidthMonitoring();
31
    }
32

33
    async collectMetrics() {
34
        if (this.peerConnection) {
35
            const stats = await this.peerConnection.getStats();
36
            this.parseWebRTCStats(stats);
37
        }
38

39
        this.metrics.cpu = await this.getCPUUsage();
40
        this.metrics.timestamp = Date.now();
41
    }
42

43
    parseWebRTCStats(stats) {
44
        stats.forEach(report => {
45
            if (report.type === 'outbound-rtp' && report.mediaType === 'video') {
46
                this.metrics.frameRate = report.framesPerSecond || 0;
47
                this.metrics.bitrate = report.bytesPerSecond * 8 || 0;
48
                this.metrics.packetsLost = report.packetsLost || 0;
49
            }
50

51
            if (report.type === 'candidate-pair' && report.nominated) {
52
                this.metrics.bandwidth = this.estimateBandwidth(report);
53
                this.metrics.rtt = report.currentRoundTripTime || 0;
54
            }
55
        });
56
    }
57

58
    estimateBandwidth(report) {
59
        const bytesReceived = report.bytesReceived || 0;
60
        const bytesSent = report.bytesSent || 0;
61
        const timeElapsed = report.timestamp / 1000;
62

63
        return ((bytesReceived + bytesSent) * 8) / timeElapsed;
64
    }
65

66
    async getCPUUsage() {
67
        if ('getGamepads' in navigator) {
68
            // Use performance API as proxy for CPU usage
69
            const now = performance.now();
70
            const entries = performance.getEntries();
71
            const recentEntries = entries.filter(entry =>
72
                entry.startTime > now - 5000
73
            );
74

75
            const avgDuration = recentEntries.reduce((sum, entry) =>
76
                sum + (entry.duration || 0), 0
77
            ) / recentEntries.length;
78

79
            return Math.min(avgDuration / 16.67 * 100, 100); // Normalize to percentage
80
        }
81
        return 0;
82
    }
83

84
    analyzeAndAdapt() {
85
        const currentLevel = this.qualityLevels[this.currentQuality];
86
        let newQuality = this.currentQuality;
87
        let reason = '';
88

89
        // Check for degradation conditions
90
        if (this.metrics.cpu > 80) {
91
            newQuality = this.downgradeQuality(this.currentQuality);
92
            reason = 'High CPU usage';
93
        } else if (this.metrics.packetsLost > 5) {
94
            newQuality = this.downgradeQuality(this.currentQuality);
95
            reason = 'High packet loss';
96
        } else if (this.metrics.bandwidth < currentLevel.bitrate * 1.2) {
97
            newQuality = this.downgradeQuality(this.currentQuality);
98
            reason = 'Insufficient bandwidth';
99
        } else if (this.metrics.frameRate < currentLevel.frameRate * 0.8) {
100
            newQuality = this.downgradeQuality(this.currentQuality);
101
            reason = 'Low frame rate';
102
        }
103

104
        // Check for improvement conditions
105
        else if (
106
            this.metrics.cpu < 50 &&
107
            this.metrics.packetsLost < 1 &&
108
            this.metrics.bandwidth > this.getNextQualityLevel(this.currentQuality)?.bitrate * 1.5
109
        ) {
110
            newQuality = this.upgradeQuality(this.currentQuality);
111
            reason = 'Good conditions, upgrading';
112
        }
113

114
        if (newQuality !== this.currentQuality) {
115
            this.adaptQuality(newQuality, reason);
116
        }
117
    }
118

119
    downgradeQuality(current) {
120
        const levels = Object.keys(this.qualityLevels);
121
        const currentIndex = levels.indexOf(current);
122
        return currentIndex < levels.length - 1 ? levels[currentIndex + 1] : current;
123
    }
124

125
    upgradeQuality(current) {
126
        const levels = Object.keys(this.qualityLevels);
127
        const currentIndex = levels.indexOf(current);
128
        return currentIndex > 0 ? levels[currentIndex - 1] : current;
129
    }
130

131
    getNextQualityLevel(current) {
132
        const upgraded = this.upgradeQuality(current);
133
        return this.qualityLevels[upgraded];
134
    }
135

136
    async adaptQuality(newQuality, reason) {
137
        const oldQuality = this.currentQuality;
138
        this.currentQuality = newQuality;
139

140
        const adaptation = {
141
            timestamp: Date.now(),
142
            from: oldQuality,
143
            to: newQuality,
144
            reason: reason,
145
            metrics: { ...this.metrics }
146
        };
147

148
        this.adaptationHistory.push(adaptation);
149

150
        // Keep only last 50 adaptations
151
        if (this.adaptationHistory.length > 50) {
152
            this.adaptationHistory.shift();
153
        }
154

155
        console.log(`Quality adapted: ${oldQuality} → ${newQuality} (${reason})`);
156

157
        try {
158
            await this.applyQualitySettings(newQuality);
159
            this.onQualityAdapted?.(adaptation);
160
        } catch (error) {
161
            console.error('Failed to apply quality settings:', error);
162
            this.currentQuality = oldQuality; // Rollback
163
        }
164
    }
165

166
    async applyQualitySettings(quality) {
167
        const settings = this.qualityLevels[quality];
168

169
        if (this.stream) {
170
            const videoTrack = this.stream.getVideoTracks()[0];
171
            if (videoTrack && videoTrack.applyConstraints) {
172
                await videoTrack.applyConstraints({
173
                    width: { ideal: settings.width },
174
                    height: { ideal: settings.height },
175
                    frameRate: { ideal: settings.frameRate }
176
                });
177
            }
178
        }
179

180
        // Update encoding parameters if using RTCRtpSender
181
        if (this.peerConnection) {
182
            const senders = this.peerConnection.getSenders();
183
            for (const sender of senders) {
184
                if (sender.track && sender.track.kind === 'video') {
185
                    const params = sender.getParameters();
186
                    if (params.encodings && params.encodings[0]) {
187
                        params.encodings[0].maxBitrate = settings.bitrate * 1000;
188
                        params.encodings[0].maxFramerate = settings.frameRate;
189
                        await sender.setParameters(params);
190
                    }
191
                }
192
            }
193
        }
194
    }
195

196
    getQualityReport() {
197
        return {
198
            currentQuality: this.currentQuality,
199
            currentSettings: this.qualityLevels[this.currentQuality],
200
            metrics: this.metrics,
201
            adaptationHistory: this.adaptationHistory.slice(-10), // Last 10 adaptations
202
            qualityScore: this.calculateQualityScore()
203
        };
204
    }
205

206
    calculateQualityScore() {
207
        const weights = {
208
            frameRate: 0.3,
209
            bitrate: 0.3,
210
            packetsLost: -0.2,
211
            cpu: -0.1,
212
            rtt: -0.1
213
        };
214

215
        const normalized = {
216
            frameRate: Math.min(this.metrics.frameRate / 30, 1),
217
            bitrate: Math.min(this.metrics.bitrate / 5000000, 1),
218
            packetsLost: Math.max(1 - this.metrics.packetsLost / 10, 0),
219
            cpu: Math.max(1 - this.metrics.cpu / 100, 0),
220
            rtt: Math.max(1 - this.metrics.rtt * 1000 / 200, 0)
221
        };
222

223
        let score = 0;
224
        for (const [metric, weight] of Object.entries(weights)) {
225
            score += (normalized[metric] || 0) * Math.abs(weight);
226
        }
227

228
        return Math.round(score * 100);
229
    }
230

231
    stopAdaptiveMonitoring() {
232
        if (this.monitoringInterval) {
233
            clearInterval(this.monitoringInterval);
234
            this.monitoringInterval = null;
235
        }
236

237
        if (this.cpuMonitor) {
238
            this.cpuMonitor.disconnect();
239
            this.cpuMonitor = null;
240
        }
241
    }
242

243
    onQualityAdapted(adaptation) {
244
        console.log('Quality adaptation:', adaptation);
245
    }
246
}

Production Deployment {#production}#

Node.js Signaling Server#

1
const express = require('express');
2
const http = require('http');
3
const socketIo = require('socket.io');
4
const cors = require('cors');
5
const compression = require('compression');
6
const helmet = require('helmet');
7
const rateLimit = require('express-rate-limit');
8

9
class ScreenSharingServer {
10
    constructor(port = 3000) {
11
        this.port = port;
12
        this.app = express();
13
        this.server = http.createServer(this.app);
14
        this.io = socketIo(this.server, {
15
            cors: {
16
                origin: process.env.ALLOWED_ORIGINS?.split(',') || ["http://localhost:3000"],
17
                methods: ["GET", "POST"]
18
            },
19
            transports: ['websocket', 'polling']
20
        });
21

22
        this.rooms = new Map();
23
        this.users = new Map();
24

25
        this.setupMiddleware();
26
        this.setupRoutes();
27
        this.setupSocketHandlers();
28
    }
29

30
    setupMiddleware() {
31
        // Security
32
        this.app.use(helmet({
33
            contentSecurityPolicy: {
34
                directives: {
35
                    defaultSrc: ["'self'"],
36
                    scriptSrc: ["'self'", "'unsafe-inline'", "cdnjs.cloudflare.com"],
37
                    styleSrc: ["'self'", "'unsafe-inline'"],
38
                    mediaSrc: ["'self'", "blob:", "data:"],
39
                    connectSrc: ["'self'", "wss:", "ws:"]
40
                }
41
            }
42
        }));
43

44
        // Rate limiting
45
        const limiter = rateLimit({
46
            windowMs: 15 * 60 * 1000, // 15 minutes
47
            max: 1000, // Limit each IP to 1000 requests per windowMs
48
            message: 'Too many requests from this IP'
49
        });
50
        this.app.use(limiter);
51

52
        // Compression and parsing
53
        this.app.use(compression());
54
        this.app.use(cors());
55
        this.app.use(express.json({ limit: '10mb' }));
56
        this.app.use(express.static('public'));
57
    }
58

59
    setupRoutes() {
60
        // Health check
61
        this.app.get('/health', (req, res) => {
62
            res.json({
63
                status: 'healthy',
64
                uptime: process.uptime(),
65
                timestamp: new Date().toISOString(),
66
                rooms: this.rooms.size,
67
                users: this.users.size
68
            });
69
        });
70

71
        // Room management API
72
        this.app.get('/api/rooms', (req, res) => {
73
            const roomList = Array.from(this.rooms.entries()).map(([id, room]) => ({
74
                id,
75
                participants: room.participants.length,
76
                created: room.created,
77
                hasScreenShare: room.hasScreenShare
78
            }));
79
            res.json(roomList);
80
        });
81

82
        this.app.post('/api/rooms/:roomId/join', (req, res) => {
83
            const { roomId } = req.params;
84
            const { userId, userName } = req.body;
85

86
            if (!this.rooms.has(roomId)) {
87
                this.rooms.set(roomId, {
88
                    id: roomId,
89
                    participants: [],
90
                    created: new Date(),
91
                    hasScreenShare: false
92
                });
93
            }
94

95
            const room = this.rooms.get(roomId);
96
            const existingUser = room.participants.find(p => p.userId === userId);
97

98
            if (!existingUser) {
99
                room.participants.push({
100
                    userId,
101
                    userName,
102
                    joined: new Date(),
103
                    isScreenSharing: false
104
                });
105
            }
106

107
            res.json({
108
                room: {
109
                    id: roomId,
110
                    participants: room.participants
111
                }
112
            });
113
        });
114

115
        // Recording upload endpoint
116
        this.app.post('/api/recordings/upload', (req, res) => {
117
            // Implementation for handling recording uploads
118
            res.json({ success: true, id: Date.now() });
119
        });
120
    }
121

122
    setupSocketHandlers() {
123
        this.io.on('connection', (socket) => {
124
            console.log('User connected:', socket.id);
125

126
            socket.on('join-room', (data) => {
127
                this.handleJoinRoom(socket, data);
128
            });
129

130
            socket.on('leave-room', (data) => {
131
                this.handleLeaveRoom(socket, data);
132
            });
133

134
            socket.on('offer', (data) => {
135
                this.handleOffer(socket, data);
136
            });
137

138
            socket.on('answer', (data) => {
139
                this.handleAnswer(socket, data);
140
            });
141

142
            socket.on('ice-candidate', (data) => {
143
                this.handleIceCandidate(socket, data);
144
            });
145

146
            socket.on('screen-share-started', (data) => {
147
                this.handleScreenShareStarted(socket, data);
148
            });
149

150
            socket.on('screen-share-stopped', (data) => {
151
                this.handleScreenShareStopped(socket, data);
152
            });
153

154
            socket.on('disconnect', () => {
155
                this.handleDisconnect(socket);
156
            });
157
        });
158
    }
159

160
    handleJoinRoom(socket, data) {
161
        const { roomId, userId, userName } = data;
162

163
        socket.join(roomId);
164
        socket.userId = userId;
165
        socket.roomId = roomId;
166

167
        if (!this.rooms.has(roomId)) {
168
            this.rooms.set(roomId, {
169
                id: roomId,
170
                participants: [],
171
                created: new Date(),
172
                hasScreenShare: false
173
            });
174
        }
175

176
        const room = this.rooms.get(roomId);
177
        const existingUserIndex = room.participants.findIndex(p => p.userId === userId);
178

179
        if (existingUserIndex >= 0) {
180
            room.participants[existingUserIndex].socketId = socket.id;
181
        } else {
182
            room.participants.push({
183
                userId,
184
                userName,
185
                socketId: socket.id,
186
                joined: new Date(),
187
                isScreenSharing: false
188
            });
189
        }
190

191
        this.users.set(socket.id, {
192
            userId,
193
            userName,
194
            roomId,
195
            joined: new Date()
196
        });
197

198
        // Notify user of successful join
199
        socket.emit('room-joined', {
200
            roomId,
201
            participants: room.participants
202
        });
203

204
        // Notify other participants
205
        socket.to(roomId).emit('participant-joined', {
206
            userId,
207
            userName,
208
            joined: new Date()
209
        });
210

211
        console.log(`User ${userId} joined room ${roomId}`);
212
    }
213

214
    handleLeaveRoom(socket, data) {
215
        const { roomId, userId } = data;
216

217
        socket.leave(roomId);
218

219
        if (this.rooms.has(roomId)) {
220
            const room = this.rooms.get(roomId);
221
            room.participants = room.participants.filter(p => p.userId !== userId);
222

223
            if (room.participants.length === 0) {
224
                this.rooms.delete(roomId);
225
            }
226

227
            socket.to(roomId).emit('participant-left', { userId });
228
        }
229

230
        this.users.delete(socket.id);
231
        console.log(`User ${userId} left room ${roomId}`);
232
    }
233

234
    handleOffer(socket, data) {
235
        const { offer, roomId, from } = data;
236

237
        socket.to(roomId).emit('offer', {
238
            offer,
239
            from,
240
            timestamp: new Date()
241
        });
242

243
        console.log(`Offer from ${from} in room ${roomId}`);
244
    }
245

246
    handleAnswer(socket, data) {
247
        const { answer, roomId, from, to } = data;
248

249
        if (to) {
250
            // Send to specific user
251
            const targetSocket = this.findSocketByUserId(to, roomId);
252
            if (targetSocket) {
253
                targetSocket.emit('answer', {
254
                    answer,
255
                    from,
256
                    timestamp: new Date()
257
                });
258
            }
259
        } else {
260
            // Broadcast to room
261
            socket.to(roomId).emit('answer', {
262
                answer,
263
                from,
264
                timestamp: new Date()
265
            });
266
        }
267

268
        console.log(`Answer from ${from} in room ${roomId}`);
269
    }
270

271
    handleIceCandidate(socket, data) {
272
        const { candidate, roomId, to } = data;
273

274
        if (to) {
275
            const targetSocket = this.findSocketByUserId(to, roomId);
276
            if (targetSocket) {
277
                targetSocket.emit('ice-candidate', {
278
                    candidate,
279
                    from: socket.userId,
280
                    timestamp: new Date()
281
                });
282
            }
283
        } else {
284
            socket.to(roomId).emit('ice-candidate', {
285
                candidate,
286
                from: socket.userId,
287
                timestamp: new Date()
288
            });
289
        }
290
    }
291

292
    handleScreenShareStarted(socket, data) {
293
        const { roomId, userId, quality, hasAudio } = data;
294

295
        if (this.rooms.has(roomId)) {
296
            const room = this.rooms.get(roomId);
297
            const participant = room.participants.find(p => p.userId === userId);
298
            if (participant) {
299
                participant.isScreenSharing = true;
300
            }
301
            room.hasScreenShare = true;
302
        }
303

304
        socket.to(roomId).emit('screen-share-started', {
305
            userId,
306
            quality,
307
            hasAudio,
308
            timestamp: new Date()
309
        });
310

311
        console.log(`Screen share started by ${userId} in room ${roomId}`);
312
    }
313

314
    handleScreenShareStopped(socket, data) {
315
        const { roomId, userId } = data;
316

317
        if (this.rooms.has(roomId)) {
318
            const room = this.rooms.get(roomId);
319
            const participant = room.participants.find(p => p.userId === userId);
320
            if (participant) {
321
                participant.isScreenSharing = false;
322
            }
323

324
            // Check if anyone else is sharing
325
            room.hasScreenShare = room.participants.some(p => p.isScreenSharing);
326
        }
327

328
        socket.to(roomId).emit('screen-share-stopped', {
329
            userId,
330
            timestamp: new Date()
331
        });
332

333
        console.log(`Screen share stopped by ${userId} in room ${roomId}`);
334
    }
335

336
    handleDisconnect(socket) {
337
        console.log('User disconnected:', socket.id);
338

339
        const user = this.users.get(socket.id);
340
        if (user) {
341
            this.handleLeaveRoom(socket, {
342
                roomId: user.roomId,
343
                userId: user.userId
344
            });
345
        }
346
    }
347

348
    findSocketByUserId(userId, roomId) {
349
        const room = this.io.sockets.adapter.rooms.get(roomId);
350
        if (!room) return null;
351

352
        for (const socketId of room) {
353
            const socket = this.io.sockets.sockets.get(socketId);
354
            if (socket && socket.userId === userId) {
355
                return socket;
356
            }
357
        }
358
        return null;
359
    }
360

361
    start() {
362
        this.server.listen(this.port, () => {
363
            console.log(`Screen sharing server running on port ${this.port}`);
364
            console.log(`Health check: http://localhost:${this.port}/health`);
365
        });
366
    }
367

368
    stop() {
369
        this.server.close();
370
    }
371
}
372

373
// Start server
374
const port = process.env.PORT || 3000;
375
const server = new ScreenSharingServer(port);
376
server.start();
377

378
// Graceful shutdown
379
process.on('SIGINT', () => {
380
    console.log('Shutting down gracefully...');
381
    server.stop();
382
    process.exit(0);
383
});
384

385
module.exports = ScreenSharingServer;

Docker Deployment#

1
# Dockerfile
2
FROM node:18-alpine
3

4
# Install system dependencies
5
RUN apk add --no-cache \
6
    ffmpeg \
7
    python3 \
8
    make \
9
    g++
10

11
WORKDIR /app
12

13
# Copy package files
14
COPY package*.json ./
15
RUN npm ci --only=production
16

17
# Copy application files
18
COPY . .
19

20
# Create uploads directory
21
RUN mkdir -p uploads recordings
22

23
# Set permissions
24
RUN addgroup -g 1001 -S nodejs
25
RUN adduser -S screenapp -u 1001
26
RUN chown -R screenapp:nodejs /app
27
USER screenapp
28

29
# Expose port
30
EXPOSE 3000
31

32
# Health check
33
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
34
    CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1
35

36
# Start application
37
CMD ["npm", "start"]

1
version: '3.8'
2

3
services:
4
  screen-sharing-app:
5
    build: .
6
    ports:
7
      - "3000:3000"
8
    environment:
9
      - NODE_ENV=production
10
      - ALLOWED_ORIGINS=https://yourdomain.com
11
      - REDIS_URL=redis://redis:6379
12
    depends_on:
13
      - redis
14
      - coturn
15
    volumes:
16
      - ./recordings:/app/recordings
17
      - ./logs:/app/logs
18
    restart: unless-stopped
19
    healthcheck:
20
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/health"]
21
      interval: 30s
22
      timeout: 10s
23
      retries: 3
24

25
  redis:
26
    image: redis:7-alpine
27
    ports:
28
      - "6379:6379"
29
    volumes:
30
      - redis_data:/data
31
    restart: unless-stopped
32

33
  coturn:
34
    image: coturn/coturn:latest
35
    ports:
36
      - "3478:3478"
37
      - "3478:3478/udp"
38
      - "49152-65535:49152-65535/udp"
39
    environment:
40
      - TURN_USERNAME=screenapp
41
      - TURN_PASSWORD=your-secure-password
42
      - TURN_REALM=yourdomain.com
43
    volumes:
44
      - ./coturn.conf:/etc/turnserver.conf
45
    restart: unless-stopped
46

47
  nginx:
48
    image: nginx:alpine
49
    ports:
50
      - "80:80"
51
      - "443:443"
52
    volumes:
53
      - ./nginx.conf:/etc/nginx/nginx.conf
54
      - ./ssl:/etc/nginx/ssl
55
    depends_on:
56
      - screen-sharing-app
57
    restart: unless-stopped
58

59
volumes:
60
  redis_data:

Production Security Configuration#

1
const securityConfig = {
2
    // HTTPS enforcement
3
    https: {
4
        enabled: process.env.NODE_ENV === 'production',
5
        cert: process.env.SSL_CERT_PATH,
6
        key: process.env.SSL_KEY_PATH,
7
        hsts: {
8
            maxAge: 31536000,
9
            includeSubDomains: true,
10
            preload: true
11
        }
12
    },
13

14
    // CORS configuration
15
    cors: {
16
        origin: (origin, callback) => {
17
            const allowedOrigins = (process.env.ALLOWED_ORIGINS || '').split(',');
18

19
            if (!origin || allowedOrigins.includes(origin)) {
20
                callback(null, true);
21
            } else {
22
                callback(new Error('Not allowed by CORS'));
23
            }
24
        },
25
        credentials: true,
26
        methods: ['GET', 'POST', 'PUT', 'DELETE'],
27
        allowedHeaders: ['Content-Type', 'Authorization']
28
    },
29

30
    // Rate limiting
31
    rateLimit: {
32
        windowMs: 15 * 60 * 1000, // 15 minutes
33
        max: (req) => {
34
            if (req.path.includes('/api/recordings/upload')) {
35
                return 5; // Stricter limit for uploads
36
            }
37
            return 1000; // General limit
38
        },
39
        message: 'Too many requests from this IP',
40
        standardHeaders: true,
41
        legacyHeaders: false
42
    },
43

44
    // Content Security Policy
45
    csp: {
46
        directives: {
47
            defaultSrc: ["'self'"],
48
            scriptSrc: ["'self'", "'unsafe-inline'", "cdnjs.cloudflare.com"],
49
            styleSrc: ["'self'", "'unsafe-inline'", "fonts.googleapis.com"],
50
            fontSrc: ["'self'", "fonts.gstatic.com"],
51
            mediaSrc: ["'self'", "blob:", "data:"],
52
            connectSrc: ["'self'", "wss:", "ws:", "*.yourdomain.com"],
53
            imgSrc: ["'self'", "data:", "blob:"],
54
            frameSrc: ["'none'"],
55
            objectSrc: ["'none'"],
56
            upgradeInsecureRequests: []
57
        }
58
    },
59

60
    // File upload restrictions
61
    upload: {
62
        maxFileSize: 500 * 1024 * 1024, // 500MB
63
        allowedMimeTypes: [
64
            'video/webm',
65
            'video/mp4',
66
            'video/ogg'
67
        ],
68
        maxFiles: 10,
69
        destination: process.env.UPLOAD_PATH || './uploads'
70
    },
71

72
    // WebRTC security
73
    webrtc: {
74
        iceServers: [
75
            { urls: 'stun:stun.l.google.com:19302' },
76
            {
77
                urls: `turn:${process.env.TURN_SERVER_URL || 'your-turn-server.com'}:3478`,
78
                username: process.env.TURN_USERNAME,
79
                credential: process.env.TURN_PASSWORD
80
            }
81
        ],
82
        iceCandidatePoolSize: 10,
83
        bundlePolicy: 'max-bundle',
84
        rtcpMuxPolicy: 'require'
85
    },
86

87
    // Session configuration
88
    session: {
89
        secret: process.env.SESSION_SECRET || 'your-super-secret-key-change-in-production',
90
        resave: false,
91
        saveUninitialized: false,
92
        cookie: {
93
            secure: process.env.NODE_ENV === 'production',
94
            httpOnly: true,
95
            maxAge: 24 * 60 * 60 * 1000, // 24 hours
96
            sameSite: 'strict'
97
        }
98
    },
99

100
    // Logging configuration
101
    logging: {
102
        level: process.env.LOG_LEVEL || 'info',
103
        format: process.env.NODE_ENV === 'production' ? 'json' : 'dev',
104
        file: {
105
            enabled: true,
106
            path: process.env.LOG_PATH || './logs',
107
            maxSize: '20m',
108
            maxFiles: '14d'
109
        }
110
    }
111
};
112

113
module.exports = securityConfig;

Conclusion#

This comprehensive guide covers professional-grade WebRTC screen sharing implementation with:

Multi-source capture with window selection
Advanced audio processing with system audio capture
Adaptive quality control based on network conditions
Professional recording with multiple formats
Live streaming to various platforms
Production-ready deployment with Docker and security

The implementation provides a solid foundation for building enterprise-level screen sharing applications with real-time optimization and professional features.

Key features achieved:

✅ Multi-monitor support
✅ System audio capture
✅ Adaptive quality control
✅ Advanced recording capabilities
✅ Live streaming integration
✅ Production security
✅ Docker deployment
✅ Performance optimization

This solution can handle enterprise workloads and provides the foundation for building commercial screen sharing applications.

Complete Guide to WebRTC Screen Sharing: Implementation & Best Practices#