编辑: kr9梯 | 2019-09-06 |
【商标声明】 及其它腾讯云服务相关的商标均为腾讯云计算(北京)有限责任公司及其关联公司所有.本文档涉及的第三方主体 的商标,依法由权利人所有. 【服务声明】 本文档意在向客户介绍腾讯云全部或部分产品、服务的当时的整体概况,部分产品、服务的内容可能有所调整.您 所购买的腾讯云产品、服务的种类、服务标准等应由您与腾讯云之间的商业合同约定,除非双方另有约定,否则, 腾讯云对本文档内容不做任何明示或模式的承诺或保证. 视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第3 共34页 文档目录 视频编辑 视频编辑(iOS) 视频编辑(Android) 视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第4 共34页 功能概览 视频编辑包括视频裁剪、时间特效(慢动作、倒放、重复)、滤镜特效(动感光波,暗黑幻影,灵魂分出窍,画面 分裂)、滤镜风格(唯美,粉嫩,蓝调等)、音乐混音、动态贴纸、静态贴纸、气泡字幕等功能,我们在 SDK 开发 包的 Demo 中实现了一套 UI 源码供使用参考及体验,各功能的界面如下: 视频编辑 视频编辑(iOS) 最近更新时间:2018-06-15 20:27:59 视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第5 共34页图1是视频裁剪操作界面 图2是时间特效操作界面 图3是动态滤镜操作界面 图4是美颜滤镜操作界面 图5是背景音乐操作界面 图6是静态与动态贴纸操作界面 视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第6 共34页图7是气泡字幕操作界面 编译运行 Demo 体验,从资源下载处下载SDK开发包,解压出来运行 Demo 工程RTMPiOSDemo.xcodeproj,在 运行起来后的主界面中点选短视频特效即可选择视频进入进行编辑功能体验. 复用现有UI 视频编辑具有比较复杂的交互逻辑,这也决定了其 UI 复杂度很高,所以我们比较推荐复用 SDK 开发包中的 UI 源码,使用时从 Demo 中拷贝以下文件夹到自己的工程: 1. VideoEditor(代码) 2. Resource下的VideoEditor与FilterResource.bundle(资源) 3. Common 与Third(整个 Demo 依赖的公共代码,根据自己的需要再进行删改) UI 源码说明 源码中各个界面组件比较独立,您可根据自己产品需求再对界面进行修改加工. 主要界面组件说明: 1. VideoCutView: 视频裁剪界面,包含了视频裁剪、时间特效,滤镜特效添加等功能,如需定制裁剪界面可对此类 进行修改或替换. 2. FilterSettingView: 视频添加滤镜界面,目前包含
9 种滤镜,如果修改滤镜操作的界面可对此类进行修改或替换. 3. MusicMixView: 视频添加混音界面,包含音乐文件选择,音乐信息展示,音乐长度裁剪,原音与伴音音量调整等 功能,如需修改混音界面可对此类进行修改或替换. 4. TextAddView: 视频添加字幕界面,此界面只包含跳转到 VideoTextViewController 的按钮,实际添加字幕的界 面及操作在 VideoTextViewController 中进行,可根据需要进行修改或去除此界面. 5. VideoTextField: 字幕输入组件,包含字幕文字输入、字幕拖动、放大、旋转、删除、添加字幕背景样式等功能, VideoTextViewController 中主要利用此组件完成字幕的添加删除. 6. VideoPasterView: 贴纸输入组件,包含动态/静态贴纸输入、贴纸拖动、放大、旋转、删除等功能, VideoPasterViewController 中主要利用此组件完成贴纸的添加删除. VideoEditViewController 只负责将这几个界面与预览界面 VideoPreview 组合起来,并结合 SDK 去处理界面间的 交互及响应,如需对界面进行整体结构的调整可在此类中进行. 自己实现 UI 如果您不考虑复用我们开发包中的 UI 代码,决心自己实现 UI 部分,则可以参考如下的攻略进行对接: 1. 预览图片组 视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第7 共34页TXVideoInfoReader 的getVideoInfo 方法可以获取指定视频文件的一些基本信息,getSampleImages 则可以获 取指定数量的预览图: // 获取视频文件的信息 + (TXVideoInfo *)getVideoInfo:(NSString *)videoPath;
// 对视频文件进行预读,均匀得生成 count 张预览图片组 + (void)getSampleImages:(int)count videoPath:(NSString *)videoPath progress:(sampleProcess)sampleProcess;
开发包中的 VideoRangeSlider 即使用了 getSampleImages 获取了
10 张缩略图来构建一个由视频预览图组成的 进度条. 2. 效果预览 视频编辑提供了 定点预览(将视频画面定格在某一时间点)与区间预览(循环播放某一时间段 AB 内的视频片 段)两种效果预览方式,使用时需要给 SDK 绑定一个 UIView 用于显示视频画面. 绑定 UIView TXVideoEditer 的initWithPreview 函数用于绑定一个 UIView 给SDK 来渲染视频画面,绑定时需要制定自适应 与填充两种模式. PREVIEW_RENDER_MODE_FILL_SCREEN - 填充模式,尽可能充满屏幕不留黑边,所以可能会裁剪掉一部分 画面. PREVIEW_RENDER_MODE_FILL_EDGE - 适应模式,尽可能保持画面完整,但当宽高比不合适时会有黑边出 现. 定点预览 TXVideoEditer 的previewAtTime 函数用于定格显示某一个时间点的视频画面. 区间预览 TXVideoEditer 的startPlayFromTime 函数用于循环播放某一时间段AB内的视频片段. 3. 视频裁剪 视频编辑类操作都符合同一个操作原则:即先设定操作指定,最后用 generateVideo 将所有指令顺序执行,这种方 式可以避免多次重复压缩视频引入的不必要的质量损失. TXVideoEditer* _ugcEdit = [[TXVideoEditer alloc] initWithPreview:param];
// 设置裁剪的 起始时间 和 结束时间 [_ugcEdit setCutFromTime:_videoRangeSlider.leftPos toTime:_videoRangeSlider.rightPos];
视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第8 共34页// ... // 生成最终的视频文件 _ugcEdit.generateDelegate = self;
[_ugcEdit generateVideo:VIDEO_COMPRESSED_540P videoOutputPath:_videoOutputPath];
输出时指定文件压缩质量和输出路径,输出的进度和结果会通过 generateDelegate 以回调的形式通知用户. 4. 滤镜特效 您可以给视频添加滤镜效果,例如美白、浪漫、清新等滤镜,demo提供了9种滤镜选择,同时也可以设置自定义的 滤镜. 设置滤镜的方法为: - (void) setFilter:(UIImage *)image;
其中 image 为滤镜映射图,image 设置为 nil,会清除滤镜效果. Demo示例: TXVideoEditer *_ugcEdit;
NSString * path = [[NSBundle mainBundle] pathForResource:@ FilterResource ofType:@ bundle ];
path = [path stringByAppendingPathComponent:@ langman.png ];
UIImage* image = [UIImage imageWithContentsOfFile:path];
[_ugcEdit setFilter:image];
5. 音轨处理 您可以为视频添加自己喜欢的背景音乐,并且可以选择音乐播放的起始时间和结束时间,如果音乐的播放时间段小 于视频的时间段,音乐会循环播放至视频结束.除此之外,您也可以设置视频声音和背景声音的大小,来达到自己 想要声音合成效果. 设置背景音乐的方法为: - (void) setBGM:(NSString *)path result:(void(^)(int))result;
- (void) setBGMAsset:(AVAsset *)asset result:(void(^)(int))result;
其中 path 为音乐文件路径, asset为音乐属性,从系统媒体库loading出来的音乐,可以直接传入对应的音乐属性,会 极大的降低音乐从系统媒体库loading的时间,具体请参考demo用法. 设置背景音乐的开始和结束方法为: - (void) setBGMStartTime:(float)startTime endTime:(float)endTime;
其中 startTime 为音乐起始时间,endTime 为音乐结束时间. 视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第9 共34页 设置背景音乐是否循环播放方法为: - (void) setBGMLoop:(BOOL)isLoop;
其中 isLoop 为音乐是否循环播放. 设置背景音乐在视频的添加的起始位置方法为: - (void) setBGMAtVideoTime:(float)time;
其中 time 为音乐在视频添加的起始位置. 设置视频和背景声音大小的方法为: - (void) setVideoVolume:(float)volume;
- (void) setBGMVolume:(float)volume;
其中 volume 表示声音的大小,取值范围
0 ~
1 ,0 表示静音,1 表示原声大小. Demo 示例: NSString * path = [[NSBundle mainBundle] pathForResource:@ FilterResource ofType:@ bundle ];
path = [path stringByAppendingPathComponent:@ defalut.mp3 ];
[_ugcEdit setBGM:_BGMPath result:^(int result) { if (result == 0) { [_ugcEdit setBGMStartTime:0 endTime:10];
[_ugcEdit setBGMVolume:1];
[_ugcEdit setVideoVolume:1];
} }];
6. 设置全局水印 您可以为视频设置水印图片,并且可以指定图片的位置 设置水印的方法为: - (void) setWaterMark:(UIImage *)waterMark normalizationFrame:(CGRect)normalizationFrame;
其中 waterMark 表示水印图片,normalizationFrame 是相对于视频图像的归一化frame,frame 的x,y, width,height 的取值范围都为 0~1. Demo 示例: 视频编辑 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第10 共34页UIImage *image = [UIImage imageNamed:@ watermark ];
[_ugcEdit setWaterMark:image normalizationFrame:CGRectMake(0, 0, 0.3 , 0.3 * image.size.height / im age.size.width)];
//水印........