“抖音”式的酷炫短视频开发进阶


2017年短视频应用的爆发,再次改变了人们,尤其是年轻人的生活习惯,快手、抖音等应用也逐渐融入到日常生活中。短视频App各种各样的酷炫效果让人爱不释手,也把视频内容玩出了新花样。LiveVideoStack邀请了全民快乐研发高级总监展晓凯,与我们线上分享了短视频酷炫特效的实现设计架构、解决思路和开发经验,本文是直播分享的内容整理。


分享 / 展晓凯

整理 / LiveVideoStack


开始前先跟大家分享一个视频,这个Demo是基于iOS平台实现的,我们今天的分享也将聚焦在视频中多种特效的实现方法和经验总结。


class="video_iframe" frameborder="0" allowfullscreen="" data-vidtype="-1" data-ratio="0.5666666666666667" data-w="272" data-src="http://v.qq.com/iframe/player.html?vid=t0535kml1qs&width=634&height=475.5&auto=0" style="display: block; width: 634px !important; height: 475.5px !important;" width="634" height="475.5" data-vh="475.5" data-vw="634" src="http://v.qq.com/iframe/player.html?vid=t0535kml1qs&width=634&height=475.5&auto=0"/>


应该如何实现


在实现Demo中特效前,我借鉴了funimate产品,利用它提供的功能生成视频,对它进行逐帧分析,并从中找出可能的实现方法。在视频分析中,使用了FFmpeg将视频分解成一帧一帧的图片从而进行分析。观察具体某一帧或者某几帧使用了怎样的特效。


ffmpegi output.mp4r 0.25 frames_%04d.png


具体到技术实现手段,第一种实现方式是把视频每一帧解码出的YUV,利用libyuv库来操作,甚至可以用RGBA来操作,这是通过CPU操作转换YUV来实现;第二种实现方法性能会更好,但开发成本可能也会相对较高,就是在GPU上操作纹理来实现。


由于我们需要在移动平台实现,而在移动平台使用CPU是很难满足需求的,要考虑到性能、耗电、实时观看体验等等因素,因此我们需要使用GPU来实现。


Demo场景设计


我们想要实现这样一个Demo或者简单的App,首先我们需要预览视频的界面,然后给出多种特效的选择菜单,当用户选择其中某种特效时会实时显示该特效的预览效果,并且将特效的开始作用时间和作用时长记录到内存的结构体中,最后当用户点击保存按钮时,可以离线保存为视频文件。


基于现有框架的开发


那么我们需要用到哪些已有的框架或者已有的项目来完成这个功能呢?可以思考下,既然有预览界面,则一定需要视频播放器。播放器的基本功能包括了解码和音视频的渲染,此外再加上逻辑控制、音视频对齐就可以成为一个视频播放器。


视频播放器中视频解码模块是非常重要的,通过它可以将视频文件解码为视频帧,并且输出到解码纹理队列中,接下来就是本App最核心的工作——处理,视频处理模块会按照时间戳将对应的纹理进行处理,并放入到渲染队列,最后输出模块会将渲染队列中的纹理输出到屏幕上,而在离线保存场景下,则是将渲染队列中的纹理编码输出到本地,也就是封装成mp4或者flv等等格式写入本地磁盘。


鉴于处理模块是本App的核心,而我们今天所讲的特效也都是在该模块中完成的,因此接下来我们一起来看下它的具体实现方法。


视频处理


  • 镜像



首先跟大家分享一个最简单的特效——镜像,先生成一个16:9的屏幕比例的画布,将它分割为四部分,每部分画一个相同的视频帧,因为屏幕被分割为4部分,我们的物体坐标在渲染时就不能设定为全屏的。在OpenGL中物体坐标,左下角为(-1,-1),右上角为(1,1),这样我们就可以分别计算出4部分的物体坐标。


确认好物体坐标后,我们接下来就要确认画什么?也就是将视频帧以什么样的方式画在物体坐标上,这时就需要控制纹理坐标,我们可以看到OpenGL的纹理坐标定义:从左下角(0,0)到右上角(1,1),实际画的时候左上角是我们完整的纹理,右上角我们需要做镜像处理,左下角需要做横向翻转,右下角则是针对右上角视频帧做横向翻转,这样就可以实现简单的镜像效果。


  • 镜像模糊



