Web視頻合成器Seriously.js入門教程

Web視頻合成器Seriously.js入門教程

做者:雲荒杯傾css

Seriously.js是一個實時的,基於節點(node)的(注意:不是基於nodejs)web視頻合成器。受after affects和nuke等專業軟件的啓發,Seriously.js能渲染高質量的可交互的視頻動態效果。html


下載Seriously.js庫

git clone https://github.com/brianchirl...node

加載Seriously.js腳本

和其餘js庫同樣,使用Seriously.js的第一步是在HTML頁面中加載Seriously.js的腳本庫。Seriously.js核心腳本(就是Seriously.js)和Seriously的各個動效腳本(放在effects目錄下)是分開的,你能夠按需加載核心腳本和動效腳本。git

代碼加載以下:github

<!DOCTYPE html>
    <html>
    <head><title>Seriously.js Tutorial</title></head>
    <body>
        <!-- page content goes here -->
        <script src="seriously.js"></script>
        <script src="effects/seriously.vignette.js"></script>
        <script src="effects/seriously.hue-saturation.js"></script>
        <script src="effects/seriously.split.js"></script>
        <script>
        //main code goes here
        </script>
    </body>
    </html>

數據源media和目標canvas

Seriously.js能夠處理的數據源有video和image,本例中,使用img元素。在HTML中寫下:web

<img src="images/colorbars.png" id="colorbars"/>

Seriously.js通常將數據源的處理結果放在canvas上展現,因此,再在HTML上畫一個canvas:canvas

<canvas id="canvas" width="640" height="480"></canvas>

一般咱們會將數據源隱藏起來,無論是用css的display: none,仍是用JavaScript建立一個不掛載任何dom元素的對象。不過本例爲了你觀察效果,就不隱藏那個img了。網絡

使用Seriously.js將數據源img和目標canvas聯繫起來

如今就可使用Seriously.js寫腳本,以建立和渲染咱們的合成器了。最簡單的合成器就是直接將img和canvas連起來,不使用任何動效。dom

// 聲明變量
    var seriously, // 主對象
        colorbars, // img數據源對象
        target; // 目標canvas對象
    
    seriously = new Seriously();
    
    // 建立數據源對象
    colorbars = seriously.source('#colorbars');
    
    // 建立目標canvas對象
    target = seriously.target('#canvas');

下面代碼能夠將img和canvas聯繫起來:ide

// 鏈接任何節點(node)做爲canvas的數據源. 咱們只有一個,就是img.
    target.source = colorbars;
    seriously.go();

當咱們建立了數據源對象(本例是img),目標輸出對象(本例是canvas),而且創建好了數據源和目標之間的聯繫網絡以後,seriously.js並不會就幫咱們渲染。咱們須要執行seriously.go()方法,纔開始渲染。

如今你會看到那個圖片的兩個副本,一個是在img顯示的,一個是在canvas顯示的。

這樣就完成了最簡單合成器。其實就是複製一份圖像到canvas。

應用你的第一個特效

若是隻實現上面那個,就太無聊了。因此咱們要繼續下一步,實現一個vignette特效。在最前面加載Seriously.js腳本那一節,咱們已經把vignette特效的腳本加載進去了(就是下面那一行代碼),如今要作的就是建立一個特效節點(node),而且把這個節點插入到合成器的特定位置。

<script src="effects/seriously.vignette.js"></script>

建立一個特效節點和建立數據源節點以及目標節點相似,不過彷佛更簡單,只要在參數裏面傳特效的名字就行了。

var vignette = seriously.effect('vignette');

OK,如今,全部節點又一次都建立好了。咱們要把這些節點按順序連起來。一個Seriously合成器就是一個數據源節點、目標節點、特效節點的網絡。這三種都是節點,images從一個特效節點傳到另外一個特效節點,在新的特效節點進行對應的圖像修改,繼續傳到下一個特效節點,直到遇到target節點,也就是目標,通常是canvas,就把最終結果顯示出來。特效節點能夠有一個或者多個圖像數據源,輸出一個單幅圖片。

在本例,咱們傳一副圖像從源節點到 vignette 節點,在 vignette 節點作了特效修改後,再傳到target目標節點。因此完整的腳本以下:

// 聲明變量
    var seriously, // 主對象
        colorbars, // 數據源圖像節點
        vignette, // 特效節點
        target; // 目標節點
    
    seriously = new Seriously();
    colorbars = seriously.source('#colorbars');
    target = seriously.target('#canvas');
    vignette = seriously.effect('vignette');
    
    // 按正確順序鏈接全部節點
    vignette.source = colorbars;
    target.source = vignette;
    //渲染結果
    seriously.go();

從新加載頁面,就能夠看到vignette特效了,圖像邊界變深色。

一個小技巧

或者說是另外一種腳本寫法。
上面代碼中:

// 按正確順序鏈接全部節點
    vignette.source = colorbars;

這一行其實能夠簡寫爲:

vignette.source = '#colorbars';

由於seriously知道vignette.source後面必定要跟一個圖像htmlElement或者一個圖像節點(colorbars = seriously.source('#colorbars');),因此,若是你直接跳過colorbars = seriously.source('#colorbars')這一行,給它賦值一個HTMLElement,也是能夠的。

這算是seriously爲開發者提供的一種方便吧。

調整特效參數

大多數特效儘管有默認顯示的效果,可是對這些效果進行微調也是常常遇到的。在seriously中,每一種特效都有一些參數能夠調整,咱們如今用的這種vignette 特效,只有一個amount屬性,默認值是1。

咱們能夠簡單的按下面代碼設置一下這個參數。下面兩行你選哪行都行:

vignette.amount = 10;
    //or...
    vignette.amount = 0.1;

seriously的特效參數的值通常是有特定範圍,好比這個amount,就有最小值:0。若是你給他設了一個負值,其實他會默認從新設爲0。

vignette.amount = -42;
    console.log(vignette.amount); // 結果爲0

另外,若是你給參數值設置了錯誤的類型,它會從新設置成默認值。好比下面:

vignette.amount = 'aaaaaaaaaaaaaa';
    console.log(vignette.amount); // 結果爲1,上面說了amount的默認值是1。

變得可交互

如何讓這個參數變得可交互呢?HTML5給input提供了type=「range」。咱們能夠用它讓amount參數的值在HTML頁面隨便調整。
html部分:

<input type="range" id="vignette-range" min="0" max="20" step="0.0001" value="1"/>

腳本部分:

vignette.amount = '#vignette-range';

或者這樣寫:

vignette.amount = document.getElementById('vignette-range');

如今你就能夠在range條的範圍內,任何調整amount的值了。

相關文章
相關標籤/搜索