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

Question

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

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

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

<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>

效果看起来像这样（图像不在互联网上，其想法是能够检测到该人，消除背景，将黑色区域替换为透明区域-所有这些都是从网络摄像头捕获的实时视频供稿中）：

Answer 1

我不知道您是否曾经在Mac OS上使用过“ photobooth”应用程序，但是它们执行了类似的操作。 但是，他们要求用户首先离开现场，这样程序才能获得真实的背景图像，将其视为校准步骤。 然后，它可以进行真正的背景减法。 与逐帧背景减法相比，这确实可以简化您的问题。 如果您要查找后续帧之间的差异，则要困难得多。

因此，如果您可以进行“离线校准”，请尝试