WebRTC通过API实现浏览器端音视频采集、处理与传输。首先调用getUserMedia获取媒体流并预览，接着用Canvas或Web Audio处理音视频轨道，再通过RTCPeerConnection建立P2P连接发送流，最后可用MediaRecorder录制保存。全流程需管理好流生命周期、信令交互及错误处理。
WebRTC 是一套强大的浏览器端实时通信技术，能直接在网页中实现音视频采集、编码、传输和播放，无需插件或第三方软件。要实现浏览器端的音视频处理，核心是利用 WebRTC 提供的 API 进行媒体流控制和数据交互。
获取音视频流（getUserMedia）
第一步是从用户的摄像头和麦克风获取音视频流。通过 navigator.mediaDevices.getUserMedia() 可请求访问设备：
- 调用时传入包含 video 和 audio 的约束对象，指定分辨率、帧率等参数
- 返回一个 Promise，成功后得到 MediaStream 对象
- 将该流绑定到页面的 元素即可预览
示例代码：
navigator.mediaDevices.getUserMedia({
video: { width: 1280, height: 720 },
audio: true
})
.then(stream => {
document.getElementById('localVideo').srcObject = stream;
});
音视频流处理（MediaStreamTrack 和 MediaStreamProcessor）
拿到流之后，可以对音视频轨道进行进一步处理：
- 使用 MediaStream.getTracks() 分离音频和视频轨道
- 结合 Canvas 实现视频滤镜：将视频绘制到 canvas 上，应用图像处理后再输出新流
- 使用 Web Audio API 处理音频，比如降噪、增益、变声等，再通过 MediaStreamAudioSourceNode 输出为新的音频流
例如，把视频加灰度滤镜：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.getElementById('localVideo');
function processFrame() {
ctx.filter = 'grayscale(100%)';
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 可通过 captureStream() 获取处理后的流
}
setInterval(processFrame, 1000 / 30);
建立点对点连接（RTCPeerConnection）
若需将处理后的音视频发送到另一个浏览器，需使用 RTCPeerConnection 建立 P2P 连接：
- 创建 RTCPeerConnection 实例，并添加本地流
- 通过信令服务器交换 SDP 描述（offer/answer）和 ICE 候选者
- 连接建立后，远端流会触发 ontrack 事件，可绑定到播放元素
关键步骤：
const pc = new RTCPeerConnection();
pc.addStream(processedStream); // 添加处理后的流
pc.onicecandidate = event => {
if (event.candidate) sendToSignalingServer(event.candidate);
};
pc.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
录制与回放（MediaRecorder）
如果想在本地保存音视频，可用 MediaRecorder 接口：
- 传入 MediaStream 创建 Recorder 实例
- 监听 dataavailable 事件获取录制的二进制数据
- 可将数据组装成 Blob 并下载或上传
示例：
const recorder = new MediaRecorder(processedStream);
let chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'record.webm';
a.click();
};
recorder.start();
基本上就这些。WebRTC 在现代浏览器中支持良好，配合其他 Web API 能实现丰富的音视频处理功能，比如虚拟背景、美颜、混音、直播推流等。关键是理解流的生命周期和各组件之间的协作方式。不复杂但容易忽略细节，比如权限处理、设备切换和错误捕获。
