Controllo della qualità dei media e dei vincoli
Impari a gestire i media WebRTC applicando vincoli a risoluzione e frequenza dei fotogrammi, disattivando le tracce audio/video, cambiando dispositivo e regolando il bitrate di codifica per una qualità adattiva.
Controllo della qualità dei media e dei vincoli è una lezione Real-Time Streaming Systems (WebRTC + Live Data) gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Real-Time Streaming Systems (WebRTC + Live Data), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Real-Time Streaming Systems (WebRTC + Live Data) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Impara Real-Time Streaming Systems (WebRTC + Live Data) con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Controllo della qualità dei media e dei vincoli» è gratuita?
Sì — il testo completo di «Controllo della qualità dei media e dei vincoli» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Real-Time Streaming Systems (WebRTC + Live Data), passa a CoddyKit PRO. Il corso Real-Time Streaming Systems (WebRTC + Live Data) include 4 lezioni in totale.
Cosa imparerò in «Controllo della qualità dei media e dei vincoli»?
Impari a gestire i media WebRTC applicando vincoli a risoluzione e frequenza dei fotogrammi, disattivando le tracce audio/video, cambiando dispositivo e regolando il bitrate di codifica per una quali… Eserciti Real-Time Streaming Systems (WebRTC + Live Data) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Real-Time Streaming Systems (WebRTC + Live Data)?
Non è richiesta alcuna esperienza precedente. Real-Time Streaming Systems (WebRTC + Live Data) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Controllo della qualità dei media e dei vincoli»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Real-Time Streaming Systems (WebRTC + Live Data)?
Sì. Ogni lezione Real-Time Streaming Systems (WebRTC + Live Data) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Accesso ai dispositivi multimediali dell'utente
- Aggiunta e rimozione delle tracce multimediali
- Visualizzazione di audio e video remoti
- Controllo della qualità dei media e dei vincoli