【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


eastpiger
wild coder with all the love in the world
101 声望
1 粉丝
0 条评论
推荐阅读
精彩回顾 I Rust China Hackathon 2022 达坦科技组
由Rust中文社区举办的题为「Rust For Fun」的首届Rust China Hackathon已经顺利完赛。达坦科技作为本届Hackathon的协办方,赞助参与本次企业组赛道。达坦科技组的赛题有关Concurrent Indexing,我们邀请参赛者通...

Datenlord阅读 645

封面图
SCUT01在线协作白板技术解决方案
在七牛云校园黑客马拉松中,来自华南理工大学的SCUT01团队,为我们带来了UI精美、体验优秀的白板作品,在大赛中获得二等奖的好成绩。以下是这款在线协作白板的技术解决方案。背景疫情背景下,线上课堂、线上会议...

七牛云阅读 452

封面图
Chainlink 2022 年秋季黑客松获奖项目介绍
本次 Chainlink 黑客马拉松吸引了来自全球各地团队的 10,000 多个参赛者报名,最终提交浪超过 380 个项目,这两项数据均打破了过去的记录。Chainlink 提供了 30 多个小时的开发教程,让新一代的开发者能够开始在...

Chainlink阅读 424

Rust China Hackathon 2022 达坦科技组空中宣讲会来啦!
Rust China Hackathon 2022 即将来袭! 本届Hackathon的主题为「Rust For Fun」,分为「社区组」与「企业组」。达坦科技作为本届Hackathon的协办方,赞助参与本次企业组赛道,将基于Xline这个开源项目,就Concurr...

Datenlord阅读 305

White Rose设计与架构的想法分享
在七牛云校园黑客马拉松中,一款设计优秀、逻辑清晰的白板作品脱颖而出,获得第二名的好成绩,这就是来自郑州大学Since团队的White Rose白板,以下是他们的设计和架构分享。一、前言White Rose是参加七牛云hackat...

七牛云阅读 300

封面图
SIT-board 远程交互式白板的实现
来自上海应用技术大学的「SIT-board」团队,在七牛云校园黑客马拉松中勇夺冠军,以下是他们的参赛作品——SIT-board远程交互白板的实现过程。需求分析基本绘图功能作为一个在线协作白板,离线的本地化的白板是一切...

七牛云阅读 293

封面图
达坦科技邀请热爱挑战的你参加Rust China Hackathon 2022
Rust China Hackathon 2022 即将来袭! 本届Hackathon的主题为「Rust For Fun」,分为「社区组」与「企业组」。达坦科技作为本届Hackathon的协办方,赞助参与本次企业组赛道,将基于Xline这个开源项目,就Concurr...

Datenlord阅读 237

封面图
101 声望
1 粉丝
宣传栏