我正在使用Appcelerator並希望進行一些視頻處理。我遇到了Seriously.js,看到你可能會在「節點」管道中做一些令人印象深刻的圖像和視頻流操作。所以,在採取這項工作的加速器部分之前,我想我會強制相機源示例(請參閱:http://brianchirls.github.io/Seriously.js/examples),而不僅僅是邊緣檢測。所以我很快加了一個像素化效果。代碼看起來像這樣:如何在連續視頻流幀上使用Seriously.js差異混合效果
<!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>
我期待着回覆。