|
|
51CTO旗下网站
|
|
移动端

真牛!字节跳动又一开源力作发布

今天要和大家分享字节跳动的一项开源神器。前不久,字节跳动的技术团队在Github上开源了一个视频动画特效SDK。

作者:猿妹整编来源:开源最前线|2020-09-11 15:37

前几日,字节跳动发送邮件,宣布将给予员工发放奖金。金额为2020年8月固定薪酬的 50%。

这波福利猿妹只能默默的感叹一句:又是别人家的公司。不过今天猿妹不想和大家探讨这项福利,今天要和大家分享字节跳动的一项开源神器。

前不久,字节跳动的技术团队在Github上开源了一个视频动画特效SDK,可以通过制作Alpha通道分离的视频素材,再在客户端上通过OpenGL ES重新实现Alpha通道和RGB通道的混合,从而实现在端上播放带透明通道的视频。

AlphaPlayer已经在Github上标星270,累计分支 28 个(Github地址:https://github.com/bytedance/AlphaPlayer)

目前,抖音、抖音火山版、西瓜小视频、今日头条已经接入。

这套方案对设计师而言明显降低了特效的制作成本,对于客户端而言有着更可靠的性能和稳定性,且相比cocos2d引擎有着更低的入门门槛和维护成本,为复杂动画的实现提供了一种全新的方式,新的复杂动画开发将会变得更加简单高效。

运行效果如下:

项目结构&基本原理

AlphaPlayer主要有两个核心部分,一个是MediaPlayer,负责视频每一帧的解码,支持接入方自行实现;另一个是VideoRenderer,负责将解析出来的每一帧画面进行alpha通道混合,再输出到Surface上。View使用的是GLSurfaceView,性能相对TextureView更优,但层级限制在最顶层。

AlphaPlayer内部是通过Render渲染纹理画面的,设计师导出的视频资源会包含两部分内容——透明遮罩画面和原视频画面两部分,然后通过shader进行alpha值的混合,详细可以看 frag.sh和vertex.sh。

快速接入

  1. allprojects { 
  2.  
  3. repositories { 
  4.  
  5. ... 
  6.  
  7. maven { url 'https://jitpack.io' } 
  8.  
  9.  
  10.  
  11. dependencies { 
  12.  
  13. implementation 'com.github.bytedance:AlphaPlayer:1.0.3' 
  14.  

添加依赖

  1. val config = Configuration(context, lifecycleOwner) 
  2.  
  3. // 支持GLSurfaceView&GLTextureView, 默认使用GLSurfaceView 
  4.  
  5. config.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW 
  6.  
  7. // 也可以设置自行实现的Player, demo中提供了基于ExoPlayer的实现 
  8.  
  9. val playerController = PlayerController.get(config, DefaultSystemPlayer()) 
  10.  
  11. playerController.setPlayerAction(object: IPlayerAction { 
  12.  
  13. override fun onVideoSizeChanged(videoWidth: Int, videoHeight: Int, scaleType: ScaleType) { 
  14.  
  15.  
  16. override fun startAction() { 
  17.  
  18.  
  19. override fun endAction() { 
  20.  
  21.  
  22. }) 
  23.  
  24. playController.setMonitor(object: IMonitor { 
  25.  
  26. override fun monitor(result: Boolean, playType: String, what: Int, extra: Int, errorInfo: String) { 
  27.  
  28.  
  29. }) 

初始化PlayerController

  1. playerController.attachAlphaView(mVideoContainer) 

将PlayerController绑定到ViewGroup

  1. fun startVideoAnimation() { 
  2.  
  3. val baseDir = "your video file base dir" 
  4.  
  5. val portraitFileName = "portrait.mp4" 
  6.  
  7. val portraitScaleType = 2 
  8.  
  9. val landscapeFileName = "landscape.mp4" 
  10.  
  11. val landscapeScaleType = 2 
  12.  
  13. val dataSource = DataSource().setBaseDir(baseDir) 
  14.  
  15. .setPortraitPath(portraitFileName, portraitScaleType) 
  16.  
  17. .setLandscapePath(landscapeFileName, landscapeScaleType) 
  18.  
  19. if (dataSource.isValid()) { 
  20.  
  21. playerController.start(dataSource) 
  22.  
  23.  

播放动画视频

  1. fun releasePlayerController() { 
  2.  
  3. playerController.detachAlphaView(mVideoContainer) 
  4.  
  5. playerController.release() 
  6.  

【编辑推荐】

  1. 腾讯云发布全新游戏云解决方案,助力游戏开发者高效开发
  2. 低代码为AI降低准入门槛
  3. 干货 | 手把手教你用115行代码做个数独解析器!
  4. 低代码和无代码的主要区别是什么?
  5. 华为开发者大会正式发布HarmonyOS 2.0 点燃面向全场景智慧生态的星星之火
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

162人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

107人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微