@pexip/media-processor 20.3.4 → 21.0.0

package/dist/main/video/canvasTransform.js

@@ -1,27 +1,43 @@
-import { PROCESSING_HEIGHT, PROCESSING_WIDTH, FOREGROUND_THRESHOLD, BACKGROUND_BLUR_AMOUNT, EDGE_BLUR_AMOUNT, MASK_COMBINE_RATIO, } from '../../common/constants';
+import { PROCESSING_HEIGHT, PROCESSING_WIDTH, FOREGROUND_THRESHOLD, BACKGROUND_THRESHOLD, BACKGROUND_BLUR_AMOUNT, EDGE_BLUR_AMOUNT, MASK_COMBINE_RATIO, SIGMA_RANGE, SIGMA_SPACE, PERSON_CENTER, EXCLUDE_BYSTANDERS, MORPH_PASS, MORPH_DILATE_RADIUS_PX, MORPH_ERODE_RADIUS_PX, LIGHT_WRAP_INTENSITY, DOWN_SAMPLE_FACTOR, LIGHT_WRAP_TIGHTNESS, LIGHT_WRAP_BLUR_AMOUNT, LIGHT_WRAP_EDGE_BAND, } from '../../common/constants';
 import { createCanvasRenderUtils } from '../../common/canvasRenderUtils';
-import { clamping, createObjectUpdater } from '../../common/utils';
+import { clamping, createObjectUpdater, nearestPowerOfTwo, } from '../../common/utils';
 import { assert } from '@pexip/utils';
 const clampInRangeFrom0To1 = clamping(0, 1);
 const clampInRangeFrom0To9 = clamping(0, 9);
-export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height = PROCESSING_HEIGHT, foregroundThreshold = FOREGROUND_THRESHOLD, backgroundBlurAmount = BACKGROUND_BLUR_AMOUNT, edgeBlurAmount = EDGE_BLUR_AMOUNT, maskCombineRatio = MASK_COMBINE_RATIO, backgroundImageUrl = '', effects = 'none', backend = 'webgl', selfManageSegmenter, ...options } = {}) => {
+export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height = PROCESSING_HEIGHT, foregroundThreshold = FOREGROUND_THRESHOLD, backgroundThreshold = BACKGROUND_THRESHOLD, backgroundBlurAmount = BACKGROUND_BLUR_AMOUNT, edgeBlurAmount = EDGE_BLUR_AMOUNT, maskCombineRatio = MASK_COMBINE_RATIO, backgroundImageUrl = '', sigmaSpace = SIGMA_SPACE, sigmaRangeLo = SIGMA_RANGE[0], sigmaRangeHi = SIGMA_RANGE[1], effects = 'none', backend = 'webgl', selfManageSegmenter, personCenter = PERSON_CENTER, excludeBystanders = EXCLUDE_BYSTANDERS, morphPass = MORPH_PASS, morphErodeRadiusPx = MORPH_ERODE_RADIUS_PX, morphDilateRadiusPx = MORPH_DILATE_RADIUS_PX, lightWrapIntensity = LIGHT_WRAP_INTENSITY, downSampleFactor = DOWN_SAMPLE_FACTOR, lightWrapTightness = LIGHT_WRAP_TIGHTNESS, lightWrapBlurAmount = LIGHT_WRAP_BLUR_AMOUNT, lightWrapEdgeBand = LIGHT_WRAP_EDGE_BAND, ...options } = {}) => {
     const props = {
         segmenter,
         processingWidth: width,
         processingHeight: height,
-        foregroundThreshold,
-        backgroundBlurAmount,
-        edgeBlurAmount,
-        utils: undefined,
-        effects,
-        maskCombineRatio,
         backgroundImage: options.backgroundImage,
         status: 'new',
-        backgroundImageUrl,
         outputCanvas: options.outputCanvas,
         outputDelegate: options.outputDelegate,
-        backend,
         unsubscribe: null,
+        utils: undefined,
+        renderOptions: {
+            foregroundThreshold,
+            backgroundThreshold,
+            backgroundBlurAmount,
+            edgeBlurAmount,
+            backgroundImageUrl,
+            effects,
+            backend,
+            maskCombineRatio,
+            sigmaRangeHi,
+            sigmaRangeLo,
+            sigmaSpace,
+            personCenter,
+            excludeBystanders,
+            morphPass,
+            morphErodeRadiusPx,
+            morphDilateRadiusPx,
+            lightWrapIntensity,
+            downSampleFactor,
+            lightWrapTightness,
+            lightWrapBlurAmount,
+            lightWrapEdgeBand,
+        },
     };
     const updateProps = createObjectUpdater(props);
     const handleContextRestored = () => {
@@ -47,15 +63,6 @@ export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height =
         };
     };
     const processInput = async (input) => {
-        const renderOptions = {
-            foregroundThreshold: props.foregroundThreshold,
-            backgroundBlurAmount: props.backgroundBlurAmount,
-            edgeBlurAmount: props.edgeBlurAmount,
-            maskCombineRatio: props.maskCombineRatio,
-            backgroundImageUrl: props.backgroundImageUrl,
-            effects: props.effects,
-            backend: props.backend,
-        };
         if (props.segmenter.status === 'new' ||
             props.segmenter.status === 'closed') {
             await props.segmenter.open({
@@ -63,7 +70,7 @@ export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height =
                 processingWidth: props.processingWidth,
                 processingHeight: props.processingHeight,
                 backgroundImage: props.backgroundImage,
-                renderOptions,
+                renderOptions: props.renderOptions,
             });
         }
         if (!props.utils) {
@@ -73,7 +80,7 @@ export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height =
             return undefined;
         }
         const inputFrame = toVideoFrameLike(input);
-        return props.segmenter.process(inputFrame, renderOptions);
+        return props.segmenter.process(inputFrame, props.renderOptions);
     };
     const canUpdate = () => props.segmenter.status !== 'new' &&
         props.segmenter.status !== 'closed' &&
