怎么使用Canvas实时处理Video

2019-09-10 郑州网站建设  

HTML5下的videocanvas的功能,你可以实时处理视频数据,为正在播放的视频添加各种各样的视觉效果。本教程演示怎么使用JavaScript代码实现chroma-keying特效

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"">

<html xmlns="">

<head>

<style>

body {

background: black;

color:#CCCCCC;

}

#c2 {

background-image: url(foo.png);

background-repeat: no-repeat;

}

div {

float: left;

border :1px solid #444444;

padding:10px;

margin: 10px;

background:#3B3B3B;

}

</style>

<script type="text/javascript;version=1.8" src=http://www.divcss5.com/html5/"main.js"></script>

</head>

<body onload="processor.doLoad()">

<div>

<video id="video" src=http://www.divcss5.com/html5/"video.ogv" controls="true"/>

</div>

<div>

<canvas id="c1" width="160" height="96"/>

<canvas id="c2" width="160" height="96"/>

</div>

</body>

</html>

 

以上代码关键部分如下:

 

1.创建了两个canvas元素,ID分别为c1c2c1用于显示当前帧的原始视频,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);

},

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1786.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • video
  • CanvasVideo