open-index/open-npm huggingface dataset:
npm package: @lhyzero/av-canvas
Description: 修改于WebAV Combine Text, Image, Video, Audio, UserMedia, DisplayMedia to generate MediaStream.   With [AVRcorder](../av-recorder/README.md) you can output MP4 streams and save them as local files or push them to the server.
Latest version: 1.2.8

# AVCanvas

修改于WebAV
Combine Text, Image, Video, Audio, UserMedia, DisplayMedia to generate MediaStream.  
With [AVRcorder](../av-recorder/README.md) you can output MP4 streams and save them as local files or push them to the server.

使用文字、图片、音视频文件、摄像头&麦克风、分享屏幕来生成 MediaStream。  
配合 [AVRcorder](../av-recorder/README.md) 可以输出 MP4 流，然后保存为本地文件或推送至服务器。

## Example

Record a video tutorial, add camera, micphone and screen to the canvas, then export mp4 and save as mp4 file.  
录制视频教程，在画布中添加 camera、micphone 和屏幕，然后导出 mp4 保存为 mp4 文件。

<https://webav-tech.github.io/WebAV/demo/4_2-recorder-avcanvas>
npm package: @lhyzero/av-cliper
Description: 修改于WebAV WebCodecs-based, combine video, audio, images, text, with animation support 基于 WebCodecs 合成 视频、音频、图片、文字，支持动画
Latest version: 1.3.1

# AVCliper

修改于WebAV
WebCodecs-based, combine video, audio, images, text, with animation support
基于 WebCodecs 合成 视频、音频、图片、文字，支持动画

## Basic Concepts 基础概念

- `Combinator`: add `OffscreenSprite`, output video stream
  - Currently only supports outputting binary streams for MP4 format
- `IClip`: Abstract encapsulation of resources, reading (`IClip.tick(time)`) raw data of resources by time slice, has been implemented for the `IClip` interface with:
  - `MP4Clip, AudioClip, ImgClip, EmbedSubtitlesClip` (embedded SRT subtitles), these are the types of resources supported by `Combinator`
- `BaseSprite`: An abstract representation of manipulable elements, attaching Rect information (position, width, height, layer, animation) to resources to make them controllable.
  - `OffscreenSprite`: Wraps resources (`IClip`) and adds them to a `Combinator` for background offscreen video synthesis.
  - `AVCanvas`: Includes `VideoSprite, AudioSprite, ImgSprite, TextSprite` to support user or program control over the positioning of drawn resources.

<hr />

- `Combinator`： 视频合成器，添加 `OffscreenSprite`， 输出视频流
  - 目前仅支持输出 MP4 格式的二进制流
- `IClip`： 资源的抽象封装，按时间片段读取（`IClip.tick(time)`）资源的原始数据，`IClip` 接口的实现类有：
  - `MP4Clip, AudioClip, ImgClip, EmbedSubtitlesClip`（内嵌 SRT 字幕），这些是合成视频所支持的资源类型
- `BaseSprite` 可操作元素的抽象，给资源附加 Rect（位置、宽高、层级、动画）信息，使得资源可被控制
  - `OffscreenSprite`： 包装资源（`IClip`）添加到 `Combinator`，在后台离屏合成视频
  - `AVCanvas` 包含了 `VideoSprite, AudioSprite, ImgSprite, TextSprite`，以支持用户或程序控制资源绘制的位置

## DEMO

<https://webav-tech.github.io/WebAV/demo/>