@@ -103,43 +110,132 @@ export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height =
             return props.status;
         },
         get foregroundThreshold() {
-            return props.foregroundThreshold;
+            return props.renderOptions.foregroundThreshold;
+        },
+        get backgroundThreshold() {
+            return props.renderOptions.backgroundThreshold;
         },
         get backgroundBlurAmount() {
-            return props.backgroundBlurAmount;
+            return props.renderOptions.backgroundBlurAmount;
         },
         get edgeBlurAmount() {
-            return props.edgeBlurAmount;
+            return props.renderOptions.edgeBlurAmount;
         },
         get effects() {
-            return props.effects;
+            return props.renderOptions.effects;
         },
         get maskCombineRatio() {
-            return props.maskCombineRatio;
+            return props.renderOptions.maskCombineRatio;
         },
         get backend() {
-            return props.backend;
+            return props.renderOptions.backend;
+        },
+        get sigmaSpace() {
+            return props.renderOptions.sigmaSpace;
+        },
+        get sigmaRangeLo() {
+            return props.renderOptions.sigmaRangeLo;
+        },
+        get sigmaRangeHi() {
+            return props.renderOptions.sigmaRangeHi;
+        },
+        get personCenter() {
+            return props.renderOptions.personCenter;
+        },
+        get excludeBystanders() {
+            return props.renderOptions.excludeBystanders;
+        },
+        get morphPass() {
+            return props.renderOptions.morphPass;
+        },
+        get morphErodeRadiusPx() {
+            return props.renderOptions.morphErodeRadiusPx;
+        },
+        get morphDilateRadiusPx() {
+            return props.renderOptions.morphDilateRadiusPx;
+        },
+        get lightWrapIntensity() {
+            return props.renderOptions.lightWrapIntensity;
+        },
+        get lightWrapTightness() {
+            return props.renderOptions.lightWrapTightness;
+        },
+        get lightWrapBlurAmount() {
+            return props.renderOptions.lightWrapBlurAmount;
+        },
+        get lightWrapEdgeBand() {
+            return props.renderOptions.lightWrapEdgeBand;
+        },
+        get downSampleFactor() {
+            return props.renderOptions.downSampleFactor;
+        },
+        set morphPass(value) {
+            props.renderOptions.morphPass = value;
+        },
+        set morphErodeRadiusPx(value) {
+            props.renderOptions.morphErodeRadiusPx = value;
+        },
+        set morphDilateRadiusPx(value) {
+            props.renderOptions.morphDilateRadiusPx = value;
+        },
+        set personCenter(value) {
+            props.renderOptions.personCenter = value;
+        },
+        set excludeBystanders(value) {
+            props.renderOptions.excludeBystanders = value;
         },
         set foregroundThreshold(value) {
-            props.foregroundThreshold = clampInRangeFrom0To1(value);
+            assert(value >= props.renderOptions.backgroundThreshold);
+            props.renderOptions.foregroundThreshold =
+                clampInRangeFrom0To1(value);
+        },
+        set backgroundThreshold(value) {
+            assert(value <= props.renderOptions.foregroundThreshold);
+            props.renderOptions.backgroundThreshold =
+                clampInRangeFrom0To1(value);
         },
         set backgroundBlurAmount(value) {
-            props.backgroundBlurAmount = clampInRangeFrom0To9(value);
+            props.renderOptions.backgroundBlurAmount =
+                clampInRangeFrom0To9(value);
         },
         set edgeBlurAmount(value) {
-            props.edgeBlurAmount = clampInRangeFrom0To9(value);
+            props.renderOptions.edgeBlurAmount = clampInRangeFrom0To9(value);
         },
         set effects(value) {
-            props.effects = value;
+            props.renderOptions.effects = value;
         },
         set backgroundImageUrl(value) {
-            props.backgroundImageUrl = value;
+            props.renderOptions.backgroundImageUrl = value;
         },
         get backgroundImageUrl() {
-            return props.backgroundImageUrl;
+            return props.renderOptions.backgroundImageUrl;
         },
         set maskCombineRatio(value) {
-            props.maskCombineRatio = clampInRangeFrom0To1(value);
+            props.renderOptions.maskCombineRatio = clampInRangeFrom0To1(value);
+        },
+        set sigmaRangeLo(value) {
+            props.renderOptions.sigmaRangeLo = value;
+        },
+        set sigmaRangeHi(value) {
+            props.renderOptions.sigmaRangeHi = value;
+        },
+        set sigmaSpace(value) {
+            props.renderOptions.sigmaSpace = value;
+        },
+        set lightWrapIntensity(value) {
+            props.renderOptions.lightWrapIntensity = value;
+        },
+        set lightWrapTightness(value) {
+            props.renderOptions.lightWrapTightness = value;
+        },
+        set lightWrapBlurAmount(value) {
+            props.renderOptions.lightWrapBlurAmount = value;
+        },
+        set lightWrapEdgeBand(value) {
+            props.renderOptions.lightWrapEdgeBand = value;
+        },
+        set downSampleFactor(value) {
+            props.renderOptions.downSampleFactor = nearestPowerOfTwo(value, 0, 2);
         },
         get outputCanvas() {
             return props.outputCanvas;
@@ -175,21 +271,13 @@ export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height =
             }
         },
         set backend(value) {
-            if (value === props.backend) {
+            if (value === props.renderOptions.backend) {
                 return;
             }
-            props.backend = value;
+            props.renderOptions.backend = value;
             if (canUpdate()) {
                 segmenter.update({
-                    renderOptions: {
-                        backend: props.backend,
-                        backgroundImageUrl: props.backgroundImageUrl,
-                        foregroundThreshold: props.foregroundThreshold,
-                        backgroundBlurAmount: props.backgroundBlurAmount,
-                        edgeBlurAmount: props.edgeBlurAmount,
-                        maskCombineRatio: props.maskCombineRatio,
-                        effects: props.effects,
-                    },
+                    renderOptions: props.renderOptions,
                 });
             }
         },
@@ -208,7 +296,7 @@ export const createTransform = (segmenter, { width = PROCESSING_WIDTH, height =
             }
         },
         transform: async (videoFrame, controller) => {
-            switch (props.effects) {
+            switch (props.renderOptions.effects) {
                 case 'overlay':
                 case 'blur': {
                     const result = await processInput(videoFrame);

package/dist/main/video/index.d.ts

@@ -3,7 +3,7 @@ export * from './video';
 export * from './types';
 export { createTransform as createCanvasTransform } from './canvasTransform';
 export * from './videoStreamTrackProcessor';
-export { createFrameCallbackRequest, createCanvas } from './utils';
+export { createCanvas, createFrameCallbackRequest, playVideo, setVideoElementSrc, } from './utils';
 export * from './typeGuards';
 export * from './constants';
 export * from './segmenters/mediapipe';

package/dist/main/video/index.js

@@ -3,7 +3,7 @@ export * from './video';
 export * from './types';
 export { createTransform as createCanvasTransform } from './canvasTransform';
 export * from './videoStreamTrackProcessor';
-export { createFrameCallbackRequest, createCanvas } from './utils';
+export { createCanvas, createFrameCallbackRequest, playVideo, setVideoElementSrc, } from './utils';
 export * from './typeGuards';
 export * from './constants';
 export * from './segmenters/mediapipe';