Question

我正在使用Appcelerator并希望进行一些视频处理。我遇到了Seriously.js，发现你可能会在节点中做一些令人印象深刻的图像和视频流操作＆＃34;管道。因此，在接受这项工作的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

严重的是，js在处理图像帧方面做的并不多，至少在核心代码中没有，因为它是为处理实时视频而设计的，并且存储帧可能会占用很多记忆。

然而，有一个＆＃34;冻结＆＃34;效果插件，可以帮助。冻结节点有一个＆＃34;冻结＆＃34;导致它停止更新的设置，您可以使用它来处理旧框架。您要做的是设置两个冻结节点，每个节点从摄像机获取输入，并在每次渲染帧时交替清除两个节点中的哪一个。您还可以替换混合节点的输入，以便＆＃34;底部＆＃34;输入始终接收旧帧（＆＃34;冻结＆＃34;节点），顶部接收当前帧（未冻结节点）。

最好将混合节点上的底部和顶部输入设置为＆＃34;选择＆＃34;节点，它允许您在两个不同的冻结节点之间交换，而无需断开和重新连接节点图上的节点。这样，您可以避免在更改网络时有时会发生的任何代价高昂的操作。并且你可以在回调到＆＃34; .go（）＆＃34;方法，在每个渲染帧之前运行。

这是指向工作示例的链接： https://jsbin.com/hisuha/edit?js

我没有在这里使用边缘过滤器，因为它似乎没有必要，尽管欢迎您试一试。我尝试将其放在摄像机节点之后，让两个冻结节点都使用边缘节点作为输入。同样值得注意的是，这与我正在研究的optical flow effect并不完全相同。

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

1 个答案: