音视频采集通过getUserMedia获取流并绑定到video元素，WebRTC使用RTCPeerConnection建立点对点连接，经信令服务器交换SDP与ICE候选，结合Canvas可处理视频帧如转灰度，实战需注意信令设计、错误处理、兼容性及性能优化。
处理音视频和使用WebRTC进行实时通信是现代前端开发中越来越重要的技能。JavaScript凭借浏览器强大的API支持，能够直接在网页中实现音视频采集、处理、传输与播放，尤其在远程会议、在线教育、直播互动等场景中发挥关键作用。
音视频采集：获取用户媒体流
通过 getUserMedia() 可以请求访问用户的摄像头和麦克风，获取音视频流：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
const videoElement = document.getElementById('localVideo');
videoElement.srcObject = stream;
})
.catch(err => console.error('无法获取媒体设备:', err));
这个方法返回一个 Promise，成功后得到 MediaStream 对象，可直接赋给 video 元素播放。注意页面必须运行在 HTTPS 或 localhost 环境下才能调用此 API。
WebRTC 连接建立：PeerConnection 实现点对点通信
WebRTC 的核心是 RTCPeerConnection，用于在两个浏览器之间建立连接并传输音视频数据。
立即学习“Java免费学习笔记（深入）”；
基本流程包括：
- 创建 RTCPeerConnection 实例
- 添加本地流
- 生成并交换 SDP 会话描述（offer/answer）
- 收集并交换 ICE 候选地址
const pc = new RTCPeerConnection();
pc.addStream(localStream); // 添加本地流
// 创建 offer
pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.then(() => {
// 发送 offer 给对方（通过信令服务器）
});
// 监听 ICE 候选
pc.onicecandidate = event => {
if (event.candidate) {
// 将 candidate 发送给对方
}
};
需要一个信令服务器（如 WebSocket）来传递 offer、answer 和 ICE 候选，但实际媒体流是点对点传输的，不经过服务器。
音视频数据处理：Canvas 与 MediaStreamTrack
可以结合 Canvas 对视频帧进行实时处理，比如添加滤镜、叠加图形或提取图像数据。
示例：将视频画面转为灰度并重新输出为流
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream(30); // 每秒30帧
function processVideo(videoElement) {
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
ctx.drawImage(videoElement, 0, 0);
const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 转为灰度
for (let i = 0; i < frame.data.length; i += 4) {
const gray = (frame.data[i] + frame.data[i+1] + frame.data[i+2]) / 3;
frame.data[i] = gray; // R
frame.data[i+1] = gray; // G
frame.data[i+2] = gray; // B
}
ctx.putImageData(frame, 0, 0);
}
// 循环处理
setInterval(() => processVideo(document.getElementById('localVideo')), 1000/30);
之后可以把 stream 作为新的视频源发送给远端，实现视觉特效传输。
实战建议与常见问题
在真实项目中需要注意以下几点：
- 信令协议设计：使用 WebSocket 构建可靠的信令通道，定义好消息类型（如 'offer', 'answer', 'candidate'）
- 错误处理：监听 onicecandidateerror、onconnectionstatechange 等事件及时反馈连接状态
- 兼容性：不同浏览器对编码格式和 API 支持略有差异，建议测试主流环境
- 性能优化：避免频繁操作 Canvas；合理设置帧率和分辨率
- 权限提示：引导用户授权摄像头和麦克风，提供失败回退方案
可借助 simple-peer 等封装库简化 WebRTC 使用，快速集成到应用中。
基本上就这些。掌握这些基础后，你可以构建一对一通话、多人会议甚至结合 AI 实现语音识别、人脸检测等功能。关键是理解媒体流的生命周期和连接协商机制，其余就是工程化实现了。
