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 debounceWhether to skip processing every other frame to improve the output frame rate, but reducing accuracy in the process.
true
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 for WebGL2 pipeline, 4 for Canvas2D pipeline
Optional pipelineSpecifies which pipeline to use when processing video frames.
'WebGL2'
Generated using TypeDoc
Options passed to [[VirtualBackgroundProcessor]] constructor.