multiCanvas

多画布

多画布功能是将不同视频放在同一个画布的不同位置上，并最终合成一个视频的功能。
金山云短视频SDK提供了多画布合成的功能，用户可以输入一个模版，并提供各个视频在模版上的相对位置，则可以将多个视频按照模版的样式最终合成一个视频，同时支持对视频添加美颜滤镜和修改左右声道。

一、关键接口说明

SDK 提供了KSYMultiCanvasComposeKit类用于合成多个视频

1. 合成时需提供数据类MediaInfo
   每一个需要合入的视频需要构造MediaInfo数据类，该类的几个关键成员介绍如下：

public class MediaInfo {
        public String path;  //媒体文件路径
        public float leftVolume = 1.0f;   //  左声道音量  
        public float rightVolume = 1.0f;  // 右声道音量
        //视频的位置，这里的位置为相对位置，即相对于模版区域的比例，起始点为预览区域的左上角
        public float x = 0;  //视频相对于模版区域的左边的相对距离，有效范围-1~1
        public float y = 0;  //视频相对于模版区域的上边的相对距离，有效范围-1~1
        public float w = 1;  //视频相对于模版整个区域宽占比，有效范围0~1
        public float h = 1;  //视频相对于模版整个区域高占比，有效范围0~1
        public float alpha = 1; //视频的alpha信息，有效范围0~1
        public int z_order; //视频在z方向的位置，主视频默认是0，值越大绘制图层越靠上层,有效范围0~7，当前版本主视频是duration最长的市场，暂时不支持设置主视频，后续再做扩展
        public int type = MEDIA_TYPE_VIDEO;  //媒体类型，图片还是视频
        public boolean isEdit = false;  //视频是否是编辑状态，当前版本滤镜只在当前编辑版本上生效，后续再做扩展
        ......
        public MediaInfo(String path, float leftVolume, float rightVolume, float x, float y,
                         float w, float h, float alpha, int z_order, int type) {
        ......
        }
}

以以下模版为例，则需要构造4个MediaInfo：

 |─ ─ ─ ─ 400 ─ ─ ─ ─|
 ┌─────────┬─────────┐  ─
 │ canvas1 │ canvas2 │  |
 │         │         │
 ├─────────├─────────┤ 400
 │ canvas3 │ canvas4 │
 │         │         │  |
 └─────────┴─────────┘  ─
 |── 200 ──|── 200 ──|  

MediaInfo canvas1 = new MediaInfo(canvas1_path, 1.0f, 1.0f, 0, 0, 0.5f, 0.5f, 1.0f, 0, MEDIA_TYPE_VIDEO);
MediaInfo canvas2 = new MediaInfo(canvas2_path, 1.0f, 1.0f, 0.5f, 0, 0.5f, 0.5f, 1.0f, 0, MEDIA_TYPE_VIDEO);
MediaInfo canvas3 = new MediaInfo(canvas3_path, 1.0f, 1.0f, 0, 0.5f, 0.5f, 0.5f, 1.0f, 0, MEDIA_TYPE_VIDEO);
MediaInfo canvas4 = new MediaInfo(canvas4_path, 1.0f, 1.0f, 0.5f, 0, 0.5f, 0.5f, 1.0f, 0, MEDIA_TYPE_VIDEO);

若想要添加一个模版图片，只需要创建一个模版的MediaInfo，并对应调整视频在模版中的相对位置即可

MediaInfo modelMedia = new MediaInfo(canvas1_path, 1.0f, 1.0f, 0, 0, 1.0f, 1.0f, 1.0f, 0, MEDIA_TYPE_BITMAP);

模版可以随意选择，只要按照模版传递正确的位置信息即可

2. 开始合成
   视频准备完毕，即可调用接口开始合成

   /**
     * 开始合成
     * @param srcInfo  合成文件的资源信息
     * @param desUrl 合成目标文件路径
     */
    public void start(final List<MediaInfo> srcInfo, String desUrl);

2. 停止合成
   若合成过程中想要中止合成，可以调用此接口，正常合成结束，无需调用此接口

   public void stop();

3. 获取合成进度
   合成过程中若想获取合成进度则调用此接口

 public float getProgress();

4. 设置滤镜&美颜
   美颜和滤镜的设置只需要通过调用KSYMultiCanvasComposeKit.getImgTexFilterMgt()拿到ImgTexFilterMgt对象，其余设置方式，参考通用的滤镜和美颜设置方式

当前版本只支持对某一个视频设置美颜和滤镜，不能对所有视频生效，后续会进行改善

5. 合成过程状态和错误回调
   通过以下两个接口设置合成过程的状态和错误回调，具体的回调信息参考通用的合成状态和错误回调说明

 public void setOnInfoListener(KSYMultiCanvasComposeKit.OnInfoListener onInfoListener);
 public void setOnErrorListener(KSYMultiCanvasComposeKit.OnErrorListener onErrorListener); 

二、Demo 多画布方案说明

Demo中的multicanvasdemo展示了一种多画布合成方案。 关键类说明：

类名	功能说明
MultiCanvasRecordActivity	根据画布录制一段视频并进入编辑窗口，编辑合成结束后再次返回录制页面继续录制画布视频并同时展示之前合成好的画布，循环进行直到多有画布录制结束
MultiCanvasEditActivity	对从Record录制的视频通过KSYEditKit进行预览展示，同时可调整音量并添加美颜滤镜，编辑结束后触发视频合成并再次进入录制进行下一个画布的录制
CanvasViewBase	可以传入任意画布布局layout，该类负责在录制页面或者编辑页面生成对应的画布View
MultiCanvasInfo	在Record和Edit中间传递的画布的UI信息，其中主要用于设定预览区域在模版的对应的位置

当前demo展示的是多次合成的方案，即每编辑一个视频后就将该视频和前一个视频进行合成压缩
此种方案的缺点是多次压缩后会导致视频失真（当前demo为了降低失真率，会在前几次合成时设置了1080p的分辨率，当前合成消耗时间也会相应增加）
建议在此基础上使用我们提供的接口类KSYMultiCanvasComposeKit开发更合理的方案，后续我们会持续对多画布的方案做优化，敬请期待