Mastering MediaSoup: Live Streaming & Video Conferencing SFU

View a step-by-step demo of a live streaming and video conferencing app, covering init connect, producer/consumer transports, and publishing feeds, deployed on AWS EC2.

Build a secure real-time server using express, socket.io, and media soup, host the front end from the back end, and configure https with mk cert for local testing.

Learn to create workers and initialize media soup to run an SFU, using a config file to define ports and log settings, and spawn workers per CPU thread.

Create a router in MediaSoup using codecs like opus, h264, and vp8 to route media between producers and consumers via transports, managed by a worker.

Copy the five starter files into your public folder and follow a step-by-step flow from connect to create a device, then to producer or consumer transport.

Students learn to initiate a server connection with init connect, set up socket.io signaling, and enable device controls by adding socket listeners and updating the UI.

Create and load a media soup client device to connect the web app to the SFU router, fetching RTP capabilities via socket.io.

Master the producer transport in media soup, with separate producer and consumer transports, signaling via socket.io, and handling ice candidates, WebRTC, and dtls and tls over udp.

Implement the client flow to create a producer transport by obtaining user media, enabling the produce button, and signaling the server to exchange ice and dtls parameters.

Learn to create a client producer transport with media soup using device.createSendTransport, obtain dtls parameters and ice candidates from the server, await getUserMedia, and implement connect and produce callbacks.

Publish the feed by enabling the publish button, create and connect the producer transport, and call produce with a video track while exchanging dtls parameters with the server.

Create consumer transport and subscribe to feed in media soup, and learn how WebRTC transports are prepared and negotiated for receiving media.

Learn to implement the consume flow in MediaSoup, handling producers, RTP capabilities, and client-server exchange to render remote video with proper pausing and debugging tips.

Learn practical debugging for media soup live streaming by using chrome://webrtc-internals to inspect ice gathering, ice candidates, and network issues.

Learn to run MediaSoup on another device by creating a consumer transport, aligning producer and consumer roles, and updating localhost to your network IP for streaming on port 3030.

Learn to implement a robust disconnect button flow that closes transports, producers, and consumers on both client and server, freeing resources and preserving trust with users.

Watch a demo of a full featured video conferencing app with a dominant speaker feature, showing how only the top five feeds are consumed and produced for scalable performance.

Update the template to prioritize JavaScript interactions with media soup, overwriting index.html and styles.css, and add a front-end UI folder with a UI buttons module for the join room workflow.

Create a secure express server for mediasoup by setting up server.js and a back end folder with certificates; install express, mediasoup, and socket.io, and add workers.

Connect the front end to the back end by loading the media soup client and socket.io client, establishing a http connection on ports 5173 and 3031 for local development.

learn to implement a join room workflow with socket.io, create and manage client and room objects, and coordinate signaling between front end and server for live streaming.

Initialize the client class with username, socket, and router, then organize upstream and downstream transports per peer, each with audio and video consumers and a dominant speaker feature.

Learn how the room class in media soup uses its worker and router, creates a new room when needed, selects the least loaded worker, and updates the master rooms array.

Finish joinRoom by linking the client to the room, adding the room to the client, joining the socket.io room, and sending router rtp capabilities in the acknowledgement.

Load the frontend device after receiving the router RTP capabilities to join a room, then set up transports and reveal the media control buttons for future feeds.

Click the feed button to obtain your local media via getUserMedia, select the correct mic, display the local stream, and enable the feed, send feed, and mute controls.

Learn how to initiate a send feed in media soup by creating a producer transport for audio and video, enabling front end and back end ping pong coordination.

Handle the request transport event on the server to create a WebRTC transport via the router, return producer or consumer transport parameters, and apply config-driven bitrate settings.

Learn to create a front-end send transport with MediaSoup, wire up connect and produce events, and generate separate video and audio producers from local streams.

Implement connect and produce listeners to emit events to the back end and advance on success. Handle audio and video producers on a single transport with dtls parameters.

Explore how to manage consuming in MediaSoup with dominant speaker prioritization, handling new joins, new producers, and top five speaker updates to optimize transports and bandwidth.

Mediasoup teaches configuring an active speaker observer on the router to monitor audio producers every 300 ms and emit a dominant speaker event for real-time highlighting.

Test the dominant speaker feature by enabling audio mute and toggling the audio producer pause and resume, with UI feedback and server-side audio change messages.

Discover how the getStats method works across front-end and back-end transports to monitor RTC stats and troubleshoot the network, tracking bytes and packets for producers and consumers.

Join room to start consuming process by selecting up to five speakers from the active speaker list, mapping audio pids to video pids, and sending transports to the front end.

Create a downstream consumer transport for each producer a client consumes, linking it to both audio and video producer ids, and manage multiple transports per room as new producers join.

Create a consumer transport by building a receive transport and wiring on connect and ice listeners. Emit consume media to the server to establish audio and video consumers.

Configure the server to handle consume media by validating can consume, selecting the correct downstream transport for each audio and video producer, then returning the consumer params to the frontend.

Finish the front-end consume flow by handling consumer params and errors, connecting the transport, unpausing the consumer, and combining audio and video tracks into a single media stream.

Explain handling active speaker changes in a media soup room by updating the active speaker list, muting and pausing non-top speakers, and notifying clients to start or resume consuming.

Demonstrates how to handle active speaker changes by muting and resuming producers and consumers, creating new transports per peer, and broadcasting updated active speaker lists in a MediaSoup room.

Implement and synchronize front-end active speaker updates, handle new producers to consume, and request transports to consume, updating remote video slots for a live streaming and video conferencing app.

Explore how the getStats method works on front end and back end as a workhorse for data, and troubleshoot networks by monitoring transport, producers, and consumers with WebRTC stats.

Enable front-end recording for a video conference by capturing the screen and microphone, merging remote audio with Web Audio API, and exporting a WebM file via MediaRecorder.