心跳之旅

转载于https://www.jianshu.com/p/6a504afe179e

[前情提要] 光阴似箭，日月如梭，最近几年，支持心率检测的设备愈发常见了，大家都在各种测空气测雪碧的，如火如荼，于是我也来凑一凑热闹。[0] 这段时间，我完成了一个基于iOS的心率检测Demo，只要稳定地用指尖按住手机摄像头，它就能采集你的心率数据。Demo完成后，我对心率检测组件进行了封装，并提供了默认动画和音效，能够非常方便导入到其他项目中。在这篇博客里，我将向大家分享一下我完成心率检测的过程，以及，期间我遇到的种种困难。

在开始之前，我先为大家展示一下最后成品的效果：

上图展示的是心率检测过程中的主要界面。 在检测的过程中，应用能够实时捕捉心跳的波峰，计算相应的心率，并以Delegate或Block的形式回调，在界面上显示相应的动画和音效。

好吧，😂其实上面的前情提要都是我瞎掰的，这个Demo是我来到公司的第一天接到的任务。刚接到任务的时候其实是有点懵逼的，原本以为刚入职两天可能都是要看看文档，或者拖拖控件，写写界面什么的，结果Xcode都还没装好，突然接到一个心率检测的任务，顿时压力就大起来了😨，赶紧拍拍屁股起来找资料。

心率检测的APP在我高三左右就有了，我清楚地记得当时，年少无知的我还误以为，大概又是哪个刁民闲着无聊恶搞的流氓应用，特地下载下来试了一下，没想到居然真的能测。。。

当时就震惊地打开了某度查了这类应用的原理。所以现在找起资料来还是比较有方向性的。

花了一天的时间找资料，发现在手机心率检测方面，网上相关的东西还是比较少。不过各种资料参考下来，基本的实现思路已经有了。

任务清单

首先说一说用手机摄像头实现心率检测所用到的原理。 我们知道，现在市面上有非常多具备心率检测功能的可穿戴设备，比如各种手环以及各种Watch，其实从本质上讲，我们这次要用到的原理跟这些可穿戴设备所用到的原理并无二致，它们都是基于光电容积脉搏波描记法（PhotoPlethysmoGraphy, PPG）。

PPG是追踪可见光（通常为绿光）在人体组织中的反射。它具备一个可见光光源来照射皮肤，再使用光电传感器采集被皮肤反射回来的光线。PPG有两种模式，透射式和反射式，像一般的手环手表这样，光源和传感器在同一侧的，就是反射式；而医院中常见的夹在指尖上的通常是透射式的，即光源和传感器在不同侧。 皮肤本身对光线的反射能力是相对稳定的，但是心脏泵血使得血管容积周期性地变化，导致反射光也呈现出周期性的波动值，特别是在指尖这种毛细血管非常丰富的部位，这种周期性的波动很容易被观察到。

使用iPhone的系统相机就可以轻易地用肉眼观察到这种波动——在录像中打开闪光灯，然后用手指轻轻覆盖住摄像头，就能观察到满屏的红色图像会随着心跳产生一阵一阵的明暗变化，如下图（请忽略满屏的摩尔纹）。

至于，为什么可穿戴设备上用的光源大多数都是绿光，我们用手机闪光灯的白光会不会有问题。这主要是因为绿光在心率检测中产生的信噪比比较大，有利于心率的检测，用白光也是完全没问题的。详情可以移步知乎：各种智能穿戴的心率检测功能 。我在这里就不细说了。

我们已经知道我们需要用闪光灯和摄像头来充当PPG的光源和传感器，那么下面就来分析一下后续整体的方案。下面是我搜集完数据之后大致画出的一个流程图。

有了大概的方案之后，我决定着手进行实现了。

我们前面已经提到，我们要用AVCapture进行视频流的采集。在使用AVCapture的时候，需要先建立AVCaptureSession，相当于是一个传输流，用来连接数据的输入输出，然后分别建立输入和输出的连接。因此，为了更加直观，我先做了一个类似于相机的Demo，把AVCapture采集到的相机图像直接传输到一个Layer上。

创建AVCaptureSession AVCaptureSession的配置过程类似于一次数据库事务的提交。开始配置前必须调用[_session beginConfiguration];来开始配置；完成所有的配置工作后，再调用[_session commitConfiguration];来提交此次配置。 因此，整个配置过程大致是这样的：

建立输入流From Camera 要从相机建立输入流，就得先获取到照相机设备，并且对它进行相应的配置。这里对照相机的配置最关键的是要打开闪光灯常亮。此外，再设置一下白平衡、对焦等参数的锁定，来保证后续的检测过程中，不会因为相机的自动调整而导致特征值不稳定。

