媒体质量与约束控制
学习如何调整 WebRTC 媒体：应用分辨率和帧率约束、静音轨道、切换设备，并调整编码比特率以实现自适应质量。
媒体质量与约束控制 是 CoddyKit 上的免费 Real-Time Streaming Systems (WebRTC + Live Data) 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Real-Time Streaming Systems (WebRTC + Live Data) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Real-Time Streaming Systems (WebRTC + Live Data) 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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.
常见问题解答
「媒体质量与约束控制」课时是免费的吗？
是的 — 「媒体质量与约束控制」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Real-Time Streaming Systems (WebRTC + Live Data) 课程的其余内容，请升级到 CoddyKit PRO。 Real-Time Streaming Systems (WebRTC + Live Data) 课程共包含 4 节课。
「媒体质量与约束控制」这节课中我会学到什么？
学习如何调整 WebRTC 媒体：应用分辨率和帧率约束、静音轨道、切换设备，并调整编码比特率以实现自适应质量。 你通过在浏览器中直接运行的动手代码来练习 Real-Time Streaming Systems (WebRTC + Live Data)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Real-Time Streaming Systems (WebRTC + Live Data) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Real-Time Streaming Systems (WebRTC + Live Data) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「媒体质量与约束控制」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Real-Time Streaming Systems (WebRTC + Live Data) 课中编写并运行代码吗？
能。每节 Real-Time Streaming Systems (WebRTC + Live Data) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。