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

メディアトラックの追加と削除

`RTCPeerConnection`内の音声・動画トラックを管理し、通話中にストリームを動的に操作する方法を学びます。

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

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

Dynamic Media in WebRTC Calls

Imagine you're in a video call and want to mute your microphone or switch your camera. How does WebRTC handle these changes without dropping the call?

This lesson explores how to dynamically add and remove audio/video tracks from an active WebRTC peer connection. This is crucial for creating interactive and flexible real-time applications.

What is a MediaStreamTrack?

Before managing tracks, let's clarify what they are. A MediaStreamTrack represents a single audio or video component within a MediaStream.

Kind: Tracks have a kind property, either 'audio' or 'video'.
Enabled: The enabled property (boolean) lets you temporarily pause/unpause a track without removing it.

Sending Media with addTrack()

To start sending a local audio or video track to a remote peer, you use the RTCPeerConnection.addTrack() method.

It takes two arguments:

The MediaStreamTrack you want to send.
The MediaStream the track belongs to (important for grouping related tracks).

This method tells the peer connection to prepare and send this track's data.

Code: Adding a Local Video Track

Let's see how you'd add a local video track to your RTCPeerConnection. This snippet sets up a basic peer connection and adds a camera feed.

async function addLocalVideoTrack() {
  // In a real app, 'pc' would be an already established RTCPeerConnection
  const pc = new RTCPeerConnection();

  try {
    // Get access to the user's camera
    const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    const videoTrack = localStream.getVideoTracks()[0];

    // Add the video track to the peer connection
    const sender = pc.addTrack(videoTrack, localStream);
    console.log('Video track added! RTCRtpSender:', sender);

    // In a full WebRTC app, you'd now create an offer and exchange SDP
    // pc.createOffer().then(offer => pc.setLocalDescription(offer)).then(() => sendOfferToRemote(pc.localDescription));

  } catch (error) {
    console.error('Error adding video track:', error);
  }
}

addLocalVideoTrack();

Understanding RTCRtpSender

When you call pc.addTrack(), it returns an RTCRtpSender object. This object is your handle to manage the sending of that specific track.

It allows you to modify parameters related to how the track is sent.
It's also required if you later want to remove the track from the peer connection.

Stopping Media with removeTrack()

To stop sending a particular media track, you use the RTCPeerConnection.removeTrack() method.

This method takes one argument: the RTCRtpSender object that was returned when you originally called addTrack() for that track.

Once removed, the track's data will no longer be transmitted over the peer connection.

Code: Implementing removeTrack()

Let's extend our previous example to demonstrate how to remove a track after it has been added. We need to keep track of the RTCRtpSender.

let peerConnection; // Global or accessible RTCPeerConnection instance
let videoSender;    // Global or accessible RTCRtpSender instance
let localVideoTrack; // Global or accessible MediaStreamTrack

async function setupAndAddTrack() {
  peerConnection = new RTCPeerConnection();

  try {
    const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    localVideoTrack = localStream.getVideoTracks()[0];
    videoSender = peerConnection.addTrack(localVideoTrack, localStream);
    console.log('Video track added. Sender:', videoSender);
  } catch (error) {
    console.error('Error during setup or addTrack:', error);
  }
}

function removeLocalVideoTrack() {
  if (peerConnection && videoSender) {
    peerConnection.removeTrack(videoSender);
    localVideoTrack.stop(); // Stops the camera/mic itself
    console.log('Video track removed and stopped!');
  } else {
    console.log('No track to remove or not set up.');
  }
}

// Simulate adding a track, then removing it after 3 seconds
setupAndAddTrack().then(() => {
  setTimeout(removeLocalVideoTrack, 3000);
});

Receiving Remote Track Updates

On the receiving end, how does a peer know that a new track has been added or an existing one removed by the sender?

The RTCPeerConnection.ontrack event listener is fired on the receiving peer when a new MediaStreamTrack is added to the remote description. This is where you would typically attach the incoming track to a video or audio element.

Real-World Track Management

Dynamic track management is essential for many real-time features:

Muting/Unmuting: Simply toggle track.enabled = false or true.
Camera/Mic Switching: Remove the old track, get a new one from getUserMedia(), and add the new track.
Screen Sharing: Get a screen share track (e.g., with getDisplayMedia()) and add it to the peer connection.

Test Your Track Knowledge

RTCPeerConnection allows for dynamic management of media streams. Let's check your understanding of how tracks are handled.

Recap: Dynamic Media Control

In this lesson, you learned how to dynamically manage media tracks within a WebRTC call:

addTrack() sends a MediaStreamTrack, returning an RTCRtpSender.
removeTrack() stops sending a track by taking its RTCRtpSender.
The remote peer listens for the ontrack event to receive new media.
You can mute/unmute using track.enabled and switch sources by adding/removing tracks.

Mastering these methods allows for rich, interactive real-time experiences!

よくある質問

「メディアトラックの追加と削除」レッスンは無料ですか？

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

「メディアトラックの追加と削除」で何を学びますか？

`RTCPeerConnection`内の音声・動画トラックを管理し、通話中にストリームを動的に操作する方法を学びます。ブラウザで直接実行するハンズオンコードでReal-Time Streaming Systems (WebRTC + Live Data)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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