实习期间有个需求,须要前端调用算法模型,封装成npm包,供视频会议组去用,从而在视频会议中实现背景虚化,背景替换功能。后续可能会进一步加入一些好玩的功能,如面部特效(胡子,一字眉),头发颜色替换等。css
实现效果应相似于下面这样html
腾讯会议界面:前端
为了给需求方演示,先采用google的TensorFlow.js的 BodyPix 模型作了一个小demo,先实现背景虚化和背景替换功能,模型的效果较为满意,显示画面流畅。vue
TensorFlow.js 是一个 JavaScript 库。 咱们能够借助于它,来直接用 JavaScript 去建立新的机器学习模型和部署现有模型。对于前端人员入门机器学习十分友好。css3
TensorFlow.js 提供了不少开箱即用的预训练模型(见下图):
这里选用了图像处理类别里面的BodyPix模型git
这是BodyPix的官方演示demo https://storage.googleapis.co...github
demo里的功能对咱们的需求来讲有些过于复杂,也没有背景替换功能。所以,我本身写了一个针对于背景虚化,背景替换场景的demo。算法
drawBokehEffect
方法;模型没有现成的背景替换的接口,用canvas的绘制方法对模型的toMask
方法返回的遮罩对象 (由前景色&背景色的像素点数组,其中前景色表明人像区域,背景色表明其余区域) 进行了一些处理,从而实现背景替换(后面会详细介绍)。先上一下最终的效果:npm
1.起始界面:视频在开启摄像头后会在下方展现,拍的照片会展现在视频的下方canvas
有两种方法
<!-- Load TensorFlow.js --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script> <!-- Load BodyPix --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>
yarn install
安装依赖便可)$ npm install @tensorflow/tfjs 或 yarn add @tensorflow/tfjs $ npm install @tensorflow-models/body-pix
body-pix有两种算法模型架构,MobileNetV1 and
ResNet50。
经本地尝试,MobileNetV1启动速度很是慢,对GPU的要求比较高,不适合通常电脑及移动设备,这里只考虑 MobileNetV1
初始时调用 loadAndPredict 方法预先加载模型,参数预设为:
model: { architecture: 'MobileNetV1', outputStride: 16, //8,16 值越小,输出分辨率越大,模型越精确,速度越慢 multiplier: 0.75, // 0.5,0.75,1 值越大,层越大,模型越精确,速度越慢 quantBytes: 2 /* 1,2,4 此参数控制用于权重量化的字节 '4. 每一个浮点数 4 个字节(无量化)。最高精度&原始模型尺寸', '2. 每一个浮点数 2 个字节。精度略低,模型尺寸减少 2 倍', '1. 每一个浮点数 1 个字节。精度下降, 模型尺寸减小 4 倍' */ }, async loadAndPredict(model) { // 加载模型 this.net = await bodyPix.load(model); }
官网中的示例:
其中,net.segmentPerson(img)
返回的是对图像像素分析的结果, 以下图,
采用的现有的bodyPix.drawBokehEffect
方法,传入要虚化的图片和要绘制的canvas对象,segmentation
以及一些虚化程度的参数,便可将结果绘制到传入的canvas。
虚化背景代码:
async blurBackground () { const img = this.$refs['video'] // 获取视频帧 const segmentation = await this.net.segmentPerson(img); bodyPix.drawBokehEffect( this.videoCanvas, img, segmentation, this.backgroundBlurAmount, this.edgeBlurAmount, this.flipHorizontal); if(this.radio===2) { // 当选中背景虚化时,用requestAnimationFrame不断调用blurBackground requestAnimationFrame( this.blurBackground ) } else this.clearCanvas(this.videoCanvas) // this.timer = setInterval(async() => { // this.segmentation = await this.net.segmentPerson(img); // bodyPix.drawBokehEffect( // this.videoCanvas, img, this.segmentation, 3, // this.edgeBlurAmount, this.flipHorizontal); // }, 60) },
补充:
这里须要不断的对视频帧进行处理,绘制到canvas,才能保证流畅的体验。
最初设置了一个定时器,每隔60ms就执行相应方法,可是效果并很差,能明显感到卡顿,性能也很差。因而我看了一下bodyPix的demo代码,里面用了 window.requestAnimationFrame
来替代定时器。将timer换为此方法后,性能和流畅度有了很大的提高。
bodyPix没有提供现成的背景替换的方法,但有个方法是返回一个遮罩对象,人像部分为传入的前景色,背景部分为传入的背景色(见下图)
能够用canvas的 globalCompositeOperation
属性设置要在绘制新形状时应用的合成操做的类型, 对遮罩进行处理来达成替换背景的目的。
globalCompositeOperation
有很是多的类型,供咱们在以前的画布上 设置新图形的画上去时的操做(如并交差操做,绘制的层级,色调和亮度的保留),默认值为source-over
, 在现有画布上下文之上绘制新图形。
这里用到了source-in
和destination-over
souce-in用于绘制要替换的新背景图。
事先将人像部分(前景色)设为透明,globalCompositeOperation 为 source-in 类型时,背景图将只在背景色区绘制,以下图:
接下来只需切换为destination-over
,将人像绘制到画布现有内容后面便可。这样背景会挡住以前的背景,而人像将显示出来。
背景替换代码:
async replaceBackground() { if(!this.isOpen) return const img = this.$refs['video'] const segmentation = await this.net.segmentPerson(img); const foregroundColor = { r: 0, g: 0, b: 0, a: 0 } // 前景色 设为彻底透明 const backgroundColor = { r: 0, g: 0, b: 0, a: 255 } // 背景色 let backgroundDarkeningMask = bodyPix.toMask( segmentation, foregroundColor, backgroundColor ) if (backgroundDarkeningMask) { let context = this.videoCanvas.getContext('2d') // 合成 context.putImageData(backgroundDarkeningMask, 0, 0) context.globalCompositeOperation = 'source-in' // 新图形只在重合区域绘制 context.drawImage(this.backgroundImg, 0, 0, this.videoCanvas.width, this.videoCanvas.height) context.globalCompositeOperation = 'destination-over' // 新图形只在不重合的区域绘制 context.drawImage(img, 0, 0, this.videoCanvas.width, this.videoCanvas.height) context.globalCompositeOperation = 'source-over' // 恢复 } if(this.radio===3) { requestAnimationFrame( this.replaceBackground ) } else { this.clearCanvas(this.videoCanvas) } },
镜像没有用到bodyPix的方法,尽管它为咱们提供了这样的操做
直接是经过css3实现的,借助 vue 的 v-bind 动态切换类
<canvas v-bind:class="{flipHorizontal: isFlipHorizontal}" id="videoCanvas" width="400" height="300"></canvas> .flipHorizontal { transform: rotateY(180deg); }
开启摄像头: https://www.cnblogs.com/ljx20...
TensorFlow.js模型:https://github.com/tensorflow...
canvas:https://developer.mozilla.org...
JS 统计函数执行时间:https://blog.csdn.net/K346K34...
开启摄像头: https://www.cnblogs.com/ljx20...
bodyPix实现实时摄像头背景模糊/背景替换 https://www.tytion.net/archiv...