refactor: virtual background drawing

This commit is contained in:
Joao Victor 2021-12-08 16:24:34 -03:00
parent 2f49f0720c
commit b25dd800b6

View File

@ -18,6 +18,52 @@ import {
const blurValue = '25px';
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
if (arguments.length === 2) {
x = y = 0;
w = ctx.canvas.width;
h = ctx.canvas.height;
}
// Default offset is center
offsetX = typeof offsetX === 'number' ? offsetX : 0.5;
offsetY = typeof offsetY === 'number' ? offsetY : 0.5;
// Keep bounds [0.0, 1.0]
if (offsetX < 0) offsetX = 0;
if (offsetY < 0) offsetY = 0;
if (offsetX > 1) offsetX = 1;
if (offsetY > 1) offsetY = 1;
const iw = img.width,
ih = img.height,
r = Math.min(w / iw, h / ih);
let nw = iw * r,
nh = ih * r,
cx, cy, cw, ch, ar = 1;
// Decide which gap to fill
if (nw < w) ar = w / nw;
if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh;
nw *= ar;
nh *= ar;
// Calc source rectangle
cw = iw / (nw / w);
ch = ih / (nh / h);
cx = (iw - cw) * offsetX;
cy = (ih - ch) * offsetY;
// Make sure source rectangle is valid
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cw > iw) cw = iw;
if (ch > ih) ch = ih;
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}
class VirtualBackgroundService {
_model;
@ -104,12 +150,15 @@ class VirtualBackgroundService {
this._outputCanvasCtx.globalCompositeOperation = 'destination-over';
if (this._options.virtualBackground.isVirtualBackground) {
this._outputCanvasCtx.drawImage(
drawImageProp(
this._outputCanvasCtx,
this._virtualImage,
0,
0,
this._inputVideoElement.width,
this._inputVideoElement.height
this._inputVideoElement.height,
0.5,
0.5,
);
} else {
this._outputCanvasCtx.filter = `blur(${blurValue})`;