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

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

转载作者：行者123 更新时间：2023-11-28 19:08:42

我正在使用 Appcelerator 并想做一些视频处理。我遇到了 Seriously.js，发现您可以在“节点”管道中进行一些令人印象深刻的图像和视频流操作。因此，在进行这项工作的应用加速器部分之前，我想我应该强制相机源示例(参见: 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>

我期待着回复。

最佳答案

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

但是，有一个“卡住”效果插件可以提供帮助。卡住节点具有“卡住”设置，会导致其停止更新，您可以使用它来处理较旧的帧。您要做的就是设置两个卡住节点，每个节点都从相机获取输入，并在每次渲染帧时交替卡住两个节点中的哪一个。您还可以交替混合节点的输入，以便“底部”输入始终接收旧帧(“卡住”节点)，而顶部接收当前帧(未卡住节点)。

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

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

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

关于javascript - 如何在连续视频流帧上使用 Seriously.js 差异混合效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31146949/