Comunic/ComunicWeb
1
0
Fork 0
mirror of https://github.com/pierre42100/ComunicWeb synced 2024-12-24 18:08:50 +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

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

@ -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]);
}