0Pricing
Real-Time Streaming Systems (WebRTC + Live Data) · Aula

Controle de Qualidade e Restrições de Mídia

Aprenda a ajustar a mídia do WebRTC: aplicar restrições de resolução e taxa de quadros, silenciar faixas, trocar dispositivos e ajustar a taxa de bits de codificação para obter qualidade adaptativa.

Controle de Qualidade e Restrições de Mídia é uma aula grátis de Real-Time Streaming Systems (WebRTC + Live Data) no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Real-Time Streaming Systems (WebRTC + Live Data), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Real-Time Streaming Systems (WebRTC + Live Data) inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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 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.

Perguntas Frequentes

A aula “Controle de Qualidade e Restrições de Mídia” é grátis?

Sim — o texto completo de “Controle de Qualidade e Restrições de Mídia” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Real-Time Streaming Systems (WebRTC + Live Data), atualize para CoddyKit PRO. O curso de Real-Time Streaming Systems (WebRTC + Live Data) inclui 4 aulas no total.

O que vou aprender em “Controle de Qualidade e Restrições de Mídia”?

Aprenda a ajustar a mídia do WebRTC: aplicar restrições de resolução e taxa de quadros, silenciar faixas, trocar dispositivos e ajustar a taxa de bits de codificação para obter qualidade adaptativa. Você pratica Real-Time Streaming Systems (WebRTC + Live Data) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Real-Time Streaming Systems (WebRTC + Live Data)?

Nenhuma experiência prévia é necessária. Real-Time Streaming Systems (WebRTC + Live Data) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Controle de Qualidade e Restrições de Mídia”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Real-Time Streaming Systems (WebRTC + Live Data)?

Sim. Cada aula de Real-Time Streaming Systems (WebRTC + Live Data) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Acesso aos dispositivos de mídia do usuário
  2. Adição e remoção de faixas de mídia
  3. Exibição de áudio e vídeo remotos
  4. Controle de Qualidade e Restrições de Mídia
← Voltar para Real-Time Streaming Systems (WebRTC + Live Data)