隐身术？登顶 GitHub Top1：200 行 JS 代码让画面人物瞬间消失！

整理 | 夕颜

出品 | CSDN（ID:CSDNnews） 

       

今天，一个名为 Real-Time-Person-Removal（实时人物去除）项目在GitHub上火了，登上近日GitHub Trending第一，目前已经获得1.8k star。

这个项目的神奇之处在于，只需要在网络浏览器中使用JavaScript，用200多行TensorFlow.js代码，就可以实时让视频画面中的人物对象从复杂的背景中凭空消失！

这虽然不能让你在现实生活中像哈利·波特一样隐身的梦想成真，但至少在视频、动画里可以体验一把隐身的快感????????????！

首先奉上GitHub地址：https://github.com/jasonmayes/Real-Time-Person-Removal

这个项目能干啥？

本项目的作者@jasonmayes（Jason Mayes）是谷歌的一名资深开发者，是机器智能研究和高级开发的倡导者，作为一名TensorFlow.js专家，他拥有超过15年使用新技术开发创新Web解决方案的经验。

他在项目介绍中表示，这段代码的目的在于随着时间的推移学习视频背景的构成，让作者可以尝试从背景中移除任何人物，而所有效果都是使用TensorFlow.js在浏览器中实时实现的。

但同时作者表示，这只是一个实验，并非在所有情况下都是完美的。

消失的人

废话不多说，上代码！

可能有人会觉得在复杂的背景下实现“隐身”是很复杂的吧，而且还是实时的，但实际上实现这样的效果却只需要200多行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
 29const video = document.getElementById('webcam');
 30const liveView = document.getElementById('liveView');
 31const demosSection = document.getElementById('demos');
 32const DEBUG = false;
 33
 34// An object to configure parameters to set for the bodypix model.
 35// See github docs for explanations.
 36const bodyPixProperties = {
 37  architecture: 'MobileNetV1',
 38  outputStride: 16,
 39  multiplier: 0.75,
 40  quantBytes: 4
 41};
 42
 43// An object to configure parameters for detection. I have raised
 44// the segmentation threshold to 90% confidence to reduce the
 45// number of false positives.
 46const segmentationProperties = {
 47  flipHorizontal: false,
 48  internalResolution: 'high',
 49  segmentationThreshold: 0.9
 50};
 51
 52// Must be even. The size of square we wish to search for body parts.
 53// This is the smallest area that will render/not render depending on
 54// if a body part is found in that square.
 55const SEARCH_RADIUS = 300;
 56const SEARCH_OFFSET = SEARCH_RADIUS / 2;
 57
 58
 59// RESOLUTION_MIN should be smaller than SEARCH RADIUS. About 10x smaller seems to 
 60// work well. Effects overlap in search space to clean up body overspill for things
 61// that were not classified as body but infact were.
 62const RESOLUTION_MIN = 20;
 63
 64
 65// Render returned segmentation data to a given canvas context.
 66function processSegmentation(canvas, segmentation) {
 67  var ctx = canvas.getContext('2d');
 68
 69  // Get data from our overlay canvas which is attempting to estimate background.
 70  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 71  var data = imageData.data;
 72
 73  // Get data from the live webcam view which has all data.
 74  var liveData = videoRenderCanvasCtx.getImageData(0, 0, canvas.width, canvas.height);
 75  var dataL = liveData.data;
 76
 77  // Now loop through and see if pixels contain human parts. If not, update 
 78  // backgound understanding with new data.
 79  for (let x = RESOLUTION_MIN; x 
14    
20    
57    
61    
64