我们的目标是在通话过程中实时更改视频码率，主要涉及对 RTCRtpEncodingParameters.maxBitrate 的修改。

首先在 Web 页面增加输入框，用来设置新的码率，如下面的代码清单所示。

<div>
设置视频码率(kbps):
<input id="bitrate" type="number" maxlength="12" required>
<input type="button" id="updateBitrate" value="更新" onclick="updateBitrate()" disabled>
</div>  

  “更新”按钮的初始状态是禁用，在用户尝试建立通话的invite流程中会启用此按钮。 点击该按钮，将会触发调用updateBitrate()函数，其实现如下面的代码清单所示。

function updateBitrate() {
	if(!pc || !isConnected) return;
	let bitrate = document.getElementById('bitrate').value;
	log("* Set MaxBitrate to : " + bitrate + "kbps");
	bitrate = bitrate * 1024;
	
	pc.getSenders().forEach(sender => {
		if(sender.track.kind === 'audio') return;
		
		let param = sender.getParameters();
		param.encodings[0].maxBitrate = bitrate;
		sender.setParameters(param);
		.then(() => {
			param = sender.getParameters();
			log(" * Video Sender Encodings * ");
			const senderParamsEncoding = param.encodings.map(encoding => JSON.stringify(encoding)).join("\n");
			log(senderParamsEncoding);
		})
		.catch(error => {
			error("Set MaxBitrate error! " + error.name);
		});
	});
}  

  如果 WebRTC 还没有建立连接，将会直接返回 updateBitrate() 函数。我们在代码中过滤掉了音频 RTP发送器，只针对视频RTP发送器设置码率，由于maxBitrate能够接受的码率单位是bps，而用户输入的单位是kbps，所以要做一个单位转换。setParameters()函数用于设置新的码率，如果设置成功，打印出新的编码参数，如果设置过程出错则打印失败信息。