14、视频处理基础：Canvas 2D处理视频帧、drawImage()绘制视频帧、获取帧数据

说实话，做WebRTC开发这么多年，我越来越觉得Canvas是个被低估的宝藏。很多人一提到视频处理就想到WebGL、想到滤镜库，但其实Canvas 2D能做的事情远比想象中多。今天我们就来聊聊怎么用Canvas处理视频帧——这是后续所有视频特效、截图、人脸检测的基础。

为什么是Canvas？

你可能要问：视频帧数据不是可以直接从MediaStream里拿吗？为什么还要绕一圈Canvas？

嗯，这里有个关键点：MediaStream本身不提供逐帧访问的API。你拿到的是一股持续的视频流，而不是一张张独立的图片。Canvas在这里扮演的角色，就像一个"帧截取器"——它能把视频流的某一瞬间"拍"下来，变成我们可以随意操作的像素数据。

我在项目中遇到过这样一个场景：需要给视频通话添加实时美颜效果。如果直接在MediaStream上做处理，那几乎是不可能的任务。但有了Canvas，一切都变得简单了——把视频帧画到Canvas上，然后逐像素处理，再输出到新的视频轨道。

drawImage()：把视频帧"印"到Canvas上

这是整个流程的第一步，也是最关键的一步。drawImage()这个API，说白了就是把一个图像源绘制到Canvas上。但很多人不知道的是，它的第一个参数不仅可以接受Image对象，还可以接受Video元素、另一个Canvas，甚至是ImageBitmap。

来看一个最基础的例子：

// 假设我们有一个video元素，正在播放摄像头画面
const video = document.getElementById('localVideo');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置Canvas尺寸与视频一致
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

// 绘制当前视频帧
ctx.drawImage(video, 0, 0);

// 现在canvas上就有了当前帧的画面

就这么简单？对，就这么简单。但我要提醒你一个坑：drawImage()执行的时候，视频可能还没加载好。我刚开始做的时候，经常遇到画出来是黑屏的情况。后来养成了习惯，先检查video.readyState是否大于等于2（表示当前帧可用）。

drawImage()的进阶用法

你以为drawImage()只能把整张图原样画上去？那你就太小看它了。它其实支持9个参数，可以实现裁剪、缩放等操作：

// 语法：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// 从视频的(100, 50)位置裁剪200x150的区域
// 然后绘制到Canvas的(0, 0)位置，缩放为400x300
ctx.drawImage(video, 100, 50, 200, 150, 0, 0, 400, 300);

这个功能在实际项目中非常实用。比如你想实现"画中画"效果，或者只想处理人脸区域，都可以通过调整这些参数来实现。

我曾经做过一个项目，需要把视频的竖屏画面裁剪成正方形，同时保持人脸居中。用drawImage()的裁剪参数，配合人脸检测的坐标，几行代码就搞定了。如果不用这个API，你可能得先截取整帧，再用另一个Canvas去裁剪，多了一步操作，性能就下来了。

获取帧数据：getImageData()与像素级操作

画到Canvas上只是第一步。真正有意思的是，我们可以通过getImageData()拿到每个像素的RGBA值，然后随心所欲地修改它们。

// 获取Canvas上的像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // Uint8ClampedArray，长度为 width * height * 4

// 遍历每个像素
for (let i = 0; i < data.length; i += 4) {
    const r = data[i];     // 红色通道
    const g = data[i + 1]; // 绿色通道
    const b = data[i + 2]; // 蓝色通道
    const a = data[i + 3]; // 透明度通道

    // 举个简单的例子：把画面变成灰度
    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
    data[i] = gray;
    data[i + 1] = gray;
    data[i + 2] = gray;
}

// 把修改后的数据放回Canvas
ctx.putImageData(imageData, 0, 0);

你看，就这么几行代码，我们就实现了一个灰度滤镜。你想想看，如果把这个逻辑放在requestAnimationFrame循环里，每一帧都做一次处理，那不就是实时滤镜了吗？

完整的帧处理流程

把上面这些知识点串起来，一个典型的视频帧处理流程是这样的：

function processVideoFrame(video, canvas) {
    const ctx = canvas.getContext('2d');

    // 1. 确保视频尺寸与Canvas一致
    if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
    }

    // 2. 绘制当前帧
    ctx.drawImage(video, 0, 0);

    // 3. 获取像素数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // 4. 处理像素（这里可以插入你的滤镜逻辑）
    applyFilter(imageData);

    // 5. 写回Canvas
    ctx.putImageData(imageData, 0, 0);

    // 6. 如果需要，可以把Canvas转换成视频轨道
    // canvas.captureStream(30) 可以生成新的MediaStream
}

// 在动画循环中调用
function frameLoop() {
    processVideoFrame(video, canvas);
    requestAnimationFrame(frameLoop);
}

这个流程看起来简单，但它是所有视频处理的基础。不管是人脸识别、背景替换、还是各种特效滤镜，本质上都是在这个流程上做文章。

从Canvas到视频轨道

处理完帧之后，你可能想把处理后的画面发送给远端。这时候canvas.captureStream()就派上用场了：

// 把Canvas转换成MediaStream
const processedStream = canvas.captureStream(30); // 30fps

// 替换本地视频轨道
const [videoTrack] = processedStream.getVideoTracks();
// 然后就可以通过RTCPeerConnection发送这个track了

我记得第一次用这个API的时候，心里还有点打鼓——真的能实时处理30fps的视频吗？实测下来，对于720p的视频，做一些简单的像素操作（比如颜色调整、模糊），完全没问题。但如果是4K或者复杂的AI模型，那就得考虑用WebGL或者WebAssembly来加速了。

知识体系总览

下面这张图总结了本章的核心逻辑，你可以把它当作一个快速参考：

实际项目中的注意事项

最后，分享几个我在实际项目中踩过的坑：

• Canvas尺寸与视频尺寸不匹配：如果Canvas比视频小，drawImage()会自动缩放，但会丢失细节。如果Canvas比视频大，则只绘制左上角区域。建议始终保持一致。
• 跨域问题：如果视频源来自跨域地址（比如CDN上的视频文件），直接调用getImageData()会抛出安全错误。需要在video标签上设置crossOrigin="anonymous"，并且服务端返回正确的CORS头。
• 内存泄漏：每次调用getImageData()都会分配新的Uint8ClampedArray。如果处理循环不加以控制，内存会持续增长。我习惯在循环外部先创建好ImageData对象，然后复用。
• 帧率控制：不是每一帧都需要处理。对于简单的滤镜，30fps没问题。但对于复杂的计算，可以降低到15fps甚至10fps，人眼几乎察觉不到差异。

好了，关于Canvas 2D处理视频帧的基础知识就聊到这里。这些内容看起来简单，但它们是所有视频处理技术的基石。下一节我们会在这个基础上，做一些更有趣的事情。

---