一、解码（devode）
1.解码视频（Video Decoder）
- 用到的sdk:
import { MP4Clip } from '@webav/av-cliper'; - 注意事项: 测试用的视频资源托管在 github pages，启动 DEMO 可能需要一些网络加载时间
2.解码音频（Audio Decoder）
- 用到的sdk:
import { AudioClip } from '@webav/av-cliper';
3.解码动图（Gif Decoder）
- 功能简介: 动图是由多个静态图片帧组成的，可使用浏览器 API
ImageDecoder解码；
或使用ImgClip.tick(time)获取指定时间的图像帧； - 用到的sdk:
import { ImgClip } from "@webav/av-cliper";
4.解码播放（Decode and Play）
-
功能简介：使用
WebCodecs + canvas + WebAudio来解码播放视频，能获取到视频原始图像、音频数据。 该方案拥有最完整的播放控制能力，是原生video标签无法实现的，比如：- 低延迟场景的 buffer 控制
- 根据设备压力状况丢帧
- 解码异常时自动恢复
- 逐帧播放、超快倍速播放
- 倍速播放音频不变调
- 自定义播放 FPS
该方案的代价是增加了复杂度，应优先考虑使用 video 播放，除非无法满足诉求。
- 用到的sdk:
import { MP4Clip } from '@webav/av-cliper'; - 注意事项: 先初始化Canvas 上下文之后再初始化 MP4Clip
- 遇到的问题:
二、剪辑（clip）
1.缩略图（Thumbnail）
- 功能简介：视频缩略图常用于剪辑工具的时间轴模块中，该功能抽取视频所有关键帧，生成自定义宽度的缩略图，并提供对应的时间戳。
- 用到的sdk:
import { MP4Clip } from '@webav/av-cliper'; - 注意事项: 先初始化Canvas 上下文之后再初始化 MP4Clip
2.轨道分离（Track Separation）
- 功能简介：音视频轨道分离是剪辑的一个基础能力，分离后即可单独编辑音、视频轨道，互不影响。 该 DEMO 演示将一个视频文件拆分成独立的音频与视频，支持独立播放。
- 用到的sdk:
import { MP4Clip } from '@webav/av-cliper'; - 注意事项: 先初始化 MP4Clip，再clip.splitTrack()分离
3.视频剪辑（Video Clip）
-
功能简介：基于 WebAV 项目提供的
@webav/av-canvas包能在浏览器环境中快速实现视频剪辑功能。该 DEMO 演示视频剪辑软件的基础能力- 添加/删除素材（视频、音频、图片、文字）
- 分割（裁剪）素材
- 控制素材在视频中的空间属性（坐标、旋转、缩放）
- 控制素材在视频中的时间属性（偏移、时长）
- 实时预览播放
- 纯浏览器环境生成视频
-
用到的sdk:
import { AVCanvas } from '@webav/av-canvas' import { AudioClip, ImgClip, MP4Clip, VisibleSprite, renderTxt2ImgBitmap, } from '@webav/av-cliper' import TimelineEditor from './TimelineEditor.vue' -
注意事项:
const avCvs = shallowRef(null)必须用shallowRef去做 -
遇到的问题：1.时间轴组件是原生开发的，官网demo是react自带组件，故样式上差很多，功能上也有bug,缺少了素材可拖拽，时间刻度显示不完整等问题。2.tlState是TimelineEditor时间轴组件的ref，前期把它当作props值传进去导致时间轴不生效。
三、合成（composite）
1.视频合成（Video Composite）
- 功能简介：音视频轨道分离是剪辑的一个基础能力，分离后即可单独编辑音、视频轨道，互不影响。 该 DEMO 演示将一个视频文件拆分成独立的音频与视频，支持独立播放。
- 用到的sdk:
import { Combinator, ImgClip, MP4Clip, OffscreenSprite, renderTxt2ImgBitmap, } from '@webav/av-cliper' - 注意事项:
如果你想在视频中绘制普通图片，可参考以下方式创建
ImgClip实例，再添加到Combinatornew ImgClip((await fetch('<img url>')).body);
2.视频配音（Video Dubbing）
- 功能简介：视频配音。
- 用到的sdk:
import { AudioClip, Combinator, MP4Clip, OffscreenSprite, } from '@webav/av-cliper' - 注意事项:
3.音频合成（Audio Composite）
- 功能简介：混合两个音频文件，输出 m4a 音频文件。
new Combiator 不提供 width, height 或任意一个值为 0，则不会创建视频轨道，生成的是 m4a 音频文件。。
- 用到的sdk:
import { AudioClip, Combinator, OffscreenSprite } from '@webav/av-cliper' - 注意事项:
4.嵌入字幕（Embedding Subtitles）
- 功能简介：在视频中嵌入 SRT 字幕。
- 用到的sdk:
import { MP4Clip, EmbedSubtitlesClip, Combinator, OffscreenSprite, } from '@webav/av-cliper' - 注意事项:
5.合成再拼接（Synthesize And Splice）
- 功能简介：代码处理过程：
- 移除三个视频素材的绿幕背景
- 再给视频添加背景图片，合成输出三个独立的视频文件
- 使用
fastConcatMP4将三个视频文件首尾拼接成一个视频文件
- 用到的sdk:
import { MP4Clip, ImgClip, createChromakey, Combinator, OffscreenSprite, fastConcatMP4, } from "@webav/av-cliper"; - 注意事项:
- 遇到的问题:视频资源会出现加载失败的情况，因为测试用的视频资源托管在 github pages，启动 DEMO 可能需要一些网络加载时间，故会导致拼接失败
6.自定义素材（Custom IClip）
- 功能简介：使用 canvas 实现一个倒计时 Clip，快速生成视频文件；
基于同样原理，适应于需要将 canvas 内容（比如 动画）快速保存为视频文件的场景。 - 用到的sdk:
import { Combinator, OffscreenSprite } from '@webav/av-cliper'; - 注意事项:
四、视频录制（greenScreenMatting）
1.直播录制（Live Recording）
- 功能简介：使用 canvas 实现一个倒计时 Clip，快速生成视频文件；
基于同样原理，适应于需要将 canvas 内容（比如 动画）快速保存为视频文件的场景。 - 用到的sdk:
import { ImgClip, MediaStreamClip, VisibleSprite, renderTxt2ImgBitmap, } from '@webav/av-cliper'; - 注意事项:
2.摄像头（Camera）
- 功能简介：
- 用到的sdk:
import { AVRecorder } from "@webav/av-recorder"; import { fixFMP4Duration } from "@webav/av-cliper"; - 注意事项:
- 摄像头1不显示时长，摄像头2显示时长
- 摄像头1是实时视频流不能确定结束时间，所以会缺失总时长字段，大部分播放器能分析 Sample 显示正确的总时长； 但某些兼容性较差的播放器（Windows Media Player）无法显示时长信息。
- 摄像头2是
fixFMP4Duration临时将内容保存到一个 OPFS 中，在视频流结束时添加总时长字段； 因为需要在流结束的时候去修正时长信息，所以无法在录制过程中实时上传数据。 - 摄像头2与摄像头1的差异在于： 视频数据临时保存在 OPFS 中，在录制结束时修正了时长（duration）字段，所以在点击 Stop 时才需要创建本地文件。
const outStream = await fixFMP4Duration(recorder.start());
五、绿幕抠图（other）
1.图片背景（Image Background）
- 功能简介：
- 用到的sdk:
import { createChromakey } from "@webav/av-cliper"; - 注意事项:
2.视频背景（Video Background）
- 功能简介：在背景图上叠加两个视频，左边是原视频，右边是移除绿幕背景后的效果。
- 用到的sdk:
import { Combinator, ImgClip, MP4Clip, OffscreenSprite, createChromakey, } from '@webav/av-cliper' - 注意事项:
