0Pricing
Real-Time Streaming Systems (WebRTC + Live Data) · Lesson

Displaying Remote Audio/Video

Implement the logic to receive and display remote audio and video streams from connected peers in your application.

Displaying Remote Audio/Video is a free Real-Time Streaming Systems (WebRTC + Live Data) lesson on CoddyKit. This is lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Real-Time Streaming Systems (WebRTC + Live Data) learning path, and your progress syncs across the web and the CoddyKit app. The Real-Time Streaming Systems (WebRTC + Live Data) course includes 4 lessons in total.

See and Hear Others

WebRTC enables direct communication, but how do we actually see and hear what a remote peer is sending?

  • We'll learn how to capture incoming audio/video data.
  • Then, how to display this data in your web application using standard HTML elements.
  • This is crucial for building video calls, live streaming, and more!

The 'ontrack' Event

When a remote peer sends a media stream, your RTCPeerConnection needs to know about it. This is handled by the ontrack event.

  • The ontrack event is triggered on your RTCPeerConnection object.
  • It fires when a new MediaStreamTrack (like an audio or video track) is received from the remote peer.
  • This event is your gateway to accessing the remote media.

Accessing Remote Streams

The ontrack event provides an event object (let's call it event) that contains important information:

  • event.track: The individual MediaStreamTrack (e.g., a single video track or audio track).
  • event.streams: An array of MediaStream objects. Typically, the first item (event.streams[0]) contains the full remote stream with all its tracks.

We usually work with event.streams[0] to get the complete stream for display.

Display with 'srcObject'

Once you have the MediaStream from the remote peer, how do you show it?

HTML5 <video> and <audio> elements have a special property called srcObject.

  • You can directly assign a MediaStream object to videoElement.srcObject.
  • This property tells the media element to play the stream without needing to create a temporary URL.
  • It's the modern and preferred way to display streams.

Dynamic Media Elements

For WebRTC, you often don't have a fixed number of video elements. You'll create them on the fly as peers connect:

Use document.createElement() to create new <video> or <audio> tags.

const videoElement = document.createElement('video');
// ... set attributes and append to DOM ...

These elements can then be styled and added to your page layout.

Code: Attach a Stream to Video

This example shows how to get a local camera stream and attach it to a dynamically created video element using srcObject. This is exactly how you'd attach a remote stream after receiving it via ontrack!

const videoContainer = document.getElementById('videos') || document.body;

function displayStream(stream) {
  const video = document.createElement('video');
  video.autoplay = true;
  video.playsinline = true;
  video.width = 300;
  video.height = 200;
  video.style.border = '2px solid blue';
  video.style.margin = '5px';
  videoContainer.appendChild(video);

  video.srcObject = stream; // Attach the stream
  console.log('Stream attached to video element.');
}

// Simulate getting a stream (e.g., from getUserMedia or ontrack)
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(localStream => {
    console.log('Got local stream. Displaying...');
    displayStream(localStream);
  })
  .catch(e => {
    console.error('Error getting stream:', e);
    const errorMessage = document.createElement('p');
    errorMessage.innerText = 'Error: ' + e.message + '. Make sure camera is allowed.';
    videoContainer.appendChild(errorMessage);
  });

Handling Audio-Only Streams

The process for displaying remote audio-only streams is very similar:

  • Instead of document.createElement('video'), use document.createElement('audio').
  • Assign the MediaStream to audioElement.srcObject.
  • Audio elements are typically invisible, so no need for width/height styling.

The browser will play the audio in the background once the stream is attached.

Multiple Peers, Multiple Streams

In a multi-party call, you'll receive streams from several remote peers. Each peer's stream needs its own display:

  • Every time an ontrack event fires for a new remote stream, create a new <video> or <audio> element.
  • Assign the incoming event.streams[0] to that new element's srcObject.
  • You might use a unique ID for each peer to manage their respective media elements.

Essential Media Attributes

When creating media elements for WebRTC, some attributes are vital:

  • autoplay: Ensures the media starts playing automatically.
  • playsinline: Crucial for iOS devices to play video directly within the browser, not fullscreen.
  • muted: Often used for your local video preview to prevent echo, but usually unmuted for remote videos.
  • controls: (Optional) Displays browser's default play/pause, volume controls.

Quick Check: Displaying Streams

You've successfully received a MediaStream from a remote peer. Which HTML property should you use to display this stream in a <video> element?

Recap: See & Hear

Great job! You've learned how to bring remote audio and video into your WebRTC application:

  • The ontrack event on RTCPeerConnection notifies you of incoming media.
  • You access the MediaStream via event.streams[0].
  • Assign this stream to an HTML <video> or <audio> element's srcObject property for display.
  • Remember essential attributes like autoplay and playsinline for smooth playback.

Now you can truly see and hear your connected peers!

Frequently Asked Questions

Is the “Displaying Remote Audio/Video” lesson free?

Yes — the full text of “Displaying Remote Audio/Video” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Real-Time Streaming Systems (WebRTC + Live Data) course, upgrade to CoddyKit PRO. The Real-Time Streaming Systems (WebRTC + Live Data) course includes 4 lessons in total.

What will I learn in “Displaying Remote Audio/Video”?

Implement the logic to receive and display remote audio and video streams from connected peers in your application. You practise Real-Time Streaming Systems (WebRTC + Live Data) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Real-Time Streaming Systems (WebRTC + Live Data)?

No prior experience is required. Real-Time Streaming Systems (WebRTC + Live Data) on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “Displaying Remote Audio/Video” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Real-Time Streaming Systems (WebRTC + Live Data) lesson?

Yes. Every Real-Time Streaming Systems (WebRTC + Live Data) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Accessing User Media Devices
  2. Adding and Removing Media Tracks
  3. Displaying Remote Audio/Video
  4. Controlling Media Quality and Constraints
← Back to Real-Time Streaming Systems (WebRTC + Live Data)