mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-22 12:09:21 +00:00
Start to blur video background
This commit is contained in:
parent
7453018a5c
commit
cc3bdd1b0a
18
assets/3rdparty/tensorflow-models/body-pix-2.0.js
vendored
Normal file
18
assets/3rdparty/tensorflow-models/body-pix-2.0.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
assets/3rdparty/tfjs/tfjs-1.2.min.js
vendored
Normal file
3
assets/3rdparty/tfjs/tfjs-1.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -924,6 +924,63 @@ class CallWindow extends CustomEvents {
|
||||
if(!this.isOpen)
|
||||
return
|
||||
|
||||
if(includeVideo)
|
||||
{
|
||||
// Create capture
|
||||
const videoTarget = document.createElement("video");
|
||||
videoTarget.srcObject = stream;
|
||||
videoTarget.play()
|
||||
|
||||
|
||||
const canvasTarget = document.createElement("canvas");
|
||||
const canvas = canvasTarget.getContext("2d");
|
||||
|
||||
document.body.appendChild(videoTarget) // TODO : remove
|
||||
document.body.appendChild(canvasTarget) // TODO : remove
|
||||
bodyPix.load({
|
||||
multiplier: 0.75,
|
||||
stride: 32,
|
||||
quantBytes: 4
|
||||
}).then( net => {
|
||||
(async () => {
|
||||
try {
|
||||
|
||||
//await new Promise((res) => setTimeout(() => res(), 3000));
|
||||
|
||||
await new Promise((res, rej) => videoTarget.addEventListener("loadeddata", e => res(), {once: true}));
|
||||
alert("do it");
|
||||
videoTarget.width = this.mainStream.getVideoTracks()[0].getSettings().width
|
||||
videoTarget.height = this.mainStream.getVideoTracks()[0].getSettings().height
|
||||
canvasTarget.width = videoTarget.width;
|
||||
canvasTarget.height = videoTarget.height;
|
||||
|
||||
while(true) // TODO : Find something better
|
||||
{
|
||||
const segmentation = await net.segmentPerson(videoTarget);
|
||||
|
||||
const backgroundBlurAmount = 6;
|
||||
const edgeBlurAmount = 2;
|
||||
const flipHorizontal = true;
|
||||
console.info(
|
||||
canvasTarget, videoTarget, segmentation, backgroundBlurAmount,
|
||||
edgeBlurAmount, flipHorizontal);
|
||||
bodyPix.drawBokehEffect(
|
||||
canvasTarget, videoTarget, segmentation, backgroundBlurAmount,
|
||||
edgeBlurAmount, flipHorizontal);
|
||||
}
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
console.error("Failure", e);
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
stream = canvasTarget.captureStream();
|
||||
stream.addTrack(this.mainStream.getAudioTracks()[0]);
|
||||
}
|
||||
|
||||
|
||||
// Show user video
|
||||
await this.applyStream(userID(), true, stream)
|
||||
this.refreshButtonsState()
|
||||
|
@ -167,7 +167,11 @@ class Dev {
|
||||
"3rdparty/getScreenId.js",
|
||||
|
||||
// Record MediaStream
|
||||
"3rdparty/MediaStreamRecorder.min.js"
|
||||
"3rdparty/MediaStreamRecorder.min.js",
|
||||
|
||||
// TensorflowJS
|
||||
"3rdparty/tfjs/tfjs-1.2.min.js",
|
||||
"3rdparty/tensorflow-models/body-pix-2.0.js"
|
||||
);
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user