相对于前面的特效,这个特效只需要做一对镜像,但他的背景是需要做高斯模糊的,如果用CPU来做,通过两个大的“for”循环就可以实现,对于GPU也是相同的,不过代码会相对复杂一些。假如我们要计算中间25这个点的高斯模糊,我们需要先得出下图中的像素值,乘上各自点的高斯权重,然后做加权平均,最终把高斯模糊的效果放在下面成为背景,然后再将镜像的纹理画在上面就可以实现了。


  • 电击效果


在了解了两个简单的特效实现之后,我们一起来看一些复杂特效的实现方法,首先是电击效果,实际上它的实现就是反选的处理,只需要使用下面代码就可以:


gl_FragColor  = vec4((1.0 - texture.rgb), texture.w);


但想要达到一个很好的效果,其中还是有一些小技巧,也就是需要把握好节奏。假如我们现在有250ms运动的视频帧,再排上180ms静止的反选视频帧就可以实现了,如下方动图演示:假设50ms为一帧,那么对于10帧总时间为500ms的视频帧来说,前5帧都不变,依旧是正常的效果,从第6帧开始我们做反选并且保证画面是静止的,也就是说第7、8、9帧同样放第6帧,而第10帧时我们渲染正常的第10帧,这样周而复始就可以实现电击效果。



  • 灵魂出窍



这个特效就是人影有一个向外扩散的效果,同样它的节奏也是非常重要的,尤其是能与音乐的配合才能达到一个完美的效果。那么它的实现过程如下:首先我们每隔15帧拷贝一帧作为“灵魂”并且按照比例放大,这里特别需要提到的是SRT(Scale/Rotate/Translate),基于这三个的组合我们可以写一个TransformEffect,它可以利用通用的SRT矩阵变化纹理。


在得到放大后的“灵魂”(拷贝帧),我们就需要考虑把“灵魂”和“肉体”(原本视频帧)混合起来,这里需要用到GLES的一个内嵌Mix函数将两个纹理进行mix即可。那么同理,我们还可以实现眩晕、影随的效果:眩晕是将每一帧向两侧做位移再与本帧进行mix,而影随则是将之前的帧缓存下来,以一定的间隔和当前帧做mix。


  • 动态晕影


其实晕影效果在GPUImage中也有设置,它的实现首先需要构造一个纯黑色的图片,然后再与原始视频帧做mix就可以,在处理过程中有两点需要注意:首先交界处要做平滑处理,然后非常重要的依旧是节奏,我们Demo中的节奏时间列表如下:



  • 木头人


木头人效果就是在视频中有一个bar——彩色且可动的区域,在bar区域以外则是静止且高斯模糊的,实现方法是每隔一定时间(Demo中是1.5s)冷冻一帧做高斯模糊处理,并且取灰度值放在后面,按照移动的边框距离将两帧进行mix。



  • 九宫格


九宫格效果中想要实现9个画面的效果可以参考第一个镜像特效的处理,而如何保证移动、放大、缩小时效果的平滑变化是最关键的,首先我们需要构建一个大纹理——相比原画长、宽分别扩大3倍,然后我们通过TransformEffect来进行位移、缩放。



  • 旋转木马


最后为大家介绍旋转木马特效,这也是本次分享中最复杂的,因为它的处理不再是简单的链式结构,而是graph。那么旋转木马特效其实就是四个画面中只有一个画面是彩色且可动的,其余三个都是黑白、静止的。我们假设左上角为1-3帧,右上角为4-6帧,左下角为7-9帧,右下角为10-12帧依次排列,那么在第1帧时,四个画面分别会显示1,4,7,10帧,而此时只有第一帧为彩色的,其余是黑白的,同时除左上角外其余三个画面都是冰冻状态。当左上角画面变为第3帧时,左上角画面变为黑白、静止,右上角的画面变为彩色、可动的,以此类推。


