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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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, and the Real-Time Streaming Systems (WebRTC + Live Data) course includes 4 lessons in total. 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.

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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

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)