背景
实习期间有个需求,需要前端调用算法模型,封装成npm包,供视频会议组去用,从而在视频会议中实现背景虚化,背景替换功能。后续可能会进一步加入一些好玩的功能,如面部特效(胡子,一字眉),头发颜色替换等。
实现效果应类似于下面这样
腾讯会议界面:
为了给需求方演示,先采用google的TensorFlow.js的 BodyPix 模型做了一个小demo,先实现背景虚化和背景替换功能,模型的效果较为满意,显示画面流畅。
TensorFlow.js 是一个 JavaScript 库。 我们可以借助于它,来直接用 JavaScript 去创建新的机器学习模型和部署现有模型。对于前端人员入门机器学习十分友好。
TensorFlow.js 提供了很多开箱即用的预训练模型(见下图):
这里选用了图像处理类别里面的BodyPix模型
这是BodyPix的官方演示demo https://storage.googleapis.co...,
demo里的功能对我们的需求来说有些过于复杂,也没有背景替换功能。因此,我自己写了一个针对于背景虚化,背景替换场景的demo。
介绍
- 思路: 在浏览器中打开摄像头,获取视频流图片,调用tensorflow.js的 body-pix 模型的方法,来绘制结果。 其中背景虚化比较容易实现,可直接用模型提供的
drawBokehEffect
方法;模型没有现成的背景替换的接口,用canvas的绘制方法对模型的toMask
方法返回的遮罩对象
近期评论