|
|
51CTO旗下网站
|
|
移动端

惊呆!200行代码就能实现的隐身术你见过么?

最近,猿妹在GitHub上发现一个名为Real-Time-Person-Removal的神器,可以实时去除视频中的人物。

作者:猿妹编译来源:开源最前线|2020-02-25 11:15

如果你想把一张照片的某个人物去除掉,通常用PS就可以轻松去除了,但是如果是一段视频要你P掉一个人物,是不是就难倒你了呢?

最近,猿妹在GitHub上发现一个名为Real-Time-Person-Removal的神器,可以实时去除视频中的人物,就像下图这样:

有没有一种不明觉厉的赶脚,实现这样一种效果,其实只需要使用JavaScript在网络浏览器中使用一段200行的TensorFlow.js代码就可以了。

该项目的创建者是一名叫Jason Mayes的谷歌工程师使用TensorFlow.js库和JavaScript 开发的,Mayes表示,这只是一个试验性的项目,其中的算法还是存在一些问题,比如它会受到人物背景的影响,人物整体背景越简单,呈现出来的最终画面就会越真实,如果你仔细看就会发现,其实处理过的画面存在很多伪像痕迹。

不过,接下去Mayes会进一步改进他的算法,提高处理后的画面水平,甚至达到可以一次性从视频中删除多个人物的效果。

惊呆!200行代码就能实现的隐身术你见过么?

