Can toggle background blur

assets/js/components/calls/window.js

@@ -32,6 +32,7 @@ class CallWindow extends CustomEvents {
 		/** @type {Map<number, AudioContext>} */
 		this.audioContexts = new Map()
 
+		this.blurBackground = false;
 
 		this.construct(conv);
 	}
@@ -225,6 +226,16 @@ class CallWindow extends CustomEvents {
 					}
 				},
 
+				// Blur background
+				{
+					icon: "fa-paint-brush",
+					text: "Toggle blur background",
+					needVideo: true,
+					onclick: () => {
+						this.blurBackground = !this.blurBackground;
+					}
+				},
+
 				// Share camera button
 				{
 					icon: "fa-video-camera",
@@ -935,13 +946,9 @@ class CallWindow extends CustomEvents {
 
 			const canvasTarget = document.createElement("canvas");
 
-			bodyPix.load({
-				multiplier: 0.75,
-				stride: 32,
-				quantBytes: 4
-			}).then( net => {
-				(async () => {
-					try {
+			// Mandatory to initialize context
+			const canvas = canvasTarget.getContext("2d");
+
 
 			// Wait for video to be ready
 			await new Promise((res, rej) => videoTarget.addEventListener("loadeddata", e => res(), {once: true}));
@@ -954,8 +961,19 @@ class CallWindow extends CustomEvents {
 			canvasTarget.width = videoTarget.width;
 			canvasTarget.height = videoTarget.height;
 
+
+			bodyPix.load({
+				multiplier: 0.75,
+				stride: 32,
+				quantBytes: 4
+			}).then( net => {
+				(async () => {
+					try {
+
+						
 						while(videoTrack.readyState == "live")
 						{
+							if (this.blurBackground) {
 								const segmentation = await net.segmentPerson(videoTarget);
 
 								const backgroundBlurAmount = 6;
@@ -966,6 +984,12 @@ class CallWindow extends CustomEvents {
 								canvasTarget, videoTarget, segmentation, backgroundBlurAmount,
 								edgeBlurAmount, flipHorizontal);
 							}
+							
+							else {
+								canvas.drawImage(videoTarget, 0, 0, videoTarget.width, videoTarget.height);
+								await new Promise((res, rej) => setTimeout(() => res(), 40));
+							}
+						}
 					}
 					catch(e)
 					{
@@ -974,6 +998,7 @@ class CallWindow extends CustomEvents {
 				})();
 			});
 			
+			
 			stream = canvasTarget.captureStream();
 			stream.addTrack(this.mainStream.getAudioTracks()[0]);
 		}