声网2020春季RTC编程挑战赛总结

项目简介

概述

2020年3月参加了声网RTC春季编程挑战赛，为此开发了一款Android视频聊天应用。该应用用于陌生人视频聊天，通过动态马赛克特效、话题匹配等功能减少视频聊天的紧张感和为用户提供聊天话题避免尴尬。

效果图

|
|

—|—|—
初始状态 | 匹配中 | 聊天

主要功能

该应用分为匹配和聊天两个页面，匹配界面为增加交互体验设计了一个下落和上浮的动画；聊天页面会将视频进行动态马赛克处理，马赛克的级别取决于好感度。同时话题机制可以为聊天双方增加话题避免聊天时的尴尬。

匹配页面

匹配页面用于陌生人聊天匹配，初始化状态下面会调用用户的前置摄像头并显示在屏幕中心的圆形头像里，点击匹配按钮时，头像下落，同时陌生人的圆形头像和匹配中的loading图标一起下落。取消匹配时头像和loading图标上浮，直至移出屏幕，仅留下本人的视频头像。匹配成功则跳转进入聊天页面。
[video muted autoplay = autoplay
mp4=https://file.2fun.xyz/2020/05/20200517match.mp4\\][/video] ### 聊天页面

视频聊天页面分为三个区域，分别是对方视频区，本人视频区和话题区。

视频区

无论是对方视频预览区还是本人视频预览区，都需要对画面进行动态马赛克处理，而马赛克的等级取决于聊天双方的好感度值。 - 马赛克特效
视频的马赛克处理原理是对YUV数据源进行处理，然后将处理后的YUV数据渲染到SurfaceView上面，关于马赛克的具体实现细节可以参考我的另外一篇文章，这里不再赘述了。顺带提一下声网的RTCSDK很好用，对于数据采集和渲染无需过多关心，仅需要实现一个自己的特效算法即可。

• 好感度 由于视频分为个人和对方，所以这里的好感度是有两个值的，分别是：我对TA的好感度和TA对我的好感度，前者影响本人视频区的马赛克等级，后者影响对方视频区的马赛克等级，好感度越高，马赛克等级越低，直至以真实画面展示。好感度初始值为60，每秒减1，降到0则聊天结束了。通过双击屏幕可以增加我对TA的好感度，

话题

陌生人聊天最担心的就是聊不起来，陷入尴尬，所以我们引入了话题机制。如果用户A与B进行匹配聊天，当A点击具体的话题之后，B的界面会显示一条通知：“对方选择了XX话题”。A与B选择一样的话题会用粉红色高亮出来。当A点击了刷新话题之后，B的话题也会刷新。在开发这个功能的时候我们小组内部也讨论了很久，主要在于直接刷新对方的话题是否会让对方体验不好。最终我们还是选择了这套方案，原因是我们的目的是让有共同话题的人聊起来，刷新话题说明没有自己感兴趣的，如果好感度降至了0仍然没有刷新到感兴趣的话题，那说明两个人本就兴趣不一致。

缘起

聊到这里了在顺带说一下为什么做这个项目吧，一开始我在鸿洋大神的公众号上面刷到了声网RTC大赛的事情，于是把链接转发给了周神问他要不要搞一搞，周神很爽快的答应了。周神是我上一家公司的主管，属于稀有等级的好领导，不过后来公司裁员。。。。。。一言难尽。

有了技术支撑之后，还需要一个做UI设计的同学，于是我把链接转发给了朝怡。我们合作过很多次了，她是一个很有才华的同学，这次的产品设计和UI设计都靠她完成的。周神还夸她是一个宝藏女孩！

Just for fun！

有了大神助力，一切就顺利多了，在选题方面，我准备了两个方向，一个是视频面试题材，另外一个是8bit视频聊天。前者在目前的疫情期间可以有一定的实际作用，后者则是因为本人喜欢像素风的游戏，觉得这个很好玩。最后大家选择了8bit视频这个题材，因为参加比赛的初衷没有想过会得奖，所以就怎么好玩怎么弄了。

项目开源

整个项目使用到了声网的视频聊天SDK和实时消息SDK，用于进行视频聊天和话题信息同步等。目前已经开源，具体地址见
[Github:likemosaic](https://github.com/AgoraIO-Community/RTC-
Hackathon/tree/master/SDKChallengeProject/likemosaic) 。有兴趣的朋友也可以扫码下载APK进行体验。