Comunic/ComunicWeb
1
0
Fork 0
mirror of https://github.com/pierre42100/ComunicWeb synced 2024-11-22 20:19:21 +00:00
Code Issues Projects Releases Wiki Activity

Can toggle background blur

Browse Source
This commit is contained in:
Pierre HUBERT 2021-01-30 19:44:39 +01:00
parent 2e486b9b7c
commit 08091425f1
1 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
assets/js/components/calls/window.js
View File

@ -32,6 +32,7 @@ class CallWindow extends CustomEvents {
/** @type {Map<number, AudioContext>} */ /** @type {Map<number, AudioContext>} */
this.audioContexts = new Map() this.audioContexts = new Map()
this.blurBackground = false;
this.construct(conv); 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 // Share camera button
{ {
icon: "fa-video-camera", icon: "fa-video-camera",
@ -935,6 +946,22 @@ class CallWindow extends CustomEvents {
const canvasTarget = document.createElement("canvas"); 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({ bodyPix.load({
multiplier: 0.75, multiplier: 0.75,
stride: 32, stride: 32,
@ -943,28 +970,25 @@ class CallWindow extends CustomEvents {
(async () => { (async () => {
try { 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") while(videoTrack.readyState == "live")
{ {
const segmentation = await net.segmentPerson(videoTarget); if (this.blurBackground) {
const segmentation = await net.segmentPerson(videoTarget);
const backgroundBlurAmount = 6; const backgroundBlurAmount = 6;
const edgeBlurAmount = 2; const edgeBlurAmount = 2;
const flipHorizontal = true; const flipHorizontal = true;
bodyPix.drawBokehEffect( bodyPix.drawBokehEffect(
canvasTarget, videoTarget, segmentation, backgroundBlurAmount, canvasTarget, videoTarget, segmentation, backgroundBlurAmount,
edgeBlurAmount, flipHorizontal); edgeBlurAmount, flipHorizontal);
}
else {
canvas.drawImage(videoTarget, 0, 0, videoTarget.width, videoTarget.height);
await new Promise((res, rej) => setTimeout(() => res(), 40));
}
} }
} }
catch(e) catch(e)
@ -974,6 +998,7 @@ class CallWindow extends CustomEvents {
})(); })();
}); });
stream = canvasTarget.captureStream(); stream = canvasTarget.captureStream();
stream.addTrack(this.mainStream.getAudioTracks()[0]); stream.addTrack(this.mainStream.getAudioTracks()[0]);
} }