机器学习在移动端的使用，Tensorflow + BroadCast Extension(iOS原生录屏插件) 移动端爬虫解决方案

前言

传统的移动端爬虫一般是基于webView，通过注入JS的方式，获取登录后的cookie让服务端使用无头浏览器模拟登录状态爬取数据。

这种方式简单有效，但是对于有做反爬（IP限制，是否模拟器，是否处于异常环境）的网站，爬取难度大，甚至无法爬取。

业务驱动技术，在移动端爬虫的演进过程中经历了四个阶段

• cookie爬取（早期网站都没有反爬的机制）
• cookie + 本地爬取（部分网站出现反爬，无法通过服务端爬取，则本地获取HTML解析）
• cookie + 本地爬取 + 截图认证（针对反爬严重，无法通过webView登录采集的业务采用跳转APP，截图OCR的方式爬取）
• Tensorflow + BroadCast Extension（通过录屏获取实时界面内容，Tensorflow做图像识别获取关键页面内容，无视反爬机制）

什么是BroadCast Upload Extension?

BroadCast Upload Extension在iOS10的时候推出，当时只能in-APP BroadCast，即录制当前APP。

在WWDC2018中，苹果发布的ReplayKit2中升级了这个扩展，做到了iOS System BroadCast,即录制iOS系统界面，不限制与某个APP，但此时需要从控制中心唤起录屏，任然有些麻烦。

image-20191118182045340.png

在iOS12中，iOS又推出了RPSystemBroadcastPickerView类，可以在APP内通过按钮唤起控制中心的录屏选择界面。

image-20191118182105865.png

客户端流程：

image-20191118165847233.png

架构：

image-20191118151036879.png

• 录屏插件：iOS原生录屏插件，获取最新的录屏帧，传递给中间件。
• 中间件：保存插件传递的最新一帧内容，负责对帧对象的处理，消息的发送（心跳请求，帧请求）。
• APP端：负责对收到的图片对象进行classify，根据结果进行步骤匹配（是否需要服务端OCR，下一个关键页面是什么）。

​ 插件端不停的将最新视频帧给到中间件，中间件在上一次post请求完毕后获取最新的一帧转换成图片对象并发送，配置文件中设置字段控制上一次post请求完毕到下一次图片转换之间的dealy时间。

​ 将帧处理成图片后做一次图片压缩（TensorFlow对图片进行检测前也会做一次压缩，这里提前做掉），保证post请求的大小和速度。

​ 为了尽量低的内存占用（录屏插件最大可使用的内存50MB，超过就会崩），控制图片转换的频率，压缩图片请求，将图片转换放到autoreleasepool中。

录屏插件端

录屏插件使用的是iOS系统自带的BroadCast Upload Extension，可以在project - target + Application Extension中添加。

image-20191118173254281.png

添加后项目中会多一个BroadCast的target，自带一个SampleHandler类，用于接收系统录屏插件的回调。

#import "SampleHandler.h"

@interface SampleHandler()
@end

@implementation SampleHandler

//开始录屏
- (void)broadcastStartedWithSetupInfo:(NSDictionary *)setupInfo {
    NSLog(@"APP录屏开始");
}

//录屏中切换APP iOS > 11.2
- (void)broadcastAnnotatedWithApplicationInfo:(NSDictionary *)applicationInfo {
    NSLog(@"录屏中切换APP");
}

//录屏结束
- (void)broadcastFinished {
    NSLog(@"APP录屏结束");
}

//获取录屏帧信息
- (void)processSampleBuffer:(CMSampleBufferRef)sampleBuffer withType:(RPSampleBufferType)sampleBufferType {
    switch (sampleBufferType) {
        case RPSampleBufferTypeVideo://录屏图像信息回调
            //在这里将获取到的图像信息传递给中间类处理
            break;
            
        case RPSampleBufferTypeAudioApp://录屏音频信息回调
            // Handle audio sample buffer for app audio
            break;
        case RPSampleBufferTypeAudioMic://录屏声音输入信息回调
            // Handle audio sample buffer for mic audio
            break;
            
        default:
            break;
    }
}

