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.
Optional deferWhether 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).
false
Optional fitThe [[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.
'Fill'
Optional maskThe blur radius to use when smoothing out the edges of the person's mask.
8
Optional useWhether to use a web worker (Chrome only).
true
Generated using TypeDoc
Options passed to [[VirtualBackgroundProcessor]] constructor.