virtual-bg - npm Package Compare versions

Comparing version 0.0.1 to 0.0.4

index.d.ts

@@ -1,5 +0,6 @@
-export function start(
-  videoElement: HTMLVideoElement,
-  onResults: Function,
-  modelSelection: number
+export function blurBackground(
+  inputVideoElement: HTMLVideoElement,
+  outputCanvasElement: HTMLCanvasElement,
+  blurIntensity?: number,
+  modelSelection?: number
 ): any;

index.js

@@ -9,3 +9,19 @@ const script = document.createElement('script');
 
-export async function start(videoElement, onResults, modelSelection) {
+const foregroundCanvasElement = document.createElement('canvas');
+const backgroundCanvasElement = document.createElement('canvas');
+
+let outputCanvasCtx = null;
+
+export async function blurBackground(
+  inputVideoElement,
+  outputCanvasElement,
+  blurIntensity = 10,
+  modelSelection = 0
+) {
+  foregroundCanvasElement.width = backgroundCanvasElement.width =
+    outputCanvasElement.width;
+  foregroundCanvasElement.height = backgroundCanvasElement.height =
+    outputCanvasElement.height;
+  outputCanvasCtx = outputCanvasElement.getContext('2d');
+
   let selfieSegmentation = new SelfieSegmentation({
@@ -19,3 +35,10 @@ locateFile: (file) => {
   });
-  selfieSegmentation.onResults(onResults);
+  selfieSegmentation.onResults((results) => {
+    mergeForegroundBackground(
+      foregroundCanvasElement,
+      backgroundCanvasElement,
+      blurIntensity,
+      results
+    );
+  });
 
@@ -26,6 +49,6 @@ let myStream = await navigator.mediaDevices.getUserMedia({
 
-  videoElement.srcObject = myStream;
-  videoElement.addEventListener('play', () => {
+  inputVideoElement.srcObject = myStream;
+  inputVideoElement.addEventListener('play', () => {
     async function step() {
-      await selfieSegmentation.send({ image: videoElement });
+      await selfieSegmentation.send({ image: inputVideoElement });
       requestAnimationFrame(step);
@@ -35,3 +58,45 @@ }
   });
-  videoElement.addEventListener('pause', async () => {});
+  inputVideoElement.addEventListener('pause', async () => {});
 }
+
+function mergeForegroundBackground(
+  foregroundCanvasElement = foregroundCanvasElement,
+  backgroundCanvasElement = backgroundCanvasElement,
+  blurIntensity,
+  results
+) {
+  makeCanvasLayer(results, foregroundCanvasElement, 'foreground');
+  makeCanvasLayer(results, backgroundCanvasElement, 'background');
+  outputCanvasCtx.drawImage(backgroundCanvasElement, 0, 0);
+  const backgroundCanvasCtx = backgroundCanvasElement.getContext('2d');
+  backgroundCanvasCtx.filter = `blur(${blurIntensity}px)`;
+  outputCanvasCtx.drawImage(foregroundCanvasElement, 0, 0);
+}
+
+function makeCanvasLayer(results, canvasElement, type) {
+  const canvasCtx = canvasElement.getContext('2d');
+
+  canvasCtx.save();
+
+  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+  canvasCtx.drawImage(
+    results.segmentationMask,
+    0,
+    0,
+    canvasElement.width,
+    canvasElement.height
+  );
+  if (type === 'foreground') {
+    canvasCtx.globalCompositeOperation = 'source-in';
+  }
+
+  canvasCtx.drawImage(
+    results.image,
+    0,
+    0,
+    canvasElement.width,
+    canvasElement.height
+  );
+
+  canvasCtx.restore();
+}

package.json

 {
   "name": "virtual-bg",
-  "version": "0.0.1",
-  "description": "",
+  "version": "0.0.4",
+  "description": "Easily add virtual background effects to your video/camera input inside any web browser",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/akhil-rana/virtual-bg"
+  },
+  "homepage": "https://github.com/akhil-rana/virtual-bg",
   "main": "index.js",
@@ -9,3 +14,4 @@ "scripts": {
   },
-  "author": "",
+  "author": "Akhil Rana",
+  "typings": "./index.d.ts",
   "license": "ISC",
@@ -12,0 +18,0 @@ "dependencies": {

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3697

increased by140.53%

Lines of code

91

increased by167.65%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

2

decreased by-33.33%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes