B 站人像在弹幕上方这种实现形式感觉好厉害，想了一下没想出实现思路，请教各位大佬。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1665 天前的主题，其中的信息可能已经有所发展或是发生改变。

一个 B 站的例子，

https://www.bilibili.com/video/BV1hJ411H7MH

这个应该是由 JS 做的识别吧，识别效果很接近 100%了。

识别

弹幕

人像

请教

14 条回复 • 2020-05-05 18:29:20 +08:00

guokeke

2020-05-04 19:53:44 +08:00

可能是 canvas 画三层，一层原视频，一层弹幕，一层人像。

jhdxr

2020-05-04 19:54:44 +08:00

识别是后台做的

azh7138m

2020-05-04 19:56:16 +08:00 via Android

https://developer.mozilla.org/en-US/docs/Web/CSS/mask
数据是后端直接给到的，客户端算这个不现实

FS1P7dJz

2020-05-04 19:57:02 +08:00

为啥非要 web 去做识别呢...

上传后服务器本身就需要对视频进行冲编码操作,顺路再识别下内容也是顺手的事情(甚至这一步里还可以进行其他诸如 AI 审核有关步骤)
服务器完成这些后,前台播放器只不过增加一些坐标,即可

heart4lor

2020-05-04 21:40:02 +08:00

https://github.com/foolwood/SiamMask

janus77

2020-05-04 22:00:04 +08:00

弹幕防挡。方案比较多了，也算成熟

ETiV

2020-05-04 22:18:53 +08:00 via iPhone

简单说说我的理解吧

1. opencv 找每一帧的人脸、人形
2. 导出形状数据成 svg
3. 用 svg 在前端做遮罩

cyrbuzz

2020-05-04 23:08:08 +08:00

@ETiV @janus77 @heart4lor @guokeke @azh7138m @FS1P7dJz @ETiV
感谢楼上的各位大佬，启发了对其他问题的新思路。

局部模糊也可以用同一种套路来实现了，感谢按钮出不来了= =。

yuzo555

2020-05-04 23:58:19 +08:00

肯定是后端做的呀，这种一个视频只需要后台处理一次就可以把蒙版数据保存下来分发给客户端。

VDimos

2020-05-05 00:20:50 +08:00 via Android

识别后台做的，识别用深度学习来做，已经比较成熟了，现成的模型结果都很好了。比如 mask rcnn，识别人物轮廓，然后输出 mask，前端拿到每一帧 mask 做处理就行

azcvcza

2020-05-05 07:22:45 +08:00

前端实时识别视频图片你要想想性能会变成什么样子

zhw2590582

2020-05-05 08:42:03 +08:00

前端单纯 css 遮罩，重的任务都是服务器搞的

will0404

2020-05-05 15:16:20 +08:00

当然是后端做。但，非要前端做也不是不可以，tensorflow.js 就行，性能不知道，我觉得应该可接受。

jendon

2020-05-05 18:29:20 +08:00

图像分隔，人体分隔，搜 bodypix 即可