javascript - 在 HTML 页面的网络摄像头视频源中使用背景扣除

Question

我正在尝试为照相亭式的设置制作一个原型(prototype)，其中界面显示在 html 页面上。我已成功将视频嵌入到 Canvas 元素中，该元素基本上使用计算机上的集成/外部网络摄像头来根据距屏幕的距离显示用户的面部/ body 。

问题:我需要的是能够消除背景，以便只有人的脸部/ body 可见，其余部分是透明的。我需要这个，这样 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>

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

Answer 1

我不知道你是否曾经使用过 mac os 上的“photobooth”应用程序，但他们做了类似的操作。然而，他们要求用户首先离开场景，这样程序就可以获得真实的背景图像，可以将其视为校准步骤。然后它可以进行真正的背景扣除。这确实可以简化您的问题，而不是逐帧进行背景减法。当您寻找后续帧之间的差异时，这要困难得多。

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