请看这个实例.

文档内容

本文使用的XHTML文档如下所示。

以上代码关键部分如下:

1.创建了两个canvas元素，ID分别为c1和c2。c1用于显示当前帧的原始视频，c2是用来显示执行chroma-keying特效后的视频；c2预加载了一张静态图片，将用来取代视频中的背景色部分。
2.JavaScript代码从main.js文件导入；这段脚本使用JavaScript 1.8的特性，所以在导入脚本时，第22行中指定了版本。
3.当网页加载时，main.js中的processor.doLoad()方法会运行。

JavaScript代码

main.js中的JS代码包含三个方法。

初始化chroma-key

doLoad()方法在XHTML文档初始加载时调用。这个方法的作用是为chroma-key处理代码准备所需的变量，设置一个事件侦听器，当用户开始播放视频时我们能检测到。

这段代码获取XHTML文档中video元素和两个canvas元素的引用，还获取了两个canvas的图形上下文的引用。这些将在我们实现chroma-keying特效时使用。

addEventListener()监听video元素，当用户按下视频上的播放按钮时被调用。为了应对用户回放，这段代码获取视频的宽度和高度，并且减半（我们将在执行chroma-keying效果时将视频的大小减半），然后调用timerCallback()方法来启动视频捕捉和视觉效果计算。

定时器回调

定时器回调函数在视频开始播放时被调用（当“播放”事件发生时），然后负责自身周期调用，为每一帧视频实现keying特效。

回调函数首先检查视频是否正在播放；如果没有，回调函数不做任何事并立即返回。

然后调用computeFrame()方法，该方法对当前视频帧执行chroma-keying特效。

回调函数做的最后一件事就是调用setTimeout()，来让它自身尽快地被重新调用。在真实环境中，你可能会基于视频的帧率来设置调用频率。

处理视频帧数据

computeFrame()方法，如下所示，实际上负责抓取每一帧的数据和执行chroma-keying特效。

当它被调用后，video元素将显示最近的视频帧数据，如下所示:

在第2行，视频帧被复制到第一个canvas ctx1的图形上下文中，高度和宽度值指定为我们之前保存的帧大小的一半。注意，您可以通过传递video元素到绘图上下文的drawImage()方法来绘制当前视频帧。其结果是：

第3行代码通过调用第一个canvas上下文的getImageData()方法，来获取原始图像数据当前视频帧的一个副本。它提供了原始的32位像素图像数据，这样我们就能够进行操作。第4行代码通过将帧图像数据的总长度除以4，来计算图像的总像素数。

第6行代码循环扫描所有像素，获取每个像素的红、绿、蓝值，同时和预定义的背景色进行比较，这些背景色将用foo.png中导入的背景图像替换。

被检测成背景的每一个像素，将它的alpha值替换为零，表明该像素是完全透明的。结果，最终的图像背景部分是100%透明的，这样在第13行代码，把它被绘制到目标的上下文中时，效果是内容叠加到静态背景上。

由此产生的图像看起来像这样：

在视频播放时反复这样做，这样一帧接一帧处理，呈现出chroma-key的特效。

请看这个实例。