移动端IM实践：iOS版微信小视频功能技术方案实录

JackJiang · 8 年前

本文由微信开发团队人员编写，转自 WeMobileDev，感谢。

前言

微信里的小视频功能（有些移动端IM里也叫“短视频”）是微信6.0版亮点功能之一，微信技术人员在开发此功能过程中遇到过不少问题，现将技术实现过程中遇到的问题及解决方案分享给大家，希望能对有类似需求的同行有所启发。

产品经理的需求

1录制需求

支持白平衡、对焦、缩放；
录制视频长度6秒，30帧/秒，尽量不丢帧；
能录制不同尺寸和码率的视频。

2播放需求

可以同时播放多个视频；
用户操作界面时视频可以继续播放；
播放时不能卡住界面，视频滑进界面内后要立即播放；
视频在列表内播放是静音播放，点击放大是有声播放。

技术实现：录制

对于需求1：“支持白平衡、对焦、缩放”，AVFoundation有API可以支持，这里不多说。这里重点说说需求2：“录制视频长度6秒，30帧/秒，尽量不丢帧”、需求3：“能录制不同尺寸和码率的视频”的实现方案。

移动端IM实践：iOS版微信小视频功能技术方案实录_AVCaptionConnection.png

移动端IM实践：iOS版微信小视频功能技术方案实录_AVCaptionConnection.png

前期录制方案如下：

创建AVCaptureSession，设置拍摄分辨率；
添加AVCaptureInput，如摄像头和麦克风；
添加AVCaptureOutput，如AVCaptureVideoDataOutput、AVCaptureAudioDataOutput：
这里AVCaptureAudioDataOutput建议在Session -startRunning后才添加，避免影响摄像头启动时间。
添加AVCaptureVideoPreviewLayer，为用户提供拍摄预览界面；
创建MMovieWriter，里面包含AVAssetWriter对象，用于写视频；
开始捕捉-startRunning；
AVCaptureVideoDataOutput和AVCaptureAudioDataOutput不停地往MMovieWriter传递VideoSampleBuffer和AudioSampleBuffer，MMovieWriter对VideoSampleBuffer做分辨率压缩，以及对AudioSampleBuffer做码率压缩；
结束捕捉-stopRunning，MMovieWriter停止写视频，把生成的视频文件抛给上层。

在4s以上的设备拍摄小视频挺流畅，帧率能达到要求。但是在iPhone4，录制的时候特别卡，录到的视频只有6~8帧/秒。尝试把录制视频时的界面动画去掉，稍微流畅些，帧率多了3～4帧/秒，还是不满足需求。通过Instrument检测，发现跟写音频时的压缩有关，写音频时阻塞了AVFoundation的线程，引起后续的丢帧。网上也有人反馈类似问题 http://stackoverflow.com/questio ... single-core-devices。把写音频去掉后，帧率果然上去了。但是系统相机的拍摄视频是非常流畅的。于是用AVCaptureMovieFileOutput（640*480）直接生成视频文件，拍视频很流畅。然而录制的6s视频大小有2M+，再用MMovieDecoder+MMovieWriter压缩至少要7~8s，影响聊天窗口发小视频的速度。

综上所述，要想拍视频不卡，就要在录制过程中尽量不做CPU耗时操作，而且AVCaptureOutput传递数据给上层时不能卡住AV线程。最终想到个方案，加个Cache层，先把AVCaptureOutput传递的SampleBuffer缓存下来，不在AV的线程写视频；等CPU空闲时，再唤起movieWriter线程写视频。流程如下图所示：

移动端IM实践：iOS版微信小视频功能技术方案实录_0.png

通过这样处理，拍视频流畅度跟系统相机接近了，只是刚拍的前1s帧数只有18帧，后面稳定到30帧/秒左右了。而且用户松手拍完后，最多等1s就能把视频写完文件了；也优化了之前的视频截图生成接口，减少200ms。不过拍摄稳定性不够好，经常出现下面的写失败错误，频率大概是6次/100次：

[GL] <MMovieWriter.mm:476::-[MMovieWriter appendAudioSampleBufferInternal:]> INFO: audio writer status 3, desc Error Domain=AVFoundationErrorDomain Code=-11800 "这项操作无法完成" UserInfo=0x11495910 {NSLocalizedDescription=这项操作无法完成, NSUnderlyingError=0x1146e8d0 "The operation couldn’t be completed. (OSStatus error -12633.)", NSLocalizedFailureReason=发生未知错误（-12633）}

