From 08091425f17587c57308fed84398103a8f77dc7e Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Sat, 30 Jan 2021 19:44:39 +0100
Subject: [PATCH] Can toggle background blur

---
 assets/js/components/calls/window.js | 61 ++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/assets/js/components/calls/window.js b/assets/js/components/calls/window.js
index be2ffe28..d5f92746 100644
--- a/assets/js/components/calls/window.js
+++ b/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,6 +946,22 @@ class CallWindow extends CustomEvents {
 
 			const canvasTarget = document.createElement("canvas");
 
+			// 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}));
+
+			const videoTrack = this.mainStream.getVideoTracks()[0];
+
+			// Fix video & canvas size
+			videoTarget.width = videoTrack.getSettings().width
+			videoTarget.height = videoTrack.getSettings().height
+			canvasTarget.width = videoTarget.width;
+			canvasTarget.height = videoTarget.height;
+
+
 			bodyPix.load({
 				multiplier: 0.75,
 				stride: 32,
@@ -943,28 +970,25 @@ class CallWindow extends CustomEvents {
 				(async () => {
 					try {
 
-						// Wait for video to be ready
-						await new Promise((res, rej) => videoTarget.addEventListener("loadeddata", e => res(), {once: true}));
-
-						const videoTrack = this.mainStream.getVideoTracks()[0];
-
-						// Fix video & canvas size
-						videoTarget.width = videoTrack.getSettings().width
-						videoTarget.height = videoTrack.getSettings().height
-						canvasTarget.width = videoTarget.width;
-						canvasTarget.height = videoTarget.height;
-
+						
 						while(videoTrack.readyState == "live")
 						{
-							const segmentation = await net.segmentPerson(videoTarget);
+							if (this.blurBackground) {
+								const segmentation = await net.segmentPerson(videoTarget);
 
-							const backgroundBlurAmount = 6;
-							const edgeBlurAmount = 2;
-							const flipHorizontal = true;
+								const backgroundBlurAmount = 6;
+								const edgeBlurAmount = 2;
+								const flipHorizontal = true;
 
-							bodyPix.drawBokehEffect(
-							canvasTarget, videoTarget, segmentation, backgroundBlurAmount,
-							edgeBlurAmount, flipHorizontal);
+								bodyPix.drawBokehEffect(
+								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]);
 		}