webgl_video_processor

基于WebGL的视频裁切处理器

这是一个基于WebGL的视频裁切处理器，支持多种裁切类型。您可以通过传入不同的配置数组来实现不同的视频裁切效果。

使用说明

1. 创建一个VideoProcessor实例，并传入适当的配置数组。
2. 调用initializeById方法，传入源canvas的ID和目标canvas ID数组。这会初始化源和目标canvas，并将源canvas内容处理后绘制到目标canvas。
3. 在需要更新帧时（例如，源视频播放新的一帧时），调用drawFrame方法。这会将当前源canvas中的帧复制并按照给定配置处理，然后绘制到目标canvas。

示例代码

const configs = [
  { type: 'none', x: 0, y: 0, w: 1, h: 1 },
  { type: "scaleOnly", x: 2/3, y: 0.0, w: 1/3, h: 4/9 },
  { type: "threePart", x: 0.0, y: 22/27, w: 1, h: 4/27 },
];
const videoProcessor = new VideoProcessor(configs);
videoProcessor.initializeById("video1", ["camera1", "camera2", "camera3"]);

// 每当源视频播放新的一帧时执行以下操作
videoProcessor.drawFrame();

配置参数说明

• type: 裁切类型，默认值为"none"。
• x: 裁切区域的起始横坐标百分比（左上角），范围介于0到1之间，默认值为0。
• y: 裁切区域的起始纵坐标百分比（左上角），范围介于0到1之间，默认值为0。
• w: 裁切区域的宽度百分比，范围介于0到1之间，默认值为1。
• h: 裁切区域的高度百分比，范围介于0到1之间，默认值为1。

类型

支持以下裁切类型：

• none: 无裁切，原样显示。
• scaleOnly: 缩放裁切，仅裁切选定区域并缩放至目标canvas。
• threePart: 三部分裁切，分别裁切出3部分源视频，并缩放至目标canvas。