AR红包Android端实现原理

前不久支付宝推出了AR红包的功能,风靡一时,最近刚好完成了这样的需求,特此整理分享,以求相互学习、共同进步。有鉴于公司接下来可能的商用,就不在这里贴源码了,仅简单说一下实现思路和原理。

话不多讲,先上流程图:

AR红包.png

藏红包

一、初始化相机

相机类android.hardware.Camera,但是很遗憾它过时了,Google在Android5.0后推出了更强大的android.hardware.camera2包,但是为了兼容低版本这里依然使用android.hardware.Camera类(有兴趣的同学可以通过Android Camera2 拍照入门学习这篇了解camera2的实现方式)。

  1. Camera.open()开启相机;
  2. Camera.getParameters()获取参数类并设置,缺少这一步相机的预览画面会变成横向的、模糊的。
    需要设置的内容:
    parameters.setPictureSize图片分辨率,
    parameters.setPreviewSize预览图像分辨率,这两项需要根据设备支持的列表具体计算这里不再赘述parameters.setPreviewFormat预览图像转码格式,
    parameters.setJpegQuality照片质量,这里并不需要拍照可以忽略,
    parameters.setFocusMode对焦模式,连续对焦需要加camera.cancelAutoFocus()
    camera.setDisplayOrientation预览画面方向,这里旋转90。

记得权限(Android6.0后需要动态申请。):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera.flash" />

二、绑定surfaceView

  1. 找到surfaceView后getHolder()获得surfaceHolder引用;
  2. holder.setType设置类型;
  3. holder.addCallback添加回调;
  4. Camera.setPreviewDisplay(holder)将surfaceHolder传入Camera;
  5. Camera.startPreview()开启预览图像。

三、获取一帧预览图像

Camera.setOneShotPreviewCallback(PreviewCallback cb)方法可以获取一帧预览图像,数据会返回到PreviewCallback 回调中的 onPreviewFrame(byte[] data,Camera camera)方法中,data即为帧数据。

四、预处理图像

首先明确一点,处理图像和接下来的其他耗时计算都要放到子线程中,不要问我为什么,编译器会告诉你答案。onPreviewFrame方法中的data并不能直接直接转为bitmap,需要先进行转码:

        Camera.Size size = camera.getParameters().getPreviewSize();
        YuvImage image = new YuvImage(data, ImageFormat.NV21, size.width, size.height, null);
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        image.compressToJpeg(new Rect(0, 0, size.width, size.height), 80, stream);
        Bitmap bmp = BitmapFactory.decodeByteArray(stream.toByteArray(), 0, stream.size());

五、奇数帧?偶数帧?

为什么要分奇数偶数呢?当做好相机的准备工作后,要藏红包,实际上需要解决的就是排除不需要的图像,首先要做到的就是舍弃用户移动时获取的图像,最先的想法是利用加速度传感器,但是随后发现手机匀速移动的时候是没有加速度的,而这时获取的图像仍需舍弃。后来找到的解决方案是:不停获取帧图像,比较相邻两帧的相似度,当相似度达到某个阈值时视为相似,连续数次比较皆为相似可知用户所对位置即用户想要藏红包的地方,将此时获取的帧图保存即可。

  • 设置一个计数器记录获取帧图的次数,计数器%2即可区分奇偶;
  • 奇数帧存到图1,偶数帧存图2,比较图1图2;
  • 不足两图、比较不相似就获取新的一帧,即可实现不停的比较相邻两帧图像。

六、相似?

比较相似的方法网上有挺多,有直接拿像素比较的,有处理成灰度图像比较的,有转成哈希值比较的,比较方法不同得到的数值也不同,所要设定的阈值也随之改变,具体看需求能达到目的就好。细心的同学会发现支付宝在藏红包的时候并不是所有地方都可以藏,有些没有意义、过度单调的地方是没办法藏的,这里实现的方式是计算图片像素“丰富度”(缺少图像学知识暂且这么叫吧)。得到图片所有像素点的值,去除重复,所得到的所有不同像素值的个数越小说明图片颜色越“单调”,然后根据这个个数值设置阈值进行判断。

