实时音视频处理与特效叠加技巧

本文深入讲解了如何利用WebRTC与HTML5 Canvas在浏览器中零插件实现JavaScript实时音视频处理与特效叠加，涵盖从调用getUserMedia获取摄像头流、逐帧绘制并用getImageData进行像素级滤镜（如灰度、反色）处理，到结合face-api.js识别人脸动态叠加猫耳朵等趣味贴纸，最后通过canvas.captureStream导出可推流或录制的处理后媒体流的完整技术链路——既适合构建美颜相机、虚拟背景等互动应用，又为前端音视频开发提供了轻量、高效且高度可控的实践方案。

要通过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();

这会将摄像头画面显示在 元素上，为后续处理提供源数据。

2. 使用Canvas进行视频帧处理

将视频逐帧绘制到 上，然后对像素数据进行操作，实现滤镜或特效。

基本步骤：

• 创建一个隐藏的 canvas，用于离屏绘制
• 通过 requestAnimationFrame 持续从 video 中提取当前帧
• 使用 drawImage 将视频帧绘制到 canvas 上
• 调用 getImageData 获取像素数组（RGBA）
• 修改像素值实现灰度、反色、模糊等效果
• 使用 putImageData 将处理后的图像重新绘制

示例：实现灰度滤镜

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
<p>function processFrame() {
// 绘制当前视频帧
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);</p><p>// 获取像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;</p><p>// 转为灰度
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
}</p><p>// 写回画布
ctx.putImageData(imageData, 0, 0);</p><p>// 循环下一帧
requestAnimationFrame(processFrame);
}</p><p>video.addEventListener('play', () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
requestAnimationFrame(processFrame);
});
</p>

3. 添加图形或贴纸特效

除了像素处理，还可以在 canvas 上叠加图形、文字或PNG贴纸。

例如，在人脸位置叠加猫耳朵贴图（需配合人脸识别库如 face-api.js）：

// 假设已检测出人脸关键点 landmarks
const leftEarX = landmarks.getLeftEye().x - 50;
const leftEarY = landmarks.getLeftEye().y - 80;
<p>const sticker = new Image();
sticker.src = 'cat_ears.png';
sticker.onload = () => {
ctx.drawImage(sticker, leftEarX, leftEarY, 100, 60);
};
</p>

这类特效常用于美颜相机、虚拟背景等场景。

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 已能满足多数基础需求。

今天关于《实时音视频处理与特效叠加技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！