通过google搜索，网上说这错误原因是同一个FrameTime写入了两帧。但是FrameTime是从SampleBuffer里取的，理论上不会时间重合（我没打log验证）；而且老方案没出现这种错误，新方案延后处理才会出现的。经过多次试验，把Buffer Cache设置上限，当Buffer数达到一定数量后强制让MovieWriter写入文件，同时把下面这行代码注释，错误不再出现了：

//m_writer.movieFragmentInterval = CMTimeMakeWithSeconds(1.0, 1000); // AVAssetWriter

方案对比：

方案	录制平均码率(fps/s)	拍完到看到预览的间隔(s)
不加Buffer Cache	7.2	0.64
加入Buffer Cache	27.3	1.2

注：以上数据基于iPhone4聊天窗口拍摄若干个6s视频10次，算平均值。

技术实现：播放

1MPMoviePlayerController方案

MPMoviePlayerController是一个简单易用的视频播放控件，可以播放本地文件和网络流媒体，支持mov、mp4、mpv、3gp等H.264和MPEG-4视频编码格式，支持拖动进度条、快进、后退、暂停、全屏等操作，并为开发者提供了一系列播放状态事件通知。使用时先设置URL，然后把它的view add到某个parent view里，再调用play即可。

但这方案的缺点是，同一时间只能有一个MPMoviePlayerController对象播放，不满足同时多个播放的需求；而且也不支持静音播放。MPMoviePlayerController适合于全屏播放视频的场景。

2AVPlayer方案

VPlayer是AVFoundation.Framework提供的偏向于底层的视频播放控件，用起来复杂，但功能强大。单独使用AVPlayer是无法显示视频的，要把它添加到AVPlayerLayer里才行。另外它需要配合AVPlayerItem使用，AVPlayerItem类似于MVC里的Model层，负责资源加载、视频播放设置及播放状态管理（通过KVO方式来观察状态）。它们关系如下：

移动端IM实践：iOS版微信小视频功能技术方案实录_avplayerLayer_2x.png

移动端IM实践：iOS版微信小视频功能技术方案实录_avplayerLayer_2x.png

首先创建一个AVPlayerItem对象：

NSURL* videoUrl = [NSURL fileURLWithPath:m_path isDirectory:NO];
m_playItem = [AVPlayerItem playerItemWithURL:videoUrl];

// 监听playItem的status属性
[m_playItem addObserver:self forKeyPath:@"status" 
    options:NSKeyValueObservingOptionNew context:nil];

接下来是创建AVPlayer和AVPlayerLayerView对象。AVPlayerLayerView是自定义的UIView，用于AVPlayer播放，其layerClass是AVPlayerLayer：

// AVPlayer
m_player = [AVPlayer playerWithPlayerItem:m_playItem];
m_player.actionAtItemEnd = AVPlayerActionAtItemEndNone;

// AVPlayerLayerView
m_playerView = [[AVPlayerLayerView alloc] initWithFrame:self.bounds];
[self addSubview:m_playerView];

// 把AVPlayer添加到AVPlayerLayer
[(AVPlayerLayer*)[m_playerView layer] setPlayer:m_player];

// 观察AVPlayerItem播放结束的通知
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(itemPlayEnded:) 
    name:AVPlayerItemDidPlayToEndTimeNotification object:m_playItem];

AVPlayerItem的status属性有三种状态：AVPlayerStatusUnknown、AVPlayerStatusReadyToPlay及AVPlayerStatusFailed。当status=AVPlayerStatusReadyToPlay时，就代表视频能播放了，此时调用AVPlayer的play方法就能播放视频了。

相比MPMoviePlayerController，AVPlayer有最多可以同时播放16个视频。另外AVPlayer在使用时会占用AudioSession，这个会影响用到AudioSession的地方，如聊天窗口开启小视频功能。还有AVPlayer释放时最好先把AVPlayerItem置空，否则会有解码线程残留着。最后是性能问题，如果聊天窗口连续播放几个小视频，列表滑动时会非常卡。通过Instrument测试性能，看不出哪里耗时，怀疑是视频播放互相抢锁引起的。

3AVAssetReader+AVAssetReaderTrackOutput方案

既然AVPlayer在播放视频时会有性能问题，我们不如做自己的播放器。AVAssetReader可以从原始数据里获取解码后的音视频数据。结合AVAssetReaderTrackOutput，能读取一帧帧的CMSampleBufferRef。CMSampleBufferRef可以转化成CGImageRef。为此，我们可以写个MMovieDecoder的类，负责视频解码，每读出一个SampleBuffer就往上层回调：

