Real-Time Streaming Systems (WebRTC + Live Data) · レッスン

リモート音声・動画の表示

接続されたピアからリモートの音声・動画ストリームを受信し、アプリケーションに表示する処理を実装します。

「リモート音声・動画の表示」はCoddyKit上の無料Real-Time Streaming Systems (WebRTC + Live Data)レッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReal-Time Streaming Systems (WebRTC + Live Data)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Real-Time Streaming Systems (WebRTC + Live Data)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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!

よくある質問

「リモート音声・動画の表示」レッスンは無料ですか？

はい。「リモート音声・動画の表示」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Real-Time Streaming Systems (WebRTC + Live Data)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Real-Time Streaming Systems (WebRTC + Live Data)コースには全4レッスンが含まれています。

「リモート音声・動画の表示」で何を学びますか？

接続されたピアからリモートの音声・動画ストリームを受信し、アプリケーションに表示する処理を実装します。ブラウザで直接実行するハンズオンコードでReal-Time Streaming Systems (WebRTC + Live Data)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Real-Time Streaming Systems (WebRTC + Live Data)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReal-Time Streaming Systems (WebRTC + Live Data)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「リモート音声・動画の表示」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReal-Time Streaming Systems (WebRTC + Live Data)レッスンでコードを書いて実行できますか？

はい。すべてのReal-Time Streaming Systems (WebRTC + Live Data)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Real-Time Streaming Systems (WebRTC + Live Data)に戻る