Install from npm using:
npm install virtual-bg
or include directly in HTML:
<script src="https://cdn.jsdelivr.net/npm/virtual-bg@latest/virtual-bg.min.js"></script>
<div>
<video autoplay="true" id="inputVideoElement"></video>
<canvas id="output_canvas"></canvas>
</div>
import { segmentBackground, applyBlur, applyImageBackground } from'virtual-bg';
const inputVideoElement = document.querySelector('#inputVideoElement');
const outputCanvasElement = document.querySelector('#output_canvas');
let myStream = await navigator.mediaDevices.getUserMedia({
video: true
});
inputVideoElement.srcObject = myStream;
// segments foreground & background
segmentBackground(inputVideoElement, outputCanvasElement);
// applies a blur intensity of 7px to the background
applyBlur(7);
// applies an image background
const image = new Image();
image.src = 'https://imageurl.jpg'
applyImageBackground(image);
segmentBackground(inputVideoElement, outputCanvasElement, modelSelection <optional>);
Parameters:
inputVideoElement
: <HTMLVideoElement> Source of video which is to be used for applying segmentation.outputCanvasElement
: <HTMLCanvasElement> Canvas Element where output is to be displayed. modelSelection
: Numerical value to select type of model to be used for segmentation. applyBlur(blurIntensity <optional>);
Parameters:
blurIntensity
: Numerical value in pixels to apply a blur filter to the background. This uses the same filter as used in [CSS blur filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur())applyImageBackground(imageElement);
Parameters:
imageElement
: <HTMLImageElement> Image element to be set as background. You can create a new element dynamically using the Image() constructor.
applyVideoBackground(videoElement);
Parameters:
videoElement
: <HTMLVideoElement> Video element to be set as background.
applyScreenBackground(screenCaptureStream);
Parameters:
screenCaptureStream
: <MediaStream> Stream obtained from the Screen Capture API
An example use case for this can be when user has set screen capture as the background and want to present something.
changeForegroundType(foregroundType, offset<optional>);
Parameters:
foregroundType
: normal | presenter
Type of foreground. Presenter mode shrinks the foreground and displays it in the bottom right corner.offset
: Numerical value in pixels for setting custom offset when presenter mode is selected.Note: I'm using mediapipe's selfie segmentation model and library as a base.
For any doubts/feedback/suggestions, please start an issue/discussion at https://github.com/akhil-rana/virtual-bg or contact me at contact@akhilrana.com