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

andycall 发布于2019-08-05 12:08 / 582人阅读

摘要：视频合成器入门教程作者云荒杯倾是一个实时的，基于节点的注意不是基于视频合成器。最简单的合成器就是直接将和连起来，不使用任何动效。这样就完成了最简单合成器。一个合成器就是一个数据源节点目标节点特效节点的网络。

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

作者：云荒杯倾

Seriously.js是一个实时的，基于节点（node）的（注意：不是基于nodejs）web视频合成器。受after affects和nuke等专业软件的启发，Seriously.js能渲染高质量的可交互的视频动态效果。

下载Seriously.js库

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

加载Seriously.js脚本

和其他js库一样，使用Seriously.js的第一步是在HTML页面中加载Seriously.js的脚本库。Seriously.js核心脚本（就是Seriously.js）和Seriously的各个动效脚本（放在effects目录下）是分开的，你可以按需加载核心脚本和动效脚本。

代码加载如下：

    
    
    Seriously.js Tutorial

数据源media和目标canvas

Seriously.js可以处理的数据源有video和image，本例中，使用img元素。在HTML中写下：

Seriously.js一般将数据源的处理结果放在canvas上展示，所以，再在HTML上画一个canvas：

通常我们会将数据源隐藏起来，不管是用css的display: none，还是用JavaScript创建一个不挂载任何dom元素的对象。不过本例为了你观察效果，就不隐藏那个img了。

使用Seriously.js将数据源img和目标canvas联系起来

现在就可以使用Seriously.js写脚本，以创建和渲染我们的合成器了。最简单的合成器就是直接将img和canvas连起来，不使用任何动效。

    // 声明变量
    var seriously, // 主对象
        colorbars, // img数据源对象
        target; // 目标canvas对象
    
    seriously = new Seriously();
    
    // 创建数据源对象
    colorbars = seriously.source("#colorbars");
    
    // 创建目标canvas对象
    target = seriously.target("#canvas");

下面代码可以将img和canvas联系起来：

    // 连接任何节点（node）作为canvas的数据源. 我们只有一个，就是img.
    target.source = colorbars;
    seriously.go();

当我们创建了数据源对象（本例是img），目标输出对象（本例是canvas），并且建立好了数据源和目标之间的联系网络之后，seriously.js并不会就帮我们渲染。我们需要执行seriously.go()方法，才开始渲染。

现在你会看到那个图片的两个副本，一个是在img显示的，一个是在canvas显示的。

这样就完成了最简单合成器。其实就是复制一份图像到canvas。

应用你的第一个特效

如果只实现上面那个，就太无聊了。所以我们要继续下一步，实现一个vignette特效。在最前面加载Seriously.js脚本那一节，我们已经把vignette特效的脚本加载进去了(就是下面那一行代码)，现在要做的就是创建一个特效节点（node）,并且把这个节点插入到合成器的特定位置。

创建一个特效节点和创建数据源节点以及目标节点类似，不过似乎更简单，只要在参数里面传特效的名字就好了。

    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部分：

脚本部分：

vignette.amount = "#vignette-range";

或者这样写：

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

现在你就可以在range条的范围内，任何调整amount的值了。

idc机房托管云服务器 web服务器视频教程 js 图片合成视频 js+图片合成视频 webrtc视频流合成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56730.html

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

摘要：视频合成器入门教程作者云荒杯倾是一个实时的，基于节点的注意不是基于视频合成器。最简单的合成器就是直接将和连起来，不使用任何动效。这样就完成了最简单合成器。一个合成器就是一个数据源节点目标节点特效节点的网络。 Web视频合成器Seriously.js入门教程作者：云荒杯倾 Seriously.js是一个实时的，基于节点（node）的（注意：不是基于nodejs）web视频合成器。受af...

时飞 2019-08-01 17:42 评论0 收藏0
Web视频合成器Seriously.js入门教程

摘要：视频合成器入门教程作者云荒杯倾是一个实时的，基于节点的注意不是基于视频合成器。最简单的合成器就是直接将和连起来，不使用任何动效。这样就完成了最简单合成器。一个合成器就是一个数据源节点目标节点特效节点的网络。 Web视频合成器Seriously.js入门教程作者：云荒杯倾 Seriously.js是一个实时的，基于节点（node）的（注意：不是基于nodejs）web视频合成器。受af...

fizz 2019-08-21 16:46 评论0 收藏0
python

Python装饰器为什么难理解？无论项目中还是面试都离不开装饰器话题，装饰器的强大在于它能够在不修改原有业务逻辑的情况下对代码进行扩展，权限校验、用户认证、日志记录、性能测试、事务处理、缓存等都是装饰器的绝佳应用场景，它能够最大程度地对代码进行复用。但为什么初学者对装饰器的理解如此困难，我认为本质上是对Py… Python 实现车牌定位及分割作者用 Python 实现车牌定位及分割的实践。 ...

chenatu 2019-07-30 15:35 评论0 收藏0
AVFoundation 视频常用套路: 视频合成与导出，拍视频手电筒，拍照闪光灯

摘要：每次拍照，都要新建具有原子性拍视频用手电筒，用配置的是直接修改的属性苹果设计的很好。拍照用闪光灯，是按瞬间动作配置。直接写入到相册，对应的是视频合成，并导出到相册。相关拍照聚焦和曝光，简明教程推荐资源苹果文档视频教程 showImg(https://segmentfault.com/img/remote/1460000016881318?w=1876&h=1188); 拍视频，把视频文...

陈江龙 2019-06-25 17:01 评论0 收藏0
前端综合性文档和教程总结（持续更新）

摘要：小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。小组中文文档，很全。小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是ctrl+D收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。一则可以做个记录，防止丢失。二则有需要的朋友可以来我这里找一找。 ...

piglei 2019-08-20 10:19 评论0 收藏0