项目官网地址：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。
