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

39
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,13 +946,9 @@ class CallWindow extends CustomEvents {
const canvasTarget = document.createElement("canvas"); const canvasTarget = document.createElement("canvas");
bodyPix.load({ // Mandatory to initialize context
multiplier: 0.75, const canvas = canvasTarget.getContext("2d");
stride: 32,
quantBytes: 4
}).then( net => {
(async () => {
try {
// Wait for video to be ready // Wait for video to be ready
await new Promise((res, rej) => videoTarget.addEventListener("loadeddata", e => res(), {once: true})); 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.width = videoTarget.width;
canvasTarget.height = videoTarget.height; canvasTarget.height = videoTarget.height;
bodyPix.load({
multiplier: 0.75,
stride: 32,
quantBytes: 4
}).then( net => {
(async () => {
try {
while(videoTrack.readyState == "live") while(videoTrack.readyState == "live")
{ {
if (this.blurBackground) {
const segmentation = await net.segmentPerson(videoTarget); const segmentation = await net.segmentPerson(videoTarget);
const backgroundBlurAmount = 6; const backgroundBlurAmount = 6;
@ -966,6 +984,12 @@ class CallWindow extends CustomEvents {
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]);
} }