Skip to content

Instantly share code, notes, and snippets.

@acro5piano

acro5piano/index.html

Last active April 11, 2022 17:59
Show Gist options
  • Save acro5piano/0972a180348643031dd54a2d29c59301 to your computer and use it in GitHub Desktop.
Save acro5piano/0972a180348643031dd54a2d29c59301 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md
Raw
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"></script>
<style>
.relative {
position: relative;
}
.renderer {
width: 400px;
height: 300px;
}
.invisible {
visibility: hidden;
}
</style>
</head>
<body>
<div class="relative renderer">
<video id="video" class="invisible renderer" width="400" height="300" autoplay muted></video>
<canvas id="canvas" class="renderer" width="400" height="300"></canvas>
</div>
</body>
<script>
const canvas = document.getElementById("canvas");
const video = document.getElementById("video");
const settings = {
bodyPix: {
multiplier: 0.75,
stride: 32,
quantBytes: 4
},
bokehEffect: {
backgroundBlurAmount: 6,
edgeBlurAmount: 2,
flipHorizontal: true,
},
}
async function main() {
const net = await bodyPix.load(settings.bodyPix)
video.addEventListener('play', () => {
async function step() {
const segmentation = await net.segmentPerson(video);
const {backgroundBlurAmount, edgeBlurAmount, flipHorizontal} = settings.bokehEffect
await bodyPix.drawBokehEffect(
canvas, video, segmentation, backgroundBlurAmount,
edgeBlurAmount, flipHorizontal
);
// Add delay to decrease frame rate for performance reason
setTimeout(() => {
requestAnimationFrame(step)
}, 100)
}
requestAnimationFrame(step);
})
const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: false})
video.srcObject = stream;
// Add delay to wait for video strem is ready
setTimeout(() => {
video.play();
}, 1000)
}
main()
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment