Seriously.js 技术文档

1. 安装指南

环境要求

• 浏览器支持：Seriously.js 需要支持 WebGL 的浏览器。开发和测试主要在 Firefox (4.0+)、Google Chrome (9+)、Internet Explorer (11+) 和 Opera (18+) 上进行。Safari 预计在未来也会支持 WebGL。
• 系统要求：由于 Seriously.js 高度优化，大多数现代桌面和笔记本电脑都能正常运行。较旧的系统可能会运行较慢，尤其是在处理高分辨率视频时。

安装步骤

1. 下载项目：从 GitHub 仓库下载 Seriously.js 项目文件。
2. 引入库文件：将 Seriously.js 库文件引入到你的项目中。你可以通过以下方式引入：

   <script src="path/to/seriously.js"></script>
   

3. 检查 WebGL 支持：在使用 Seriously.js 之前，建议检查浏览器是否支持 WebGL。你可以使用以下代码进行检查：

   if (Seriously.supported) {
       // WebGL 支持，可以继续使用 Seriously.js
   } else {
       // WebGL 不支持，提示用户
   }
   

2. 项目的使用说明

基本使用

Seriously.js 是一个基于节点的实时视频合成器，适用于 Web 环境。它允许你动态和交互式地应用高质量的视频效果。以下是基本使用步骤：

1. 创建 Seriously 实例：

   var seriously = new Seriously();
   

2. 添加源和目标：

   var source = seriously.source('video'); // 可以是视频、图片、canvas 等
   var target = seriously.target('canvas'); // 输出到 canvas
   

3. 应用效果：

   var effect = seriously.effect('blur'); // 选择一个效果
   effect.source = source;
   target.source = effect;
   

4. 启动渲染：

   seriously.go();
   

支持的输入源

• 视频
• 图片
• Canvas
• 数组
• Webcam
• Three.js

支持的效果

Seriously.js 内置了多种效果，包括但不限于：

• 亮度/对比度调整
• 色彩映射
• 色度键（绿屏效果）
• 高斯模糊
• 色调/饱和度调整
• 反色
• 素描效果
• 分屏
• 色调调整
• 电视故障效果

3. 项目 API 使用文档

Seriously 对象

• new Seriously()：创建一个新的 Seriously 实例。
• seriously.source(type)：创建一个源节点，type 可以是 'video'、'image'、'canvas' 等。
• seriously.target(type)：创建一个目标节点，type 可以是 'canvas'。
• seriously.effect(name)：创建一个效果节点，name 是效果的名称。
• seriously.go()：启动渲染循环。

效果节点

• effect.source：设置效果的输入源。
• effect.target：设置效果的输出目标。
• effect.param：设置效果的参数，不同效果有不同的参数。

源节点

• source.load(url)：加载视频或图片。
• source.play()：播放视频。
• source.pause()：暂停视频。

目标节点

• target.source：设置目标的输入源。

4. 项目安装方式

通过 npm 安装

你可以通过 npm 安装 Seriously.js：

npm install seriously

通过 CDN 引入

你也可以通过 CDN 引入 Seriously.js：

<script src="https://cdn.jsdelivr.net/npm/seriously/seriously.min.js"></script>

手动下载

你还可以直接从 GitHub 仓库下载 Seriously.js 的源码，并将其引入到你的项目中。

---

通过以上文档，你应该能够顺利安装和使用 Seriously.js，并了解其基本功能和 API 的使用方法。