HTML5:使用Canvas实时处理Video

Posted 2021-04-29 前端大全

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5:使用Canvas实时处理Video相关的知识，希望对你有一定的参考价值。

结合html5下的video和canvas的功能，你可以实时处理视频数据，为正在播放的视频添加各种各样的视觉效果。本教程演示如何使用javascript代码实现chroma-keying特效（也被称为“绿色屏幕效应”）。

请看这个实例：https://developer.mozilla.org/samples/video/chroma-key/index.xhtml

文档内容

本文使用的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;

}

div {

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()">

<div>

<video id="video" src="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分别为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;

}