Web视频合成器Seriously.js入门教程

时间 2019-12-04

标签 web 视频合成器 seriously.js seriously 入门教程栏目 HTML 繁體版

原文原文链接

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的值了。