B站防遮挡弹幕实现

date

Apr 8, 2023 02:17 AM

type

status

slug

summary

前言

B站是一个以视频为主的社交媒体平台，其中一大特色就是弹幕，即用户可以在视频上方实时发送评论，与其他观众互动。弹幕可以增加观看视频的乐趣，也可以反映出视频的热度和受欢迎程度。然而，弹幕也有一个缺点，就是可能会遮挡住视频中的重要内容，影响观看体验。为了解决这个问题，B站推出了一种智能防挡弹幕技术，可以让弹幕自动躲避人形区域，达到弹幕不挡人的效果。

本文将介绍B站智能防挡弹幕技术的原理和实现方法，并展示如何利用 tensorflow.js 和 vue3 在前端开发一个简单的示例应用。

原理

用 -webkit-mask-image 加一张人物的透明图片就直接搞定了。但是这张图片从哪里来？如果一帧一帧地从后端获取，那么服务器的压力一定非常大，这个功能又是一个很小的功能，服务端处理可能不是一个最佳的解决方案，所以主要是使用 tensorflow.js 来生成人物的透明图片。

整体实现思路

视频播放

通过 requestAnimationFrame 方法一帧一帧地执行 tensorflow.js 里面的函数获取人物透明图像

并通过 canvas 绘画导出成图片

设置图片的参数为 webkit-mask-image:url(${Base64});-webkit-mask-size:${width}px ${height}px;

引入

创建人体分割模型

模型有 landscape（144x256 x3 ）和 general（256x256 x3）两种，尺寸越大，识别越准确，同时性能也更差

生成图片

将图像绘制到画布上，并绘制包含具有指定不透明度的掩码的 ImageData；ImageData 通常使用 toBinaryMask 或 toColoredMask 生成。

canvas 要绘制的画布。

image 应用口罩的原始图像。

maskImage 包含掩码的图像数据。理想情况下，这应该由 toBinaryMask 或 toColoredMask。

maskOpacity 在图像顶部绘制口罩时的不透明度。默认值为 0.7。应该是 0 和 1 之间的浮动。

maskBlurAmount 模糊面具的像素数量。默认值为 0。应该是 0 到 20 之间的整数。

flipHorizontal 如果结果应该水平翻转。默认为 false。

将实时生成的图片放到画面上

这里有个注意的点，所有的图片生成以后都要加入到缓存中，如果不加载到缓存中，会导致 mask-image 失效，因为图片还没有加载到页面上，新的图片已经添加上去了，会导致图片一直是个空白。

这里是我编写的代码地址，我不知道为啥 vue3 项目使用 Dplayer 会不加载弹幕