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

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

原理

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

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

优点:

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

缺点:

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

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

在iOS中模拟下效果

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

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