在HTML页面中的网络摄像头视频源中使用背景减法

Question

我正在尝试制作一个photobooth-ish设置的原型，其中界面显示在html页面上。我已经设法在一个canvas元素中嵌入一个视频，它基本上使用我的计算机上的集成/外部网络摄像头来显示用户的脸部/身体，具体取决于与屏幕的距离。

问题：我需要的是能够消除背景，使得只有人的脸部/身体可见，其余部分是透明的。我需要这个，以便容纳这个的div标签可以叠加在背景上，如果站在设备前面的人站在不同的背景设置（空间，山脉，城堡等，如图所示） UI）比他们实际在房间里的位置。如何在此中使用一些图像处理代码？如何实现此效果？

到目前为止我正在使用的代码：

<div id=outerdiv>
            <video id="video" autoplay></video>
            <canvas id="canvas" >
                <script>
                    // Put event listeners into place
                    window.addEventListener("DOMContentLoaded", function() {
                        // Grab elements, create settings, etc.
                        var canvas = document.getElementById("canvas"),
                            context = canvas.getContext("2d"),
                            video = document.getElementById("video"),
                            videoObj = { "video": true },
                            errBack = function(error) {
                                console.log("Video capture error: ", error.code); 
                            };

                        // Put video listeners into place
                        if(navigator.getUserMedia) { // Standard
                            navigator.getUserMedia(videoObj, function(stream) {
                                video.src = stream;
                                video.play();
                            }, errBack);
                        } 
                        else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                            navigator.webkitGetUserMedia(videoObj, function(stream){
                                video.src = window.webkitURL.createObjectURL(stream);
                                video.play();
                            }, errBack);
                        }
                    }, false);
                </script>
            </canvas>
</div>

效果看起来像这样（图像离开互联网，想法是能够检测到人物，消除背景，用透明区域替换黑色区域 - 所有这些都在捕获的实时视频中来自网络摄像头）：

任何帮助和指导都会非常有用！