Real-Time Streaming Systems (WebRTC + Live Data) · Ders

Medya Kalitesini ve Kısıtlamaları Denetleme

4. ders / 413 adım

Medya Kalitesini ve Kısıtlamaları Denetleme, CoddyKit'te ücretsiz bir Real-Time Streaming Systems (WebRTC + Live Data) dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Real-Time Streaming Systems (WebRTC + Live Data) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Real-Time Streaming Systems (WebRTC + Live Data) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

İnteraktif derste cevapla

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.

Başlamak ücretsiz

Yapay zeka eğitmeniyle Real-Time Streaming Systems (WebRTC + Live Data) öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 12
Dersler: 48

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Medya Kalitesini ve Kısıtlamaları Denetleme” dersi ücretsiz mi?

Evet — “Medya Kalitesini ve Kısıtlamaları Denetleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Real-Time Streaming Systems (WebRTC + Live Data) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Real-Time Streaming Systems (WebRTC + Live Data) kursu toplamda 4 dersten oluşur.

“Medya Kalitesini ve Kısıtlamaları Denetleme” dersinde ne öğreneceğim?

Çözünürlük ve kare hızı kısıtlamaları uygulayarak, parçaları sessize alarak, cihazları değiştirerek ve uyarlanabilir kalite için kodlama bit hızını ayarlayarak WebRTC medyasını şekillendirmeyi öğreni… Real-Time Streaming Systems (WebRTC + Live Data) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Real-Time Streaming Systems (WebRTC + Live Data) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Real-Time Streaming Systems (WebRTC + Live Data), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Medya Kalitesini ve Kısıtlamaları Denetleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Real-Time Streaming Systems (WebRTC + Live Data) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Real-Time Streaming Systems (WebRTC + Live Data) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Kullanıcı Medya Cihazlarına Erişim
Medya Parçalarını Ekleme ve Kaldırma
Uzak Sesi ve Videoyu Görüntüleme
Medya Kalitesini ve Kısıtlamaları Denetleme

← Real-Time Streaming Systems (WebRTC + Live Data) Sayfasına Dön