需要注意的是，照相机Device的配置过程中，需要事先锁定它，锁定成功后才能进行配置。并且，在配置闪光灯等参数前，必须事先判断当前设备是否支持相应的闪光灯模式或其他功能，确保当前设备支持才能够进行设置。 此外，对于相机的配置，还有一点非常重要：记得调低闪光灯亮度！！

长期打开闪光灯会使得电池发热，这对电池是一种伤害。在我调试的过程中，曾经无数次调着调着忘了闪光灯还没关，最后整只手机发热到烫手的程度才发现，直接进化成小米~ 所以，尽量将闪光灯的亮度降低，经过我的测试，即使闪关灯亮度开到最小也能够测得清晰的心率。

接下来就是利用配置好的device创建输入流：

建立输出流To AVCaptureVideoDataOutput 建立输出流需要用到AVCaptureVideoDataOutput类。我们需要创建一个AVCaptureVideoDataOutput类并设置它的像素输出格式为32位的BGRA格式，这似乎是iPhone相机的原始格式（经@熊皮皮提出，除了这种格式，还有两种YUV的格式）。后续我们读取图像Buffer中的像素时，也是按照这个顺序（BGRA）去读取像素点的数据。设置中需要用一个NSDictionary来作为参数。 我们还要设置AVCaptureVideoDataOutput的代理，并创建一个新的线程（FIFO）来给输出流运行。

连接到AVCaptureSession 建立完输入输出流，就要将它们和AVCaptureSession连接起来啦！ 这里需要注意的是，必须先判断是否能够添加，再进行添加操作，如下所示。

实现代理协议的方法，获取视频帧 上面的步骤中，我们将self设为AVCaptureVideoDataOutput的delegate，那么现在我们就要在self中实现AVCaptureVideoDataOutputSampleBufferDelegate的方法xxx didOutputSampleBuffer xxx，这样在视频帧到达的时候我们就能够在这个方法中获取到它。

做到这里，我们已经获得了一个类似于相机的Demo，在屏幕上可以输出摄像头采集的画面了，接下来，我们就要在这个代理方法中对每一帧图像进行特征值的计算。

采样过程中，最关键的就是如何将一幅图像转换为一个对应的特征值。 我先将所有像素点转换为一个像素点（RGB）：

转换成一个像素点之后，我们只剩下RGB三个数值，事情就变简单得多。在设计采样的算法的过程中，我进行了许多种尝试。 我先试着简单地使用R、G、B分量中的其中一个直接作为信号输入，结果都不理想。

- HSV色彩空间 想到之前图形学的课上有介绍过HSV色彩空间，是将颜色表示为色相、饱和度、明度（Hue, Saturation, Value）三个数值。

我简单地用Core Graphics直接在图像的Layer上画出H数值的折线：

为了使得曲线更加直观，我对特征值稍做处理，又改变了一下横坐标的比例，得到如下截图。现在心率信号稳定以后，波峰已经比较明显了，我们开始进行心率的计算。

最初，我想到的是利用快速傅里叶变换（FFT）对信号数组进行处理。FFT可以将时域的信号转换成频域的信号，也就得到了一段信号在各个频率上的分布，这样，我们就能通过判断占比最大的频率，就差不多能确定心率了。 但是可能由于我缺乏信号处理的相关知识，经过将近两天的研究，我还是看不懂跟高数课本一样的文档。。。 于是我决定先用暴力的方法算出心率，等能用的Demo出来之后，看看效果如何，再考虑研究算法的优化。

通过上面的曲线，我们可以看出，在信号稳定的时候，波峰还是比较清晰的。因此我想，我可以设置一个阈值，进行波峰的检测，只要信号超过阈值，就判定该帧处于一个波峰。然后再设置一个状态机，完成波峰波谷之间的状态转换，就能检测出波峰了。 因为从AVCapture得到的图像帧数为30帧，也就是说，每一帧代表1/30s的时间。那么我只需要数一数从第一个波峰到最后一个波峰之间，经过了多少帧，检测到了多少波峰，那么，就能算出每个波峰间的周期，也就能算出心率了。

这个想法非常简单，但是存在一个问题，那就是，阈值的设置。波峰的凸起程度并不是恒定的，有时明显，有时微弱。因此，一个固定的阈值肯定不能满足实际检测的需求。于是我想到我们可以根据心跳曲线波动的上下范围，来实时确定一个合适的阈值。我做了如下修改：

每次进行心率计算的时候，先找出整个数组的极大和极小值，确定数据上下波动的范围。 然后，根据这个范围的一个百分比，来确定阈值。

