文档内容
本文使用的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中文网！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » HTML5:使用Canvas实时处理Video
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
