refactor: virtual background drawing
This commit is contained in:
parent
2f49f0720c
commit
b25dd800b6
@ -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})`;
|
||||
|
Loading…
Reference in New Issue
Block a user