acro5piano/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Blur background WebRTC using Tensorflow


Details: twilio/twilio-video.js#953 (comment)

  
## index.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></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>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script>
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></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>