Contrôler la qualité et les contraintes des médias
Apprenez à façonner les médias WebRTC : appliquer des contraintes de résolution et de fréquence d’images, couper des pistes, changer d’appareil et ajuster le débit d’encodage pour une qualité adaptative.
Contrôler la qualité et les contraintes des médias est une leçon Real-Time Streaming Systems (WebRTC + Live Data) gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Real-Time Streaming Systems (WebRTC + Live Data), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Real-Time Streaming Systems (WebRTC + Live Data) comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Apprends Real-Time Streaming Systems (WebRTC + Live Data) avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 12
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Contrôler la qualité et les contraintes des médias » est-elle gratuite ?
Oui — le texte complet de « Contrôler la qualité et les contraintes des médias » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Real-Time Streaming Systems (WebRTC + Live Data), passe à CoddyKit PRO. Le cours Real-Time Streaming Systems (WebRTC + Live Data) comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Contrôler la qualité et les contraintes des médias » ?
Apprenez à façonner les médias WebRTC : appliquer des contraintes de résolution et de fréquence d’images, couper des pistes, changer d’appareil et ajuster le débit d’encodage pour une qualité adaptat… Tu pratiques Real-Time Streaming Systems (WebRTC + Live Data) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Real-Time Streaming Systems (WebRTC + Live Data) ?
Aucune expérience préalable n'est requise. Real-Time Streaming Systems (WebRTC + Live Data) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Contrôler la qualité et les contraintes des médias » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Real-Time Streaming Systems (WebRTC + Live Data) ?
Oui. Chaque leçon Real-Time Streaming Systems (WebRTC + Live Data) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Accéder aux appareils multimédias de l’utilisateur
- Ajouter et supprimer des pistes multimédias
- Afficher l’audio et la vidéo distants
- Contrôler la qualité et les contraintes des médias