Seriously.js差分混合效应在连续视频流帧中的应用
我正在使用Appcelerator，想做一些视频处理。我偶然发现Seriously.js可以在“节点”管道中进行一些令人印象深刻的图像和视频流操作。因此，在进行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>我期待着得到答复。
回答 1
Stack Overflow用户
发布于 2015-06-30 20:29:43
Seriously.js在及时处理图像帧方面做得不多，至少在核心代码中是如此，因为它是为处理实时视频而设计的，存储帧可能会占用大量内存。
然而，有一个“冻结”效应插件，可能会有所帮助。冻结节点具有“冻结”设置，使其停止更新，您可以使用它处理旧帧。您要做的是设置两个冻结节点，每个节点从相机获取输入，并在每次呈现帧时交替冻结两个节点中的哪个节点。您还可以替换混合节点的输入，这样“底部”输入总是接收旧框架(“冻结”节点)，顶部接收当前帧(未冻结节点)。
最好将混合节点上的底部和顶部输入设置为“选择”节点，这将允许您在两个不同的冻结节点之间进行交换，而无需在节点图上断开和重新连接节点。这样，您就可以避免在更改网络周围时发生的任何代价高昂的操作。您可以在".go()“方法的回调中执行交换，该方法在每个框架呈现之前运行。
下面是指向一个工作示例的链接：https://jsbin.com/hisuha/edit?js
我没有在这里使用边缘过滤器，因为它似乎没有必要，尽管欢迎您尝试。我试着把它放在摄像头节点之后，让两个冻结节点使用你的边缘节点作为输入。还值得注意的是，这与我正在研究的光流效应并不完全相同。
https://stackoverflow.com/questions/31146949
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号