通过WebRTC和Canvas实现实时音视频特效：1. 使用getUserMedia获取摄像头流并显示在video元素；2. 利用Canvas逐帧绘制视频，通过getImageData操作像素实现灰度等滤镜；3. 可叠加图形或贴纸（如结合face-api.js识别人脸添加猫耳朵）；4. 通过canvas.captureStream输出处理后的媒体流用于推流或录制。整个流程在浏览器中完成，无需插件，基础功能依赖Canvas即可实现。
要通过JavaScript实现实时音视频流的处理与特效叠加，核心依赖于WebRTC、getUserMedia 获取摄像头和麦克风数据，再结合 Canvas 或 WebGL 进行图像处理和特效渲染。整个流程可以在浏览器中完成，无需插件。
1. 获取实时音视频流
使用 navigator.mediaDevices.getUserMedia() 可以请求用户授权并获取摄像头和麦克风的媒体流。
示例代码：
async function getVideoStream() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
const video = document.getElementById('video');
video.srcObject = stream;
} catch (err) {
console.error("无法获取媒体流：", err);
}
}
getVideoStream();
这会将摄像头画面显示在 元素上，为后续处理提供源数据。
立即学习“Java免费学习笔记（深入）”；
2. 使用Canvas进行视频帧处理
将视频逐帧绘制到 canvas> 上，然后对像素数据进行操作，实现滤镜或特效。
基本步骤：
- 创建一个隐藏的 canvas，用于离屏绘制
- 通过
requestAnimationFrame持续从 video 中提取当前帧 - 使用
drawImage将视频帧绘制到 canvas 上 - 调用
getImageData获取像素数组（RGBA） - 修改像素值实现灰度、反色、模糊等效果
- 使用
putImageData将处理后的图像重新绘制
示例：实现灰度滤镜
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function processFrame() {
// 绘制当前视频帧
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 获取像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// 转为灰度
for (let i = 0; i < data.length; i += 4) {
const gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = gray; // R
data[i + 1] = gray; // G
data[i + 2] = gray; // B
}
// 写回画布
ctx.putImageData(imageData, 0, 0);
// 循环下一帧
requestAnimationFrame(processFrame);
}
video.addEventListener('play', () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
requestAnimationFrame(processFrame);
});
3. 添加图形或贴纸特效
除了像素处理，还可以在 canvas 上叠加图形、文字或PNG贴纸。
例如，在人脸位置叠加猫耳朵贴图（需配合人脸识别库如 face-api.js）：
// 假设已检测出人脸关键点 landmarks const leftEarX = landmarks.getLeftEye().x - 50; const leftEarY = landmarks.getLeftEye().y - 80;const sticker = new Image(); sticker.src = 'cat_ears.png'; sticker.onload = () => { ctx.drawImage(sticker, leftEarX, leftEarY, 100, 60); };
这类特效常用于美颜相机、虚拟背景等场景。
4. 输出处理后的流（可选）
若需要将处理后的画面作为新的 MediaStream 使用（如推流或录制），可通过 canvas.captureStream(fps) 获取视频流。
const processedStream = canvas.captureStream(30); // 30fps
const processedVideo = document.getElementById('output');
processedVideo.srcObject = processedStream;
该流可用于 RTCPeerConnection 实时通信或 MediaRecorder 录制。
基本上就这些。通过组合 getUserMedia、Canvas 像素操作和 captureStream，就能在前端实现丰富的实时视频特效。性能关键处可用 WebGL 加速（如使用 Three.js 或自定义着色器），但 Canvas 已能满足多数基础需求。
