最近晚上一直在学习算法和数据结构，人菜瘾还大，一直被虐；特别是一些常用的算法写的想哭。

刷累了就看看B站视频，发现B站有个防人物被弹幕遮挡的功能，感觉挺有意思的。

原理

看到这个效果，八九不离十猜到是 mask 作用。前端正常播放一个视频，然后在视频上发加一个 空心的 mask，这样弹幕就无法在空心的地方显示，就会有一个类似钻过去的效果。

那么就是这个mask是怎么计算出来的呢？看了下前端的网络，B站应该通过一些算法，将视频中人物的描边在服务端计算好，然后前端不断请求修改这个 mask 的 path。

优点：

  • 前后端通力配合，降低了前端开发难度

缺点：

  • 如果请求这个 mask，网络异常了或者延迟，那么可能会出现反面效果

思考下：能不能把 mask信息藏到视频帧的扩展信息中呢？🤔

在iOS中模拟下效果

我在iOS使用系统的人脸追踪CIFaceFeature和CALayer，模拟了下B站的效果。只能防止脸被遮住… 而不是像B站一样人体描边。

具体的实现不细写了，参考demo