การแสดงเสียงและวิดีโอจากระยะไกล

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!

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.

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.

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.

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.

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!

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.

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.

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.

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

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!