class="video_iframe" frameborder="0" allowfullscreen="" data-vidtype="-1" data-ratio="1.7647058823529411" data-w="480" data-src="http://v.qq.com/iframe/player.html?vid=b0535kmpi9m&width=634&height=356.625&auto=0" style="display: block; width: 634px !important; height: 356.625px !important;" width="634" height="356.625" data-vh="356.625" data-vw="634" src="http://v.qq.com/iframe/player.html?vid=b0535kmpi9m&width=634&height=356.625&auto=0"/>


如上述视频所示,它的实现方法如下:首先每个画面都包含一个队列,然后我们把解码出来的视频帧以此按照左上、右上、左下、右下的顺序填充,当然在实现中可能以时间为依据会更加合理,当右下队列中有了第一帧时,我们才会绘制出第一帧效果也就是说特效才会开始,此时视频中显示的是第1,5,9,13帧,当左上绘制出第二帧时,解码器会将解码好的第14帧给到右下的队列中,以此类推。而当左上画面绘制出第4帧后,右上的队列开始绘制,同时解码器解码出来的视频帧将填充到左上的队列中,周而复始就能达到旋转木马的效果。


在绘制阶段有两个关键点:第一,对于活动区域而言,我们需要取出活动队列中的视频帧进行绘制,同时非活动区域取出队列中首帧进行灰度绘制;第二,对于填充区域来说,我们要按照当前时间戳与第一帧时间戳计算出填充区域,并且将当前帧入队到填充区域的队列中。


以上是针对demo中特效实现的讲解,非常感谢。


移动音视频开发进阶线下分享会


如果大家觉得还不过瘾,或者想与讲师面对面交流沟通,我们将在下周六(1月27日)下午举办线下沙龙以及新书分享会,除展晓凯老师,我们还请到了暴风影音首席架构师鲍金龙,Hulu全球高级研发经理傅德良与我们一同分享移动音视频开发实践经验。ps:据说“大师兄”刘歧也会去哦~


更多详情点击【阅读原文】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/37254.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

今日分享:应该去怎样制作优质抖音短视频

抖音视频是适台在移动状态和休闲状态下观看的视频内容,视频时长一般在15秒到5分钟之间。相对于文字图片来说,视频能够带给用户更好的视觉体验,在表达时也更加生动形象,能够将创作者希望传达的信息更真实、更生动地传达给受众。 在…

12个视频剪辑素材网站,短视频素材免费下。

我自己平时也会剪辑一些视频,经常因为拍摄的素材不够用,要去各大平台找视频素材。有没有人跟我一样,一遇到找素材就头疼,不知道去哪里找,找到的素材还要担心会不会侵权,是不是需要费用。今天就把我多年整理…

视频素材剪辑制作的方法分享

朋友们平时在剪辑视频的操作过程中,如果想要给多个视频素材添加相同的片头的话,会怎么操作呢?其实方法大同小异,找到适合自己的方法就可以。那今天小编就给大家分享一下我平时是怎么批量给视频添加相同的片头素材,一起…

短视频剪辑的九大技巧分享

随着视频时代的到来,大家已经习惯了用视频来记录自己的日常生活和表达自己,也习惯了用视频来了解他人,接触更广阔的世界。那么我们自己想要剪辑短视频,应该怎么做呢,一起来往下看吧! 第一、高级感的视频开…

短视频剪辑的小技巧分享,助你剪出令人印象深刻的片段,吸粉引流

短视频剪辑的小技巧分享,助你剪出令人印象深刻的片段,吸粉引流 短视频剪辑说难也难,但是说简单其实也简单,毕竟只要认真学习,大概几天就可以基本掌握短视频剪辑的流程,只是如果想要剪辑出来可以吸粉引流的…

做短视频千万不要错过这5个视频素材网

这个要看你创作什么内容,dy里面很多视频素材都是创作者自己拍摄,要不就插入一些网上找的视频素材,现在网上找到一些视频素材很多都是有版权,除非花钱买;也有免费的,但就是质量不算高。各取所需,…

视频剪辑练手,就上这几个网站找素材~

视频剪辑如何找到免费的练手素材,这5个网站收藏好,绝对对你有帮助! 1、菜鸟图库 视频素材下载_mp4视频大全 - 菜鸟图库 菜鸟图库主要提供设计素材为主,自媒体相关素材也很多,像商用图片、背景图、视频素材、音频素材…