AVAssetReader* reader = [[AVAssetReader alloc] initWithAsset:m_asset error:&error];
NSArray* videoTracks = [m_asset tracksWithMediaType:AVMediaTypeVideo];
AVAssetTrack* videoTrack = [videoTracks objectAtIndex:0];

// 视频播放时，m_pixelFormatType=kCVPixelFormatType_32BGRA
// 其他用途，如视频压缩，m_pixelFormatType=kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange
NSDictionary* options = [NSDictionary dictionaryWithObject:[NSNumber numberWithInt:
        (int)m_pixelFormatType] forKey:(id)kCVPixelBufferPixelFormatTypeKey];
AVAssetReaderTrackOutput* videoReaderOutput = [[AVAssetReaderTrackOutput alloc] 
        initWithTrack:videoTrack outputSettings:options];
[reader addOutput:videoReaderOutput];
[reader startReading];

// 要确保nominalFrameRate>0，之前出现过android拍的0帧视频
while ([reader status] == AVAssetReaderStatusReading && videoTrack.nominalFrameRate > 0) {
    // 读取video sample
    CMSampleBufferRef videoBuffer = [videoReaderOutput copyNextSampleBuffer];
    [m_delegate mMovieDecoder:self onNewVideoFrameReady:videoBuffer);
    CFRelease(videoBuffer);    
    // 根据需要休眠一段时间；比如上层播放视频时每帧之间是有间隔的
    [NSThread sleepForTimeInterval:sampleInternal];
}
    
// 告诉上层视频解码结束
[m_delegate mMovieDecoderOnDecodeFinished:self];

另一个是MVideoPlayerView，负责视频的显示，它接收MMovieDecoder回调的CMSampleBufferRef后，把它转为CGImageRef，然后设置layer.contents为这个CGImageRef对象。创建CGImageRef不会做图片数据的内存拷贝，它只会当Core Animation执行Transaction::commit()触发layer -display时，才把图片数据拷贝到layer buffer里。

AVAssetReader也能decode音频的SampleBuffer，不过本人还没想到如何播放CMSampleBufferRef的音频，目前只能静音播放。

4以上方案测试对比

* 对方案2、3做了滑动性能对比和耗电对比，测试条件分别是：

滑动：在iPhone4的聊天窗口，有30个小视频，来回做4次列表滑动；
耗电：在iPhone5s，屏幕亮度调到最大，禁止自动锁屏，开启飞行模式，聊天窗口同时播放着3个小视频，10分钟。

方案	屏幕滑动(fps)	耗电(mHA/s)
AVPlayer	18.7	0.127
MyMoviePlayer	42.4	0.110

5以上方案测试结论

方案3无论滑动性能和耗电均优于方案2，由于方案3只能静音播放，所以方案3用于聊天窗口和朋友圈列表播放，方案2用于点击放大时的有声播放。

全站即时通讯技术资料分类

附录：有关QQ、微信的文章汇总

[1] 有关QQ、微信的技术文章：
《微信后台团队：微信后台异步消息队列的优化升级实践分享》
《微信团队原创分享：微信客户端SQLite数据库损坏修复实践》
《腾讯原创分享(一)：如何大幅提升移动网络下手机QQ的图片传输速度和成功率》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（下篇）》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）》
《微信Mars：微信内部正在使用的网络层封装库，即将开源》
《如约而至：微信自用的移动端IM网络层跨平台组件库Mars已正式开源》
《开源libco库：单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]》
《微信新一代通信安全解决方案：基于TLS1.3的MMTLS详解》
《微信团队原创分享：Android版微信后台保活实战分享(进程保活篇)》
《微信团队原创分享：Android版微信后台保活实战分享(网络保活篇)》
《Android版微信从300KB到30MB的技术演进(PPT讲稿) [附件下载]》
《微信团队原创分享：Android版微信从300KB到30MB的技术演进》
《微信技术总监谈架构：微信之道——大道至简(演讲全文)》
《微信技术总监谈架构：微信之道——大道至简(PPT讲稿) [附件下载]》
《如何解读《微信技术总监谈架构：微信之道——大道至简》》
《微信海量用户背后的后台系统存储架构(视频+PPT) [附件下载]》
《微信异步化改造实践：8亿月活、单机千万连接背后的后台解决方案》
《微信朋友圈海量技术之道PPT [附件下载]》
《微信对网络影响的技术试验及分析（论文全文）》
《一份微信后台技术架构的总结性笔记》
《架构之道：3个程序员成就微信朋友圈日均10亿发布量[有视频]》
《快速裂变：见证微信强大后台架构从0到1的演进历程（一）》
《快速裂变：见证微信强大后台架构从0到1的演进历程（二）》
《微信团队原创分享：Android内存泄漏监控和优化技巧总结》
《全面总结iOS版微信升级iOS9遇到的各种“坑”》
《微信团队原创资源混淆工具：让你的APK立减1M》
《微信团队原创Android资源混淆工具：AndResGuard [有源码]》
《Android版微信安装包“减肥”实战记录》
《iOS版微信安装包“减肥”实战记录》
《移动端IM实践：iOS版微信界面卡顿监测方案》
《微信“红包照片”背后的技术难题》
《移动端IM实践：iOS版微信小视频功能技术方案实录》
《移动端IM实践：Android版微信如何大幅提升交互性能（一）》
《移动端IM实践：Android版微信如何大幅提升交互性能（二）》
《移动端IM实践：实现Android版微信的智能心跳机制》
《移动端IM实践：WhatsApp、Line、微信的心跳策略分析》
《移动端IM实践：谷歌消息推送服务(GCM)研究（来自微信）》
《移动端IM实践：iOS版微信的多设备字体适配方案探讨》
>> 更多同类文章 ……

