【hackathon】OneMoreFace做品小计

本文首发我的博客 blog.eastpiger.com。SF留档。

例行废话

1024那天，应wph的邀（guai）约（pian）带着小伙伴们一行七人到杭州参加SegmentFault Hackathon。这是我第一次参加这种活动，估计他们六个也是。幸亏半路抓来了一个同校研究僧学长垫背。学长是参加过相似比赛的，好歹能带带咱们。当时是这么想的——最后事情也就是这么发展的。

Hackathon的主题是“科技改变生活”，通过咱们的讨论，咱们一致认为，这个题目并无什么卵用。固然也不是彻底没有用处，好歹指导咱们把脑洞开向了一个词“吃喝玩（piao）乐（du）”。

因此，OneMoreFace项目就这么诞生了。

Describe

咱们官方提交的项目说明是这样的：

基于面部识别和 WebRTC 的多人同步匿名娱乐聊天服务。提供多人同时在线，文本发送，视频识别覆盖个性化数字面具等功能。本项目使用了 clmtrackr 项目和实时猫 WebRTC 大厅服务。

其实他是这样的

本项目的目的在于在现有的匿名交（yue）友（pao）平台之上，添加一种既能保证安全性和隐私性，又能像面对面沟通同样能够准确传达表情和情感的技术手段。也就是说，数字换脸，顺带同步真实表情的效果。

技术关键词

两个实现关键点：

• 在线视频通信

• 图像处理

对应了两个咱们最终选择的技术手段：

• WebRTC

• 开源项目clmtrackr

前者是Google提出的在线流媒体传输的框架，这个技术目前应该仍是Draft状态，不过基本功能Webkit等一干内核应该都支持得能够（因而咱们就被坑了……）

后者是学长推荐给咱们的一我的脸定点识别的开源框架，这个框架实际上已经作好了很大一部分人脸识别以及三维建模的工做，甚至已经提供了换脸这个基本demo的样式，对于时间要求比较紧的咱们来讲确实颇有用处。

实现流程

面部处理交给scientist和makeapp作去了，表示并不知道他们作了什么……

我主要是作二者的结合工做，一来是先调通WebRTC流通信，二来是接入咱们面部的处理工做，最后争取让整个项目看起来还像是那么回事。

调WebRTC其实蛮简单，咱们直接调用了实时猫的技术就实现了双人对通的效果。因为后面的一些情况，我实际上在现场把实时猫的代码反混淆以后差很少从新读了一遍了，总体感受他的前端API差很少就是WebRTC上封装了简单地一层，实际上的这种封装和直接调用WebRTC进行通信没多大差异。固然咱们看中他的缘由也是有的，好比指望直接拿他的Demo代码修改修改就能够运行，虽然过后证实咱们想多了……不过使用实时猫也为咱们提供了一些方便，不用单独去部署后端服务，Session和Token的机制实时猫都已经作好了，这在当时那种【时间短】【网络不稳定】【我懒】的特殊状况下仍是很是有用的。

实时猫官方给的Demo仍是0.1版本的，很是不稳定和不许确，他给的多用户链接甚至是手工建立两个页面手工写入Token来实现的。而图像的Stream则直接来自于MediaDevices.getUserMedia()函数，并简单粗暴的输出到LocalVideo标签。clmtrackr那边也并不顺利，他的Demo代码兼容性实际上能够认为就是没有……对多图同步处理毫无办法，也与WebRTC很难接入。

基于上述的问题，我继承了在中科院无线中心实习的时候练就的一项粗暴的思路，劳资重构一个数据类型干掉他╭(′▽`)╯

构造一个数据类型Clmtrackr，内部仿照Clmtrackr的面部模拟Demo封装了面部替换的构建逻辑，坚决地向着松耦合的方向迈步，也就为了最终可以实现多视频独立处理提供了先决条件了。

以后即是在实时猫的Demo代码之上作修改，先是用Clmtrackr类替代了localStream.play("localMediaContainer");这句本地播放的语句，其次基本从新修改了“stream-subscribed”的event函数。

接下来就画画前端咯，加一下msgstream的功能咯，而后就哈哈哈哈得作完咯……

而后咱们就如愿以偿的挂了……

主要的难点有几个，首先，是根据咱们的想法，确定是要作好私密性为上，那么最基本的想法就是客户端将本身的视频数据识别处理以后再广播出去。这样咱们就须要HTMLCanvasElement.captureStream()这个函数帮助咱们将canvas转换到tream以后发给广播。然而……特么这个函数竟然都是Not supported……

最终的解决方案其实是咱们特别特别不爽的，也就是实际发送的是每一个人的摄像头获取的原始图像，广播出去后接受方在本地进行匹配和识别。这致使了严重的性能问题、没法承担过多人数同时在线、疯狂的内存泄露.

第一个问题致使咱们卡了两个多小时，甚至一度准备更换方向。然然后面这个更是一个大坑，简单来讲，就是实时猫的“stream-message-received”事件收不到数据，一开始我觉得是发送函数有问题，又怀疑是网络问题，还怀疑是否是必须单独去开messagestream来传输数据，所有无效。也就促成我直接去撸实时猫的前端SDK源代码去了~>_<~

看到了“_message”这个内部事件……

打算调试一下这个事件看看有啥……

因而我收到了“session-message-received”事件……

……

┏ (゜ω゜)=☞你不走、我走！

本宝宝不开心了！

然而并无什么卵用……抱怨完了继续滚去码代码……

TimeStone

• 1024 下午10时 初步定下开发方向

• 1024 下午11时 服务器配置以及逻辑跑路

• 1024 下午100时 github提交-实现了WebCRT基本视频直播

• 1024 下午110时 github提交-实现WebCRT与Clmtrackr的识别处理联动

• 1025 早10时 github提交-Clmtrackr封装完成，WebCRT大厅完成

• 1025 早101时 github提交-基本完成前端

• 1025 早1010时 github合并mask数据

Information

• GITHUB

• eastpiger

• Geek Pie @ ShanghaiTech