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

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目录下)是分开的,你可以按需加载核心脚本和动效脚本。

代码加载如下:

    <!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中写下:

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

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

<canvas id="canvas" width="640" height="480"></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),并且把这个节点插入到合成器的特定位置。

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

原文地址:https://www.cnblogs.com/jlfw/p/12208367.html

时间: 2024-11-05 21:35:11

Web视频合成器Seriously.js入门教程的相关文章

渐进式Web应用(PWA)入门教程(下)

上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍. 渐进式Web应用(PWA)入门教程(上) 在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的. 第一步:使用HTTPS 渐进式Web应用程序需要使用HTTPS连接.虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前. 由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址,所以在本示例中您并不需要开启HTTPS.另

Node.js 入门教程 (二):模块

由于新工作要做前端,作为前端小白而且能尽快学习,所以选择慕课网的node.js的入门教程.博客只做自己学习的记录. JavaScript缺少模块管理机制,容易出现变量被覆盖,方法被替代的情况(既被污染).特别是存在依赖关系时,容易出现错误.采用命名空间的方式,把变量和函数限制在某个特定的作用域内,人肉约定一套命名规范来限制代码,保证代码安全运行. CommonJs是一套规范,包括了modules,system,encodings,unit test等等来约定JavaScript应该怎么去组织和编

Ember.js入门教程、博文汇总

第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properties) Ember.js 入门指南——观察者(observer) Ember.js 入门指南——绑定(bingding) Ember.js 入门指南——枚举(enumerables) Ember.js 入门指南之七第一章对象模型小结 第二章 模板 Ember.js 入门指南——handlebars基

前端框架React Js入门教程【精】

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

网页3D引擎“Babylon.JS”入门教程翻译总结

使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结. 历程: 最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机.触摸屏.电机(提供声效)编的打地鼠程序.后来因为大四的毕业设计与三维空间模拟有关,又自学了MFC编程和NEHE的OpenGL教程(国人翻译版)(C++3D编程的复杂会给任何参与者留下深刻的印象,向先驱者们致敬).工作后自学了JavaScript语言和前端知识,感觉js与C++相比极其简单易用,如果能以js代替C++进行3D开发可以

Node.js入门教程

http://www.nodebeginner.org/index-zh-cn.html#a-basic-http-server Node入门 作者: Manuel Kiessling翻译: goddyzhao & GrayZhang & MondayChen 关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对

BackBone.js入门教程

废话不说,直入正题. Backbone.js是什么 Backbone.js提供了一套web开发框架,通过Models进行key-value绑定及自定义事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及现有的Application通过RESTful JSON接口进行交互,它是基于jQuery和underscore的一个前端js框架. Backbone中的重要概念 Model:根据现实数据建立的抽象,比如people Collection:比如一群人

Node.js入门教程——如何实现文件上传功能

作者:zhanhailiang 日期:2014-11-16 本文将介绍如何使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/nodejs-upload-image-demo]# npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to gu

Angular.js入门教程

简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.首先Html是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. 通常,我们可以通过以下技术来解决决静态网页技术在构建动态应用上的不足: 1.类库 - 类库是一些函数的集合,它能帮助你写WEB应用.起主导作用的是你的代码,由你来决定何时使用类库.例如jQuery等 2.框架 - 框架是一种特殊的.已经实现了的WEB应用,你只需要对它填充具体的业务逻辑.这里框架是起主导作用的,由它来根据具体的应