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

V2EX = way to explore

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

For Existing Member Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2190 days ago, the information mentioned may be changed or developed.

一个 B 站的例子，

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

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

识别

弹幕

人像

请教

14 replies • 2020-05-05 18:29:20 +08:00

guokeke

May 4, 2020

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

jhdxr

May 4, 2020

识别是后台做的

azh7138m

May 4, 2020 via Android

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

FS1P7dJz

May 4, 2020

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

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

heart4lor

May 4, 2020

https://github.com/foolwood/SiamMask

rb6221

May 4, 2020

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

ETiV

May 4, 2020 via iPhone

简单说说我的理解吧

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

cyrbuzz

May 4, 2020

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

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

yuzo555

May 4, 2020

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

VDimos

May 5, 2020 via Android

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

azcvcza

May 5, 2020

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

zhw2590582

May 5, 2020

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

will0404

May 5, 2020

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

jendon

May 5, 2020

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