akhil-rana / virtual-bg Goto Github PK

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.
  0 : General
  1 : Landscape (default)
  General (0) can be used when there is only 1 person in the view and not far away from the camera.
  Landscape works better if there are multiple people or distance from the camera is more.

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
  default = 7

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.
  For example: -100 offset will move the foreground by 100 pixels to the right.

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 [email protected]