移动端音视频需求实现方案探索

作者：Karl_wei

通过这篇文章，你将收获：
1. 音视频的相关知识点和技术
2. Flutter中关于音视频操作的相关技术
3. 商用场景下，音视频需求的主流实现方案

写作背景

最近的项目是一个健身类的Flutter App，其中核心功能是训练课程的播放。由于多种因素导致用户体验非常差，因此在接手项目的半年里我对这块功能做了2次改造，并且预研了一套长期的方案以支持课程播放这个核心功能的持续迭代。所以记录分享给大家，避免重复踩坑走弯路。
需要说明的是：音视频(或者说任何技术难题)的难点都是在于解决方案，而不是任何具体的实现代码；而方案往往不是一蹴而就，因为涉及到前端需求、开发资源、团队资源等一大堆问题，接下来我会着重聊聊我在音视频需求实现方案的整个探索过程。

落实方案的坎坷之路

一、亡羊补牢

项目初期，App的课程直接在线播放，也不做缓存机制，用户训练过程中进行出现训练5秒等待10秒的情况，而且每次都在线加载，极其耗费流量。因此我们对视频进行分析得到码率竟然达到了16000kbps+，以至于短短30秒的视频就有60MB，这是播放过程中总是缓冲的原因；同时视频的索引信息没有做优化，moov atom放在末尾，播放器解码速度慢，导致首次等待时间长。
鉴于运营能力，只能先使用压缩工具减小视频大小。我这边紧急上线一个下载功能，训练之前把所有课程章节的视频缓存到本地，训练过程使用本地资源播放。技术方面Flutter直接使用dio download按顺序下载。

二、与时俱进

通过临时上线的下载功能，用户可以顺畅训练；但很快又引出下一个问题：视频大小压不下，10个章节可能需要5 min+的下载时间，同时文件完整性没有做校验，出错率较高。如何解决？

1. 从源头入手：通过跟剪辑人员的大量交流以及不断制作demo查看效果，我们发现一个尺寸为1080 * 1080的mp4，码率在2000左右、帧数峰值25，在任何分辨率/dpi的手机屏幕上，流畅度和清晰度都完全没问题。然后再通过专业的压缩工具，基本每分钟的视频可以控制在8M以下。因此要求内容团队的同事按照这个尺寸出视频即可。
2. 优化下载机制：下载的机制从最简单粗暴的按顺序下载改为：下载第一章节，进入训练页面会启动后台下载，同时支持断点下载。
   由此减少用户的等待下载的时间，同时避免用户切章节的时候，原先未完成下载的章节作废，节约了重复下载的流量。（主要也给服务器节流