如何对连续的视频流帧使用Seriously.js差异混合效果

Question

我正在使用 Appcelerator 并想进行一些视频处理。我遇到了 Seriously.js，发现您可以在 "node" 管道中进行一些令人印象深刻的图像和视频流操作。因此，在开始这项工作的 appcelerator 部分之前，我想我会强迫相机源示例（参见：http://brianchirls.github.io/Seriously.js/examples）做的不仅仅是边缘检测。所以我很快在上面添加了像素化效果。代码如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Seriously.js Camera Demo</title>
</head>
<body>
<canvas id="target" width="640" height="480"></canvas>

<script src="../../seriously.js"></script>
<script src="../../sources/seriously.camera.js"></script>
<script src="../../effects/seriously.edge.js"></script>
<script src="../../effects/seriously.pixelate.js"></script>
<script>
(function() {
//main code goes here

// declare our variables
var seriously, // the main object that holds the entire composition
source, // wrapper object for source video
edge, // edge detection effect
pixelate, // pixelate effect
target; // a wrapper object for our target canvas

if (Seriously.incompatible('camera')) {
document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
document.querySelector('canvas').style.display = 'none';
return;
}

// construct our seriously object
seriously = new Seriously();

// time to get serious
source = seriously.source('camera');
target = seriously.target('#target');
edge = seriously.effect('edge');
pixelate = seriously.effect('pixelate');

// connect all our nodes in the right order
edge.source = source;
pixelate.source = edge;
target.source = pixelate;

seriously.go();
}());
</script>
</body>
</html>

很酷，效果很好。但我真正想做的是使用混合效果（特别是差异）。这需要两个不同来源（我假设是图像或视频）的顶部和底部，并在相应的帧之间执行指定的混合操作。但我真正想要的是对一个视频流进行操作，并在帧之间执行差异混合效果。我能得到的最接近的，实际上不是很接近的是使用相同的视频流作为顶部源和底部源。当然，它们之间没有区别，所以我真的不明白我在追求什么。所以我猜我需要访问前一帧，但我不知道如何给出我在 API 中看到的操作。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Seriously.js Camera Demo</title>
</head>
<body>
<canvas id="target" width="640" height="480"></canvas>

<script src="../../seriously.js"></script>
<script src="../../sources/seriously.camera.js"></script>
<script src="../../effects/seriously.edge.js"></script>
<script src="../../effects/seriously.blend.js"></script>
<script>
(function() {
//main code goes here

// declare our variables
var seriously, // the main object that holds the entire composition
source, // wrapper object for source video
edge, // edge detection effect
difference, // difference effect
target; // a wrapper object for our target canvas

if (Seriously.incompatible('camera')) {
document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
document.querySelector('canvas').style.display = 'none';
return;
}

// construct our seriously object
seriously = new Seriously();

// time to get serious
source = seriously.source('camera');
target = seriously.target('#target');
edge = seriously.effect('edge');
difference = seriously.effect('blend', { mode: "difference" } );

// connect all our nodes in the right order
edge.source = source;
difference.top = edge;
difference.bottom = edge; // I really want a frame sooner or later from edge
target.source = difference;

seriously.go();
}());
</script>
</body>
</html>

期待回复。

Answer 1

Seriously.js 在及时处理图像帧方面没有做太多，至少在核心代码中没有，因为它是为处理实时视频而设计的，存储帧可能会占用很多空间内存。

但是，有一个 "freeze" 效果插件可以提供帮助。冻结节点有一个 "frozen" 设置，会导致它停止更新，您可以使用它来处理较旧的帧。您要做的是设置两个冻结节点，每个冻结节点都从您的相机获取输入，并在每次渲染帧时交替冻结两个节点中的哪一个。您还需要交替混合节点的输入，以便 "bottom" 输入始终接收旧帧（"frozen" 节点），顶部接收当前帧（未冻结节点）。

最好将混合节点上的底部和顶部输入设置为 "select" 个节点，这将允许您在两个不同的冻结节点之间切换，而无需断开和重新连接节点图上的节点。通过这种方式，您可以避免在更改网络时有时会发生的任何代价高昂的操作。您可以在“.go()”方法的回调中进行交换，该方法在每一帧渲染之前运行。

这是一个 link 的工作示例： https://jsbin.com/hisuha/edit?js

我没有在这里使用边缘滤镜，因为它似乎没有必要，但欢迎您试一试。我会尝试将它放在相机节点之后，并让两个冻结节点都使用您的边缘节点作为输入。还值得注意的是，这与我正在研究的 optical flow effect 不太一样。

如何对连续的视频流帧使用Seriously.js差异混合效果

How to use Seriously.js difference blend effect on successive video stream frames

javascript

video-processing