七、确定红包位置

得到满足要求的帧图后,停止获取帧图,停止相机预览Camera.stopPreview(),将图片直接上传服务器或者转成哈希值传给服务器,也可以同时传些位置坐标等参数,这个看具体需求,这些数据即为所藏红包的“指纹”。

找红包

找红包相对简单,相同的逻辑不在赘述,只需要:

  1. 获取已藏红包的位置图片,
  2. 与获取的预览帧图比较,
  3. 不相似继续取帧图,相似停止取帧,即找到红包。

可以根据需求增加位置坐标范围判断和用户身份判断。

一点思考

首先我们对比下扫描二维码和扫描AR红包的实现原理:

二维码与找红包对比.png

不难发现,整个扫描流程十分相似。其实在我看来,AR红包可以理解为是一个特殊的“二维码”,只不过这个“二维码”上不再是特殊的几何图形,而是一张图片。支付宝“扫一扫”中左边是“二维码”右边是“AR”,有力地支持了我的逻辑。那么按照这个逻辑再来看整个AR红包,可以发现“藏红包”其实就是一个生成“二维码”的过程,“找红包”自然就是扫描“二维码”了。

那么AR红包又与二维码有什么区别?

我们知道二维码是按照一定规律生成的特殊几何图形,可以进行编码解析,即二维码中是内含信息的;而AR红包实际上只是一张图片,不包含信息。这也是为什么支付宝要通过红包地图和用户的方式将AR红包区分开的原因,否则如果两个用户在同一个位置藏了红包,扫描时将无法区分它们。既然如此那为什么还要有AR红包的存在呢?

AR红包相对于二维码的优缺点

优点:

  • AR红包藏匿于现实生活中。不同于二维码:“我是一个二维码,你们快来扫我呀O(∩_∩)O~~”,只要你不公开你的红包位置图,没人知道这有红包,当然你也可以让部分人看到。妈妈再也不用担心儿子的私房钱被老婆发现了!
  • AR红包来源于现实生活。所以就省去了张贴“二维码”和更换“二维码”的麻烦,同时也减少了二维码给环境带来的污染。试想一下:今天《金刚》首映扫“帝国大厦”可获得电影票一张,扫“央视大裤衩”看今日新闻是不是很cooool~
  • AR红包可以一地儿多用。同样一个“央视大裤衩”,央视扫是新闻联播,网易扫是网易头条,UC扫是UC震惊。
  • 良好的用户体验。举个栗子:相比于扫公司logo打卡和扫公司logo上的二维码打卡,我选择前者。

缺点:

  • 本身不包含信息,需要其他参数辅助。没有位置坐标和用户信息,AR红包几乎无法运行。
  • 人不能俩次踏入同一条河流。你藏红包的地方可能随时间变化再也无法复现,比如碎掉的存钱罐、昨天的夕阳和年少的你。
  • 算法不够完善。AR红包刚出现不久,尚没有统一的算法,每种比较的算法根据需求不同结果相差很大,识别效果和效率不够完美,无法像二维码一样瞬间识别,还有待进一步完善。

实现AR红包的过程中,让我深深的感到对图像处理知识的缺乏,这篇文章权当总结,一些浅见难免有疏忽纰漏,还往大家不吝赐教,共同进步。

参考:

Android二维码扫描开发(一):实现思路与原理
Android实现图片相似度
Android 手把手带你玩转自定义相机
Android Camera2 拍照入门学习

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,646评论 4 366
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,979评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,391评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,356评论 0 215
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,740评论 3 293
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,836评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,022评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,764评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,487评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,728评论 2 252
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,200评论 1 263
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,548评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,217评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,134评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,921评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,919评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,766评论 2 274

推荐阅读更多精彩内容