目前,Real-Time-Person-Removal在GitHub上标星2.6K,251个Fork(GitHub地址:https://github.com/jasonmayes/Real-Time-Person-Removal)

详细的代码也发上来供大家参考吧:

JS:

  1. /**  
  2.  * @license  
  3.  * Copyright 2018 Google LLC. All Rights Reserved.  
  4.  * Licensed under the Apache License, Version 2.0 (the "License");  
  5.  * you may not use this file except in compliance with the License.  
  6.  * You may obtain a copy of the License at  
  7.  *  
  8.  * http://www.apache.org/licenses/LICENSE-2.0  
  9.  *  
  10.  * Unless required by applicable law or agreed to in writing, software  
  11.  * distributed under the License is distributed on an "AS IS" BASIS,  
  12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
  13.  * See the License for the specific language governing permissions and  
  14.  * limitations under the License.  
  15.  * =============================================================================  
  16.  */  
  17.   
  18. /********************************************************************  
  19.  * Real-Time-Person-Removal Created by Jason Mayes 2020.  
  20.  *  
  21.  * Get latest code on my Github:  
  22.  * https://github.com/jasonmayes/Real-Time-Person-Removal  
  23.  *  
  24.  * Got questions? Reach out to me on social:  
  25.  * Twitter: @jason_mayes  
  26.  * LinkedIn: https://www.linkedin.com/in/creativetech  
  27.  ********************************************************************/  
  28.   
  29. const video = document.getElementById('webcam');  
  30. const liveView = document.getElementById('liveView');  
  31. const demosSection = document.getElementById('demos');  
  32. const DEBUG = false;  
  33.   
  34.   
  35. // An object to configure parameters to set for the bodypix model.  
  36. // See github docs for explanations.  
  37. const bodyPixProperties = {  
  38.   architecture: 'MobileNetV1',  
  39.   outputStride: 16,  
  40.   multiplier: 0.75,  
  41.   quantBytes: 4  
  42. };  
  43.   
  44. // An object to configure parameters for detection. I have raised  
  45. // the segmentation threshold to 90% confidence to reduce the  
  46. // number of false positives.  
  47. const segmentationProperties = {  
  48.   flipHorizontal: false,  
  49.   internalResolution: 'high',  
  50.   segmentationThreshold: 0.9,  
  51.   scoreThreshold: 0.2  
  52. };  
  53.   
  54.   
  55. // Render returned segmentation data to a given canvas context.  
  56. function processSegmentation(canvas, segmentation) {  
  57.   var ctx = canvas.getContext('2d');  
  58.   console.log(segmentation)  
  59.   // Get data from our overlay canvas which is attempting to estimate background.  
  60.   var imageData = ctx.getImageData(00, canvas.width, canvas.height);  
  61.   var data = imageData.data;  
  62.   
  63.   // Get data from the live webcam view which has all data.  
  64.   var liveData = videoRenderCanvasCtx.getImageData(00, canvas.width, canvas.height);  
  65.   var dataL = liveData.data;  
  66.   
  67.   var minX = 100000;  
  68.   var minY = 100000;  
  69.   var maxX = 0;  
  70.   var maxY = 0;  
  71.   
  72.   var foundBody = false;  
  73.   
  74.   // Go through pixels and figure out bounding box of body pixels.  
  75.   for (let x = 0; x < canvas.width; x++) {  
  76.     for (let y = 0; y < canvas.height; y++) {  
  77.       let n = y * canvas.width + x;  
  78.       // Human pixel found. Update bounds.  
  79.       if (segmentation.data[n] !== 0) {  
  80.         if(x < minX) {  
  81.           minX = x;  
  82.         }  
  83.   
  84.         if(y < minY) {  
  85.           minY = y;  
  86.         }  
  87.   
  88.         if(x > maxX) {  
  89.           maxX = x;  
  90.         }  
  91.   
  92.         if(y > maxY) {  
  93.           maxY = y;  
  94.         }  
  95.         foundBody = true;  
  96.       }  
  97.     }   
  98.   }  
  99.   
  100.   // Calculate dimensions of bounding box.  
  101.   var width = maxX - minX;  
  102.   var height = maxY - minY;  
  103.   
  104.   // Define scale factor to use to allow for false negatives around this region.  
  105.   var scale = 1.3;  
  106.   
  107.   //  Define scaled dimensions.  
  108.   var newWidth = width * scale;  
  109.   var newHeight = height * scale;  
  110.   
  111.   // Caculate the offset to place new bounding box so scaled from center of current bounding box.  
  112.   var offsetX = (newWidth - width) / 2;  
  113.   var offsetY = (newHeight - height) / 2;  
  114.   
  115.   var newXMin = minX - offsetX;  
  116.   var newYMin = minY - offsetY;  
  117.   
  118.   
  119.   // Now loop through update backgound understanding with new data  
  120.   // if not inside a bounding box.  
  121.   for (let x = 0; x < canvas.width; x++) {  
  122.     for (let y = 0; y < canvas.height; y++) {  
  123.       // If outside bounding box and we found a body, update background.  
  124.       if (foundBody && (x < newXMin || x > newXMin + newWidth) || ( y < newYMin || y > newYMin + newHeight)) {  
  125.         // Convert xy co-ords to array offset.  
  126.         let n = y * canvas.width + x;  
  127.   
  128.         data[n * 4] = dataL[n * 4];  
  129.         data[n * 4 + 1] = dataL[n * 4 + 1];  
  130.         data[n * 4 + 2] = dataL[n * 4 + 2];  
  131.         data[n * 4 + 3] = 255;              
  132.   
  133.       } else if (!foundBody) {  
  134.         // No body found at all, update all pixels.  
  135.         let n = y * canvas.width + x;  
  136.         data[n * 4] = dataL[n * 4];  
  137.         data[n * 4 + 1] = dataL[n * 4 + 1];  
  138.         data[n * 4 + 2] = dataL[n * 4 + 2];  
  139.         data[n * 4 + 3] = 255;      
  140.       }  
  141.     }  
  142.   }  
  143.   
  144.   ctx.putImageData(imageData, 00);  
  145.   
  146.   if (DEBUG) {  
  147.     ctx.strokeStyle = "#00FF00"  
  148.     ctx.beginPath();  
  149.     ctx.rect(newXMin, newYMin, newWidth, newHeight);  
  150.     ctx.stroke();  
  151.   }  
  152. }  
  153.   
  154.   
  155.   
  156. // Let's load the model with our parameters defined above.  
  157. // Before we can use bodypix class we must wait for it to finish  
  158. // loading. Machine Learning models can be large and take a moment to  
  159. // get everything needed to run.  
  160. var modelHasLoaded = false;  
  161. var model = undefined;  
  162.   
  163. model = bodyPix.load(bodyPixProperties).then(function (loadedModel) {  
  164.   model = loadedModel;  
  165.   modelHasLoaded = true;  
  166.   // Show demo section now model is ready to use.  
  167.   demosSection.classList.remove('invisible');  
  168. });  
  169.   
  170.   
  171. /********************************************************************  
  172. // Continuously grab image from webcam stream and classify it.  
  173. ********************************************************************/  
  174.   
  175. var previousSegmentationComplete = true;  
  176.   
  177. // Check if webcam access is supported.  
  178. function hasGetUserMedia() {  
  179.   return !!(navigator.mediaDevices &&  
  180.     navigator.mediaDevices.getUserMedia);  
  181. }  
  182.   
  183.   
  184. // This function will repeatidly call itself when the browser is ready to process  
  185. // the next frame from webcam.  
  186. function predictWebcam() {  
  187.   if (previousSegmentationComplete) {  
  188.     // Copy the video frame from webcam to a tempory canvas in memory only (not in the DOM).  
  189.     videoRenderCanvasCtx.drawImage(video, 00);  
  190.     previousSegmentationComplete = false;  
  191.     // Now classify the canvas image we have available.  
  192.     model.segmentPerson(videoRenderCanvas, segmentationProperties).then(function(segmentation) {  
  193.       processSegmentation(webcamCanvas, segmentation);  
  194.       previousSegmentationComplete = true;  
  195.     });  
  196.   }  
  197.   
  198.   // Call this function again to keep predicting when the browser is ready.  
  199.   window.requestAnimationFrame(predictWebcam);  
  200. }  
  201.   
  202.   
  203. // Enable the live webcam view and start classification.  
  204. function enableCam(event) {  
  205.   if (!modelHasLoaded) {  
  206.     return;  
  207.   }  
  208.   
  209.   // Hide the button.  
  210.   event.target.classList.add('removed');    
  211.   
  212.   // getUsermedia parameters.  
  213.   const constraints = {  
  214.     video: true  
  215.   };  
  216.   
  217.   // Activate the webcam stream.  
  218.   navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {  
  219.     video.addEventListener('loadedmetadata', function() {  
  220.       // Update widths and heights once video is successfully played otherwise  
  221.       // it will have width and height of zero initially causing classification  
  222.       // to fail.  
  223.       webcamCanvas.width = video.videoWidth;  
  224.       webcamCanvas.height = video.videoHeight;  
  225.       videoRenderCanvas.width = video.videoWidth;  
  226.       videoRenderCanvas.height = video.videoHeight;  
  227.       bodyPixCanvas.width = video.videoWidth;  
  228.       bodyPixCanvas.height = video.videoHeight;  
  229.       let webcamCanvasCtx = webcamCanvas.getContext('2d');  
  230.       webcamCanvasCtx.drawImage(video, 00);  
  231.     });  
  232.   
  233.     video.srcObject = stream;  
  234.   
  235.     video.addEventListener('loadeddata', predictWebcam);  
  236.   });  
  237. }  
  238.   
  239.   
  240. // We will create a tempory canvas to render to store frames from   
  241. // the web cam stream for classification.  
  242. var videoRenderCanvas = document.createElement('canvas');  
  243. var videoRenderCanvasCtx = videoRenderCanvas.getContext('2d');  
  244.   
  245. // Lets create a canvas to render our findings to the DOM.  
  246. var webcamCanvas = document.createElement('canvas');  
  247. webcamCanvas.setAttribute('class''overlay');  
  248. liveView.appendChild(webcamCanvas);  
  249.   
  250. // Create a canvas to render ML findings from to manipulate.  
  251. var bodyPixCanvas = document.createElement('canvas');  
  252. bodyPixCanvas.setAttribute('class''overlay');  
  253. var bodyPixCanvasCtx = bodyPixCanvas.getContext('2d');  
  254. bodyPixCanvasCtx.fillStyle = '#FF0000';  
  255.   
  256. liveView.appendChild(bodyPixCanvas);  
  257.   
  258. // If webcam supported, add event listener to button for when user  
  259. // wants to activate it.  
  260. if (hasGetUserMedia()) {  
  261.   const enableWebcamButton = document.getElementById('webcamButton');  
  262.   enableWebcamButton.addEventListener('click', enableCam);  
  263. else {  
  264.   console.warn('getUserMedia() is not supported by your browser');  
  265. }  

CSS:

  1. /** 
  2.  * @license 
  3.  * Copyright 2018 Google LLC. All Rights Reserved. 
  4.  * Licensed under the Apache License, Version 2.0 (the "License"); 
  5.  * you may not use this file except in compliance with the License. 
  6.  * You may obtain a copy of the License at 
  7.  * 
  8.  * http://www.apache.org/licenses/LICENSE-2.0 
  9.  * 
  10.  * Unless required by applicable law or agreed to in writing, software 
  11.  * distributed under the License is distributed on an "AS IS" BASIS, 
  12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
  13.  * See the License for the specific language governing permissions and 
  14.  * limitations under the License. 
  15.  * ============================================================================= 
  16.  */ 
  17.  
  18. /****************************************************** 
  19.  * Stylesheet by Jason Mayes 2020. 
  20.  * 
  21.  * Get latest code on my Github: 
  22.  * https://github.com/jasonmayes/Real-Time-Person-Removal 
  23.  * Got questions? Reach out to me on social: 
  24.  * Twitter: @jason_mayes 
  25.  * LinkedIn: https://www.linkedin.com/in/creativetech 
  26.  *****************************************************/ 
  27.  
  28. body { 
  29.   font-family: helvetica, arial, sans-serif; 
  30.   margin: 2em; 
  31.   color: #3D3D3D; 
  32.  
  33. h1 { 
  34.   font-style: italic; 
  35.   color: #FF6F00; 
  36.  
  37. h2 { 
  38.   clear: both; 
  39.  
  40. em { 
  41.   font-weight: bold; 
  42.  
  43. video { 
  44.   clear: both; 
  45.   display: block; 
  46.  
  47. section { 
  48.   opacity: 1
  49.   transition: opacity 500ms ease-in-out; 
  50.  
  51. header, footer { 
  52.   clear: both; 
  53.  
  54. button { 
  55.   z-index: 1000
  56.   position: relative; 
  57.  
  58. .removed { 
  59.   display: none; 
  60.  
  61. .invisible { 
  62.   opacity: 0.2
  63.  
  64. .note { 
  65.   font-style: italic; 
  66.   font-size: 130%; 
  67.  
  68. .webcam { 
  69.   position: relative; 
  70.  
  71. .webcam, .classifyOnClick { 
  72.   position: relative; 
  73.   float: left; 
  74.   width: 48%; 
  75.   margin: 21%; 
  76.   cursor: pointer; 
  77.  
  78. .webcam p, .classifyOnClick p { 
  79.   position: absolute; 
  80.   padding: 5px; 
  81.   background-color: rgba(25511100.85); 
  82.   color: #FFF; 
  83.   border: 1px dashed rgba(2552552550.7); 
  84.   z-index: 2
  85.   font-size: 12px; 
  86.  
  87. .highlighter { 
  88.   background: rgba(025500.25); 
  89.   border: 1px dashed #fff; 
  90.   z-index: 1
  91.   position: absolute; 
  92.  
  93. .classifyOnClick { 
  94.   z-index: 0
  95.   position: relative; 
  96.  
  97. .classifyOnClick canvas, .webcam canvas.overlay { 
  98.   opacity: 1
  99.  
  100.   top: 0
  101.   left: 0
  102.   z-index: 2
  103.  
  104. #liveView { 
  105.   transform-origin: top left; 
  106.   transform: scale(1); 

HTML:

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.   <head> 
  4.     <title>Disappearing People Project</title> 
  5.     <meta charset="utf-8"
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge"
  7.     <meta name="viewport" content="width=device-width, initial-scale=1"
  8.     <meta name="author" content="Jason Mayes"
  9.  
  10.     <!-- Import the webpage's stylesheet --> 
  11.     <link rel="stylesheet" href="/style.css"
  12.  
  13.     <!-- Import TensorFlow.js library --> 
  14.     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script> 
  15.   </head>   
  16.   <body> 
  17.     <h1>Disappearing People Project</h1> 
  18.  
  19.     <header class="note">  
  20.       <h2>Removing people from complex backgrounds in real time using TensorFlow.js</h2> 
  21.     </header> 
  22.  
  23.     <h2>How to use</h2> 
  24.     <p>Please wait for the model to load before trying the demos below at which point they will become visible when ready to use.</p> 
  25.     <p>Here is a video of what you can expect to achieve using my custom algorithm. The top is the actual footage, the bottom video is with the real time removal of people working in JavaScript!</p> 
  26.     <iframe width="540" height="812" src="https://www.youtube.com/embed/0LqEuc32uTc?controls=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
  27.  
  28.     <section id="demos" class="invisible"
  29.  
  30.       <h2>Demo: Webcam live removal</h2> 
  31.       <p>Try this out using your webcam. Stand a few feet away from your webcam and start walking around... Watch as you slowly disappear in the bottom preview.</p> 
  32.  
  33.       <div id="liveView" class="webcam"
  34.         <button id="webcamButton">Enable Webcam</button> 
  35.         <video id="webcam" autoplay></video> 
  36.       </div> 
  37.     </section> 
  38.  
  39.  
  40.     <!-- Include the Glitch button to show what the webpage is about and 
  41.          to make it easier for folks to view source and remix --> 
  42.     <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div> 
  43.     <script src="https://button.glitch.me/button.js"></script> 
  44.  
  45.     <!-- Load the bodypix model to recognize body parts in images --> 
  46.     <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script> 
  47.  
  48.     <!-- Import the page's JavaScript to do some stuff --> 
  49.     <script src="/script.js" defer></script> 
  50.   </body> 
  51. </html> 

【编辑推荐】

  1. MacBook显卡不跑AI模型太浪费:这个深度学习工具支持所有品牌GPU
  2. 古有照妖镜,今有换脸识别机,微软CVPR 2020力作,让伪造人脸无处遁形
  3. 我是如何在 3 天内零成本完成 AI 小程序开发的
  4. 阿里技术总监:从Java技术转向管理有哪些陷阱?
  5. Python 从业十年是种什么体验?老程序员的一篇万字经验分享
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

Docker一键部署,3小时学以致用

Docker一键部署,3小时学以致用

Docker学以致用
共3章 | jextop

99人订阅学习

高并发互联网消费金融领域架构设计

高并发互联网消费金融领域架构设计

应对高并发架构
共5章 | jayslife

91人订阅学习

Kubernetes:21天完美通关

Kubernetes:21天完美通关

从小白到修神
共29章 | 断水流大师兄

907人订阅学习

视频课程+更多

你必学的SSM实战案例

你必学的SSM实战案例

讲师:齐毅24265人学习过

kali linux 渗透测试

kali linux 渗透测试

讲师:艾海涛649人学习过

华为HCNA完全精通必备教程-Wakin出品

华为HCNA完全精通必备教程-Wakin出品

讲师:谢斌65195人学习过

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微