Controlling Media Quality and Constraints
Learn to shape WebRTC media: applying resolution and frame-rate constraints, muting tracks, switching devices, and adjusting encoding bitrate for adaptive quality.
Controlling Media Quality and Constraints is a free Real-Time Streaming Systems (WebRTC + Live Data) lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Real-Time Streaming Systems (WebRTC + Live Data) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “Controlling Media Quality and Constraints” lesson free?
Yes — the full text of “Controlling Media Quality and Constraints” is free to read here on the web, and the Real-Time Streaming Systems (WebRTC + Live Data) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Real-Time Streaming Systems (WebRTC + Live Data) course, upgrade to CoddyKit PRO.
What will I learn in “Controlling Media Quality and Constraints”?
Learn to shape WebRTC media: applying resolution and frame-rate constraints, muting tracks, switching devices, and adjusting encoding bitrate for adaptive quality. You practise Real-Time Streaming Systems (WebRTC + Live Data) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Real-Time Streaming Systems (WebRTC + Live Data)?
No prior experience is required. Real-Time Streaming Systems (WebRTC + Live Data) on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Controlling Media Quality and Constraints” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Real-Time Streaming Systems (WebRTC + Live Data) lesson?
Yes. Every Real-Time Streaming Systems (WebRTC + Live Data) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Accessing User Media Devices
- Adding and Removing Media Tracks
- Displaying Remote Audio/Video
- Controlling Media Quality and Constraints