也就是说，一个特征值只有超过了整组数据的百分之多少，它才会被判定为波峰。 根据这个方法，我每隔一段时间对数据进行一遍检测，在Demo中实现了心率的计算，又对界面进行了简单的实现，大致的效果如下。

使用的过程中还存在一定程度的误检率，不过总算是实现了心率检测~ 🎉🎉🎉

在我粗略实现了心率检测的功能后，Leader提出了对性能进行优化的要求，顺便向我普及了一波Instruments的用法（以前我一直没有用过🙊）。

任务清单

我用Instrument分析了心率检测过程中的CPU占用，发现占用率很高，维持在50%~60%左右。不过这在我的预料中，因为我的算法确实很暴力😂——每帧的图像是1920x1080尺寸的，在1/30秒内，要对这200多万个像素点进行遍历计算，还要转换成位图显示在layer上，隔一段时间还要计算一次心率。。。

我分析了CPU占用比较多的部分，归纳了几个可以考虑优化的方向

在分析CPU占用时，我发现在循环中对RGB分别累加时，第一个R的运算占用100倍以上的时间。开始时以为可能是Red分量数值较大，计算难度大，Leader建议我使用位运算，但是我改成位运算后，瓶颈依旧存在，弄得我十分困惑。后来我试着把RGB的计算顺序换一下，结果发现，瓶颈和R无关，不论RGB，只要谁在第一位，谁就会成为瓶颈。后来我想到，这应该是CPU和内存之间的数据传输造成的瓶颈，因为像素点都存在一块很大的内存块里，在取第一个数据的时候可能速度比较慢，然后后面取临近数据的时候可能就有Cache了，所以速度回提高两个数量级。

取消AV输出 之前我为了方便看效果，将采集到的视频图像输出到了界面上的一层Layer上，其实这个画面完全没必要显示出来。因此我去除了这部分的功能，这样一来，整体的CPU占用就降低到了33%以下。

降低分辨率 目前我们采集视频的大小是1920x1080，其实我们并不需要分辨率这么高。降低分辨率一方面可以减少需要计算的像素点，另一方面可以减少IO的时间。 在我将分辨率降低到640x480：

结果非常惊人，整体的CPU占用率直接降低到了5%左右！

此前，我们已经完成了一个大致可用的心率监测Demo，但在此之前，我着重考虑的都是如何尽快实现心率检测的功能，对整体的结构和对象的封装都没有太多的考虑，简直把OC的面向对象用成了面向过程。 那么我们接下来的一个重要任务，就是对我们的心率检测进行封装，使它成为一个可复用的组件。

任务清单

最开始的时候，我想到的是对ViewController进行封装，这样别人有需要心率检测的时候，就可以弹出一个心率监测的ViewController，上面带有一些检测过程中的动画效果，检测完成后自动dismiss，并且返回检测到的心率。 我在protocol中声明了三个接口：

我将三个方法都设为了optional的，因为我还在ViewController中设置了三个相应的Block供外部使用，分别对应三个方法。

对ViewController进行封装之后，我们可以看到，还是比较不合理的。这意味着别人只能使用我们封装起来的界面进行心率检测，如果使用组件的人有更好的交互方案，或者有特殊的逻辑需求，那他使用起来就会很不方便。因此，我们很有必要进行更深层次的封装。 接下来，我将会剥离出心率检测的类，进行封装。

首先，我一点点剥离出心率检测的关键代码，放进新的MTHeartBeatsCapture类中。剥离的差不多之后，就发现满屏的代码都是红色的Error😲，花了一个下午，才把项目恢复到能运行的状态。

我在心率检测类中设置了两个方法：启动和停止。使用起来很方便。

然后，我重新设计了一个心率检测器的回调接口，依旧是delegate和block并存的。新的接口如下：

我在新的接口中加入了heartBeatsCaptureDidLost:，方便在特征值波动剧烈的时候进行回调，这样外部就能提醒用户姿势不对。而第三个方法，则是为了之后外部的动画view能够做出类似于心电图一样的动画效果，而对外传出数据。 我还移除了检测成功的回调didFinishCaptureHeartRate:，换成了heartBeatingWithRate:，把成功时机的判断交给了外部，当外部的开发人员认为检测的心率足够稳定了，就可以返回YES来停止检测。 此外，我还移除了遇到错误的回调DidFailWithError:，因为我发现，几乎所有可能遇到的错误，都是发生在开始前的准备阶段，因此，我改成了在start方法中返回错误信息，并且枚举出错误类型作为code，封装成NSError。