Dodawanie i usuwanie ścieżek multimedialnych
Nauczą się Państwo zarządzać ścieżkami audio i wideo w ramach `RTCPeerConnection`, umożliwiając dynamiczne manipulowanie strumieniem podczas połączenia.
Dodawanie i usuwanie ścieżek multimedialnych to bezpłatna lekcja Real-Time Streaming Systems (WebRTC + Live Data) na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Real-Time Streaming Systems (WebRTC + Live Data), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Real-Time Streaming Systems (WebRTC + Live Data) zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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
kindproperty, either'audio'or'video'. - Enabled: The
enabledproperty (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
MediaStreamTrackyou want to send. - The
MediaStreamthe 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 = falseortrue. - 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 aMediaStreamTrack, returning anRTCRtpSender.removeTrack()stops sending a track by taking itsRTCRtpSender.- The remote peer listens for the
ontrackevent to receive new media. - You can mute/unmute using
track.enabledand switch sources by adding/removing tracks.
Mastering these methods allows for rich, interactive real-time experiences!
Ucz się Real-Time Streaming Systems (WebRTC + Live Data) dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 12
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „Dodawanie i usuwanie ścieżek multimedialnych” jest bezpłatna?
Tak — pełny tekst „Dodawanie i usuwanie ścieżek multimedialnych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Real-Time Streaming Systems (WebRTC + Live Data), przejdź na CoddyKit PRO. Kurs Real-Time Streaming Systems (WebRTC + Live Data) zawiera 4 lekcji w sumie.
Co nauczysz się w „Dodawanie i usuwanie ścieżek multimedialnych”?
Nauczą się Państwo zarządzać ścieżkami audio i wideo w ramach `RTCPeerConnection`, umożliwiając dynamiczne manipulowanie strumieniem podczas połączenia. Ćwiczysz Real-Time Streaming Systems (WebRTC + Live Data) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Real-Time Streaming Systems (WebRTC + Live Data)?
Nie wymagamy żadnego doświadczenia. Real-Time Streaming Systems (WebRTC + Live Data) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Dodawanie i usuwanie ścieżek multimedialnych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Real-Time Streaming Systems (WebRTC + Live Data)?
Tak. Każda lekcja Real-Time Streaming Systems (WebRTC + Live Data) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dostęp do urządzeń multimedialnych użytkownika
- Dodawanie i usuwanie ścieżek multimedialnych
- Wyświetlanie zdalnego dźwięku i obrazu
- Sterowanie jakością mediów i ograniczeniami