Rumah >hujung hadapan web >Tutorial H5 >HTML5:使用Canvas实时处理Video
文档内容
本文使用的XHTML文档如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body { background: black; color:#CCCCCC; } #c2 { background-image: url(foo.png); background-repeat: no-repeat; } p { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3B3B3B; } </style> <script type="text/javascript;version=1.8" src="main.js"></script> </head> <body onload="processor.doLoad()"> <p> <video id="video" src="video.ogv" controls="true"/> </p> <p> <canvas id="c1" width="160" height="96"/> <canvas id="c2" width="160" height="96"/> </p> </body> </html>
以上代码关键部分如下:
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处理代码准备所需的变量,设置一个事件侦听器,当用户开始播放视频时我们能检测到。
doLoad: function() { this.video = document.getElementById("video"); this.c1 = document.getElementById("c1"); this.ctx1 = this.c1.getContext("2d"); this.c2 = document.getElementById("c2"); this.ctx2 = this.c2.getContext("2d"); let self = this; this.video.addEventListener("play", function() { self.width = self.video.videoWidth / 2; self.height = self.video.videoHeight / 2; self.timerCallback(); }, false); },
这段代码获取XHTML文档中video元素和两个canvas元素的引用,还获取了两个canvas的图形上下文的引用。这些将在我们实现chroma-keying特效时使用。
addEventListener()监听video元素,当用户按下视频上的播放按钮时被调用。为了应对用户回放,这段代码获取视频的宽度和高度,并且减半(我们将在执行chroma-keying效果时将视频的大小减半),然后调用timerCallback()方法来启动视频捕捉和视觉效果计算。
定时器回调
定时器回调函数在视频开始播放时被调用(当“播放”事件发生时),然后负责自身周期调用,为每一帧视频实现keying特效。
timerCallback: function() { if (this.video.paused || this.video.ended) { return; } this.computeFrame(); let self = this; setTimeout(function () { self.timerCallback(); }, 0); },
回调函数首先检查视频是否正在播放;如果没有,回调函数不做任何事并立即返回。
然后调用computeFrame()方法,该方法对当前视频帧执行chroma-keying特效。
回调函数做的最后一件事就是调用setTimeout(),来让它自身尽快地被重新调用。在真实环境中,你可能会基于视频的帧率来设置调用频率。
处理视频帧数据
computeFrame()方法,如下所示,实际上负责抓取每一帧的数据和执行chroma-keying特效。
computeFrame: function() { this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0); return; }
当它被调用后,video元素将显示最近的视频帧数据,如下所示:
在第2行,视频帧被复制到第一个canvas ctx1的图形上下文中,高度和宽度值指定为我们之前保存的帧大小的一半。注意,您可以通过传递video元素到绘图上下文的drawImage()方法来绘制当前视频帧。其结果是:
第3行代码通过调用第一个canvas上下文的getImageData()方法,来获取原始图像数据当前视频帧的一个副本。它提供了原始的32位像素图像数据,这样我们就能够进行操作。第4行代码通过将帧图像数据的总长度除以4,来计算图像的总像素数。
第6行代码循环扫描所有像素,获取每个像素的红、绿、蓝值,同时和预定义的背景色进行比较,这些背景色将用foo.png中导入的背景图像替换。
被检测成背景的每一个像素,将它的alpha值替换为零,表明该像素是完全透明的。结果,最终的图像背景部分是100%透明的,这样在第13行代码,把它被绘制到目标的上下文中时,效果是内容叠加到静态背景上。
由此产生的图像看起来像这样:
在视频播放时反复这样做,这样一帧接一帧处理,呈现出chroma-key的特效。
更多HTML5:使用Canvas实时处理Video相关文章请关注PHP中文网!