[2] 有关QQ、微信的技术故事：
《技术往事：创业初期的腾讯——16年前的冬天，谁动了马化腾的代码》
《技术往事：史上最全QQ图标变迁过程，追寻IM巨人的演进历史》
《开发往事：深度讲述2010到2015，微信一路风雨的背后》
《开发往事：微信千年不变的那张闪屏图片的由来》
《开发往事：记录微信3.0版背后的故事（距微信1.0发布9个月时）》
《一个微信实习生自述：我眼中的微信开发团队》
>> 更多同类文章 ……

2 楼: PonyZhao · 8 年前

这需求：
可以同时播放多个视频；
用户操作界面时视频可以继续播放；
播放时不能卡住界面，视频滑进界面内后要立即播放；
视频在列表内播放是静音播放，点击放大是有声播放。

看一眼就头大：UI线程、后台播放程、UI与后台线程状态同步、列表滑动事件处理。。。。

3 楼: copper · 7 年前

学习了，最近正在做小视频的开发，可以借鉴使用到自己的项目中，哈哈

4 楼: JackJiang · 7 年前

引用：copper 发表于 2017-04-13 10:08
学习了，最近正在做小视频的开发，可以借鉴使用到自己的项目中，哈哈

希望对你有帮助

5 楼: 诗说穿石 · 7 年前

有源码github分享吗

6 楼: JackJiang · 7 年前

引用：诗说穿石发表于 2017-05-10 17:55
有源码github分享吗

只能等微信开源了

7 楼: lehoon · 7 年前

感谢分享

本文目录

前言

产品经理的需求

1录制需求

2播放需求

技术实现：录制

技术实现：播放

1MPMoviePlayerController方案

2AVPlayer方案

3AVAssetReader+AVAssetReaderTrackOutput方案

4以上方案测试对比

5以上方案测试结论

全站即时通讯技术资料分类

附录：有关QQ、微信的文章汇总

本帖已收录至以下技术专辑

MobileIMSDK (v6.5精编版)

MobileIMSDK-Web (有偿开源)

RainbowAVnew (有偿开源)

RainbowChat (技术转让)

RainbowChat-Web (技术转让)

精华之王

白金版主

终身成就

即时通讯网

友情链接[友链交换]

关于

微信公众号new

本文目录

前言

产品经理的需求

1录制需求

2播放需求

技术实现：录制

技术实现：播放

1MPMoviePlayerController方案

2AVPlayer方案

3AVAssetReader+AVAssetReaderTrackOutput方案

4以上方案测试对比

5以上方案测试结论

全站即时通讯技术资料分类

附录：有关QQ、微信的文章汇总

本帖已收录至以下技术专辑

MobileIMSDK(v6.5精编版)

MobileIMSDK-Web(有偿开源)

RainbowAVnew(有偿开源)

RainbowChat(技术转让)

RainbowChat-Web(技术转让)

精华之王

白金版主

终身成就

即时通讯网

友情链接[友链交换]

关于

微信公众号new

MobileIMSDK (v6.5精编版)

MobileIMSDK-Web (有偿开源)

RainbowAVnew (有偿开源)

RainbowChat (技术转让)

RainbowChat-Web (技术转让)

即时通讯网　