项目官网地址：https://fly-barrage.netlify.app/；
👑🐋🎉如果感觉项目还不错的话，还请点下 star 🌟🌟🌟。
Gitee：https://gitee.com/fei_fei27/fly-barrage（Gitee 官方推荐项目）；
Github：https://github.com/feiafei27/fly-barrage；

1：人像免遮挡原理

首先了解一下 CanvasRenderingContext2D 中的 globalCompositeOperation 属性，人像免遮挡功能便是借助了这个属性。
当我们把这个属性设置为 ‘source-out’ 的时候，Canvas 会仅在不与现有画布内容重叠的地方绘制新图形，借助这个特性便能实现人像免遮挡，技术细节如下所示：

• 在离屏 Canvas 中完成弹幕的绘制；
• 判断当前是否有蒙版数据，如果有的话，在渲染 Canvas 中完成蒙版的绘制，并设置 globalCompositeOperation 属性；
• 将离屏 Canvas 中已经绘制好的弹幕绘制到渲染 Canvas 中，此时便能实现人像免遮挡功能；

实现这个功能的难点是获取视频每一帧中的人像蒙版数据，在真实的业务场景中，这个应该是后端直接传递给前端，前端直接渲染即可。
但一些特殊的视频资源，例如纯色背景的视频，前端就能完成每一帧人像蒙版数据的生成，这一块可以直接看项目完整 DEMO 中的代码，已经实现了。

2：使用 fly-barrage 实现人像免遮挡

使用 fly-barrage 库实现人像免遮挡涉及以下两个 API：

• beforeFrameRender 钩子函数，这个钩子函数会在每一帧弹幕渲染前被触发执行，可以在这个钩子函数中计算并设置蒙版数据；
• setMask，设置蒙版数据；

具体代码可以直接看 src/composables/portraitUnobstructed.ts。