短视频的三种表现形式,新手博主可参考,操作简单易上手

短视频的三种表现形式,新手博主可参考,操作简单易上手 新手刚刚开始做短视频的时候,往往会遇到很多的困难,比如选择短视频的表现形式,就让很多人犯了难。那么接下来,我们就一起说一说关于短视频的三种表现…

分享视频剪辑必备的三个素材软件(配音/文案/图片)

hello,大家好,相信现在很多小伙伴都需要制作视频,无论是从事短视频行业,还是单纯想分享生活视频的都需要对视频进行简单的处理吧? 有时候会需要介绍视频内容或是给视频增加点配音,来让视频不那么单调&#…

短视频的创作技巧分享,六大要点要注意,创作还要找对方向

短视频的创作技巧分享,六大要点要注意,创作还要找对方向 做短视频,说简单也简单,但说难也难。想要创作出一个优质的短视频,最重要的一点就是要找对方向,那么我们今天就一起来看一看短视频的几个创作技巧&a…

短视频云端批量混剪实操指南

本文为阿里云智能媒体服务IMS「智能内容创作」实践指南第一期,讲述围绕新媒体广告营销场景,通过“去重策略”全自动批量混剪短视频,助力更高效、更快速地创作优质短视频内容。 欧叔|作者 5G时代,越来越多的企业把短视…

短视频账号搭建之Banner图和视频封面

前面在我赢小禾呈序里学了账号名称、头像和个人简介设置,今天把账号搭建的最后两部分一起公开: banner图是你主页上面的这个主图。 同样它的存在可以有三个作用: 第一个作用比较简单,就是让你的主页更好看。 听起来太简单了&am…

适合短视频分享的Fireshare

RustDesk 的补充说明 感谢网友 煦诗儿 提醒,在 RustDesk 官网菜单中,有网页版客户端,使用方法和其他客户端是一样的。 不过只能使用 http 协议,作者在 https://github.com/rustdesk/rustdesk/issues/856 中解释了为何不启用 SSL …

今日剪辑妙招分享:剪辑抖音短视频可以用哪些工具剪辑?

如今,抖音短视频已经成为了人们日常生活中的一部分,很多人都喜欢通过剪辑视频来表达自己的情感和创意。那么,剪辑抖音短视频可以用哪些工具呢?下面不若与众科技就为大家介绍一些常见的工具。 首先,最常见的工具是手机自…

短视频素材在哪找?3大素材库,3000+最火视频素材免费用

短视频素材在哪找?3大素材库,3000最火视频素材免费用,做短视频最头痛的就是素材问题了,首先,一个人做的话,没有什么资金去买专业的设备拍摄,自己用手机拍的视频素材又差点意思,有时候…

如何剪辑短视频?剪辑短视频的技巧来了

如何剪辑短视频?现如今短视频发展十分迅速,几乎我们每个人的日常生活中都会和短视频打交道。大家在观看短视频的时候,是否会想到自己动手剪辑制作呢?说道这里很多小伙伴可能会说剪辑多难,我不会。其实日常的剪辑并不是…

线稿图视频制作--从此短视频平台不缺上传视频了

🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝🔝 🥰 博客首页:knighthood2001 &#x1f6…

短视频APP开发:短视频特效SDK功能火爆来袭!

为什么短视频这么火呢?因为它符合了用户碎片化时间的需求,既娱乐了大众,又不会浪费用户太多时间。 短视频APP开发以互联网技术为核心,在原有的基础上不断进行创新,进而拥有多种强大的拍摄功能,让用户可以快…

都在抢发AI大模型,谁在关注模型安全?

文|光锥智能,作者|周文斌 如果要给4月定一个主题,“大模型”应该当仁不让。 从4月7日阿里突然放出“通义千问”内测开始;8日,华为放出盘古大模型;10日,商汤推出类ChatGPT产品“商量…

csdn提升博客等级

附: 博客等级 图标等级所需积分L10L2100L3400L4800L51600L64500L79000L825000L950000L10100000L11200000L12300000L13500000L14800000L151000000 一:如何查看自己的博客积分? 想要快速提升等级,就需要按照CSDN的积分规则来获取积…