0Pricing
Real-Time Streaming Systems (WebRTC + Live Data) · Lekcja

Sterowanie jakością mediów i ograniczeniami

Naucz się kształtować media WebRTC: stosować ograniczenia rozdzielczości i liczby klatek, wyciszać ścieżki, przełączać urządzenia i dostosowywać bitrate kodowania dla adaptacyjnej jakości.

Sterowanie jakością mediów i ograniczeniami to bezpłatna lekcja Real-Time Streaming Systems (WebRTC + Live Data) na CoddyKit. To lekcja 4 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.

Beyond Just Getting Media

You can access devices and display remote streams. Now you will learn to control media quality: resolution, frame rate, muting, device switching, and bandwidth, so calls look good and stay smooth on any network.

Media Constraints

When requesting media you pass constraints describing the quality you want. The browser tries to satisfy them, falling back if the hardware cannot.

const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1280, height: 720, frameRate: 30 },
  audio: { echoCancellation: true }
});

Ideal vs Exact

Use ideal for a preferred value the browser can relax, and exact to require it (which fails if unavailable). Prefer ideal for flexibility.

const constraints = {
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    frameRate: { ideal: 30, max: 60 }
  }
};

Changing Constraints Live

You can adjust quality on an existing track with applyConstraints, for example lowering resolution to save bandwidth, without restarting the stream.

const track = stream.getVideoTracks()[0];
await track.applyConstraints({ width: 640, height: 360 });

Muting Tracks

To mute, set a track's enabled to false. The track stays in the connection but transmits black frames or silence, so no renegotiation is needed.

function toggleMic(stream) {
  const audio = stream.getAudioTracks()[0];
  audio.enabled = !audio.enabled;
  return audio.enabled;
}

Enumerating Devices

To let users pick a camera or mic, list available devices with enumerateDevices and use each device's deviceId.

const devices = await navigator.mediaDevices.enumerateDevices();
const cameras = devices.filter(d => d.kind === 'videoinput');

Switching Cameras Mid-Call

To switch devices without renegotiating, get the new track and replaceTrack on the existing sender.

async function switchCamera(pc, deviceId) {
  const s = await navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: deviceId } }
  });
  const newTrack = s.getVideoTracks()[0];
  const sender = pc.getSenders().find(x => x.track.kind === 'video');
  await sender.replaceTrack(newTrack);
}

Limiting Bitrate

You can cap how much bandwidth a track uses through the sender's encoding parameters, useful on metered or weak connections.

const sender = pc.getSenders()[0];
const params = sender.getParameters();
params.encodings[0].maxBitrate = 500000; // 500 kbps
await sender.setParameters(params);

Simulcast Basics

Simulcast sends multiple quality layers of the same video at once. A media server then forwards the layer each receiver can handle, improving group calls on mixed connections.

Reading Stats

The getStats API reports live metrics like resolution, frame rate, and packet loss so you can adapt quality dynamically.

const stats = await pc.getStats();
stats.forEach(report => {
  if (report.type === 'outbound-rtp') {
    console.log('fps:', report.framesPerSecond);
  }
});

Putting Quality First

Good calls balance quality against the network: request sensible constraints, let users mute and switch devices, cap bitrate when needed, and monitor stats to adapt. These controls turn raw media into a polished experience.

Quick Check

Test your understanding of media control.

Recap

You learned to control media quality:

  • Constraints with ideal/exact, adjustable via applyConstraints
  • Muting with track.enabled
  • Device switching via replaceTrack
  • Bitrate caps, simulcast, and getStats for adaptation

These tools deliver smooth, high-quality calls across networks.

Często zadawane pytania

Czy lekcja „Sterowanie jakością mediów i ograniczeniami” jest bezpłatna?

Tak — pełny tekst „Sterowanie jakością mediów i ograniczeniami” 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 „Sterowanie jakością mediów i ograniczeniami”?

Naucz się kształtować media WebRTC: stosować ograniczenia rozdzielczości i liczby klatek, wyciszać ścieżki, przełączać urządzenia i dostosowywać bitrate kodowania dla adaptacyjnej jakości. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Sterowanie jakością mediów i ograniczeniami”?

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

  1. Dostęp do urządzeń multimedialnych użytkownika
  2. Dodawanie i usuwanie ścieżek multimedialnych
  3. Wyświetlanie zdalnego dźwięku i obrazu
  4. Sterowanie jakością mediów i ograniczeniami
← Powrót do Real-Time Streaming Systems (WebRTC + Live Data)