2015-06-30 30 views
0

我正在使用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> 

我期待着回覆。

回答

3

嚴重.js在處理圖像幀的時候並沒有做太多的工作,至少不是在覈心代碼中,因爲它被設計用於處理實時視頻,並且存儲幀可能佔用大量內存。

但是,有一個「凍結」效果插件可以幫助。凍結節點具有「凍結」設置,導致其停止更新,並且可以使用它來處理較舊的幀。你要做的是設置兩個凍結節點,每個節點從你的攝像機獲取輸入,並在每次渲染幀時交替凍結兩個節點中的哪一個。您還會交替混合節點的輸入,以便「底部」輸入始終接收舊幀(「凍結」節點),頂部接收當前幀(解凍節點)。

最好將混合節點上的底部和頂部輸入設置爲「選擇」節點,這將允許您在兩個不同的凍結節點之間進行交換,而無需斷開和重新連接節點圖上的節點。這樣可以避免在更改網絡時有時發生的任何代價高昂的操作。你可以在回調函數中使用「.go()」方法進行交換,該方法在每個幀渲染之前運行。

下面是一個工作示例的鏈接: https://jsbin.com/hisuha/edit?js

,因爲它似乎沒有必要,但歡迎您給它一個鏡頭我沒有使用邊緣濾波器在這裏。我試着把它放在相機節點的後面,並讓兩個凍結節點都使用你的邊緣節點作爲輸入。值得注意的是,這與我正在研究的optical flow effect並不完全相同。