Mengendalikan Kualitas dan Batasan Media
Pelajari cara membentuk media WebRTC: menerapkan batasan resolusi dan laju bingkai, membisukan trek, mengganti perangkat, serta menyesuaikan laju bit pengodean untuk kualitas adaptif.
Mengendalikan Kualitas dan Batasan Media adalah pelajaran Real-Time Streaming Systems (WebRTC + Live Data) gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Real-Time Streaming Systems (WebRTC + Live Data), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Real-Time Streaming Systems (WebRTC + Live Data) mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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 viaapplyConstraints - Muting with
track.enabled - Device switching via
replaceTrack - Bitrate caps, simulcast, and
getStatsfor adaptation
These tools deliver smooth, high-quality calls across networks.
Belajar Real-Time Streaming Systems (WebRTC + Live Data) dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengendalikan Kualitas dan Batasan Media” gratis?
Ya — teks lengkap “Mengendalikan Kualitas dan Batasan Media” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Real-Time Streaming Systems (WebRTC + Live Data), upgrade ke CoddyKit PRO. Kursus Real-Time Streaming Systems (WebRTC + Live Data) mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengendalikan Kualitas dan Batasan Media”?
Pelajari cara membentuk media WebRTC: menerapkan batasan resolusi dan laju bingkai, membisukan trek, mengganti perangkat, serta menyesuaikan laju bit pengodean untuk kualitas adaptif. Kamu berlatih Real-Time Streaming Systems (WebRTC + Live Data) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Real-Time Streaming Systems (WebRTC + Live Data)?
Tidak diperlukan pengalaman sebelumnya. Real-Time Streaming Systems (WebRTC + Live Data) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Mengendalikan Kualitas dan Batasan Media” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Real-Time Streaming Systems (WebRTC + Live Data) ini?
Ya. Setiap pelajaran Real-Time Streaming Systems (WebRTC + Live Data) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengakses Perangkat Media Pengguna
- Menambahkan dan Menghapus Trek Media
- Menampilkan Audio/Video Jarak Jauh
- Mengendalikan Kualitas dan Batasan Media