The VideoProcessors load assets dynamically depending on certain browser features.
You need to serve all the assets and provide the root path so they can be referenced properly.
These assets can be copied from the dist/build folder which you can add as part of your deployment process.
const virtualBackground = new VirtualBackgroundProcessor({
assetsPath: 'https://my-server-path/assets',
backgroundImage: img,
});
await virtualBackground.loadModel();
const blurBackground = new GaussianBlurBackgroundProcessor({
assetsPath: 'https://my-server-path/assets'
});
await blurBackground.loadModel();
The HTMLImageElement to use for background replacement. An error will be raised if the image hasn't been fully loaded yet. Additionally, the image must follow security guidelines when loading the image from a different origin. Failing to do so will result to an empty output frame.
OptionaldeferWhether the pipeline should calculate the person mask without waiting for the current input frame to be downscaled. Setting this to true will potentially increase the output frame rate at the expense of a slight trailing effect around the person mask (Chrome only).
OptionalfitThe [[ImageFit]] to use for positioning of the background image in the viewport. Only the Canvas2D [[Pipeline]] supports this option. WebGL2 ignores this option and falls back to Cover.
OptionalhysteresisConfigure hysteresis thresholding to reduce mask flickering between
frames. Set to true to enable with default thresholds, false to
disable, or provide a HysteresisConfig object with custom
high and low thresholds.
OptionalmaskThe blur radius to use when smoothing out the edges of the person's mask.
OptionaluseWhether to use a web worker (Chrome only).
Options passed to [[VirtualBackgroundProcessor]] constructor.