在HTML頁面中使用背景減法在網絡攝像機視頻源

我試圖製作一個photobooth-ish設置的原型，其中的界面顯示在html頁面上。我設法在畫布元素中嵌入視頻，基本上使用我的計算機上的集成/外部網絡攝像頭根據距離屏幕的距離顯示用戶的臉部/身體。在HTML頁面中使用背景減法在網絡攝像機視頻源

問題：我需要的是能夠消除背景，使得只有人的臉部/身體可見，其餘部分是透明的。我需要這樣做，這樣可以覆蓋背景上的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>

的影響會是這個樣子（圖像是從互聯網和想法是能夠檢測到人，消除背景，用透明區域取代黑色區域 - 所有在實況視頻從網絡攝像頭捕捉）：

intended effect with background subtraction

任何幫助和指導，將是最有幫助的！

來源

2015-04-22 Darth Coder

我不知道你是否曾經在mac os上使用「photobooth」應用程序，但他們做了類似的操作。但是，他們會要求用戶首先離開場景，這樣程序就會獲得真實的背景圖像，並將其視爲校準步驟。然後，它可以做一個真正的背景減法。這可以真正簡化您的問題，而不是逐幀背景減法。在尋找後續幀之間的差異的情況下，這更困難。

所以如果你可以做「離線校準」試試

來源

2015-04-22 22:06:27 andrew

在HTML頁面中使用背景減法在網絡攝像機視頻源

回答

相關問題