@end

这一块做的事非常少，只是单纯的将获取到的视频帧信息传递给中间类，刷新中间类保存的最后一帧信息。

中间件

中间件负责做的事情比较多，状态同步，图片转换还要考虑内存占用问题。

• CMSampleBufferRef转UIImage对象
• 控制buffer转image的频率
• 通过HTTP请求的方式将图片发送到主APP
• 发送心跳包告知APP插件存活

//
//  MXSampleBufferManager.m
//  
//  buffer转UIImage对象
//  Created by joker on 2018/9/18.
//  Copyright © 2018 Scorpion. All rights reserved.
//

#import "MXSampleBufferManager.h"
#import 

#define clamp(a)                        (a>255?255:(a<0?0:a))

@implementation MXSampleBufferManager

+ (UIImage*)getImageWithSampleBuffer:(CMSampleBufferRef)sampleBuffer{
    CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
    CVPixelBufferLockBaseAddress(imageBuffer,0);

    size_t width = CVPixelBufferGetWidth(imageBuffer);
    size_t height = CVPixelBufferGetHeight(imageBuffer);
    uint8_t *yBuffer = CVPixelBufferGetBaseAddressOfPlane(imageBuffer, 0);
    size_t yPitch = CVPixelBufferGetBytesPerRowOfPlane(imageBuffer, 0);
    uint8_t *cbCrBuffer = CVPixelBufferGetBaseAddressOfPlane(imageBuffer, 1);
    size_t cbCrPitch = CVPixelBufferGetBytesPerRowOfPlane(imageBuffer, 1);

    int bytesPerPixel = 4;
    uint8_t *rgbBuffer = malloc(width * height * bytesPerPixel);

    for(int y = 0; y < height; y++) {
        uint8_t *rgbBufferLine = &rgbBuffer[y * width * bytesPerPixel];
        uint8_t *yBufferLine = &yBuffer[y * yPitch];
        uint8_t *cbCrBufferLine = &cbCrBuffer[(y >> 1) * cbCrPitch];

        for(int x = 0; x < width; x++) {
            int16_t y = yBufferLine[x];
            int16_t cb = cbCrBufferLine[x & ~1] - 128;
            int16_t cr = cbCrBufferLine[x | 1] - 128;

            uint8_t *rgbOutput = &rgbBufferLine[x*bytesPerPixel];

            int16_t r = (int16_t)roundf( y + cr *  1.4 );
            int16_t g = (int16_t)roundf( y + cb * -0.343 + cr * -0.711 );
            int16_t b = (int16_t)roundf( y + cb *  1.765);

            rgbOutput[0] = 0xff;
            rgbOutput[1] = clamp(b);
            rgbOutput[2] = clamp(g);
            rgbOutput[3] = clamp(r);
        }
    }

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(rgbBuffer, width, height, 8, width * bytesPerPixel, colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaNoneSkipLast);
    CGImageRef quartzImage = CGBitmapContextCreateImage(context);
    UIImage *image = [UIImage imageWithCGImage:quartzImage];

    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(quartzImage);
    free(rgbBuffer);

    CVPixelBufferUnlockBaseAddress(imageBuffer, 0);

    return image;
    
    
}

@end

主APP端

主APP端更多的是跟业务相关的操作

• 开启HTTP Serve接收请求（GCDAsyncSocket）
• 获取到图片进行TensorFlow识别，输出classify的结果。
• 根据识别结果和获取的配置信息进行match，目标关键帧则上传服务端OCR
• 录屏插件存活检测

模型怎么训练？

参考链接：https://codelabs.developers.google.com/codelabs/tensorflow-for-poets/index.html#0
可以用官网提供的训练工程来简单的训练模型。
demo工程中会带一个训练过的微信的模型。

使用效果

通讯录页面识别度77%

发现页面识别度97%

我的页面识别度100%

可以看到，在模型训练好的情况下，实时录屏的识别度是非常高的，配合服务端OCR可以获取任何出现在屏幕上的内容。

Demo

https://github.com/yushengchu/broadCastSpider