【本田ctx68多少钱】GitHub潮流排行榜登顶，明星1.8k:200行JS码，画面人物瞬间消失。

整理|夕阳

制作| CSDN(id 3360 csdnnews)

今天，Real-Time-Person-Removal(实时人物消除)项目在GitHub很生气，最近登上了GitHub Trending第一名，目前获得了1.8k star。

这个项目的魔力是，在web浏览器中使用JavaScript，可以使用200多个Ten代码，使视频屏幕上的角色对象实时消失在复杂的背景中！

现实生活中看起来不像哈利波特的梦想不可能实现，但至少可以在视频或动画中体验到看不见的快感！

首先提供GitHub地址：

这个项目能干啥？

这个项目的作者@jasonmayes(Jason mayes)是Google的高级开发人员，是机器智能研究和高级开发的倡导者，他是Ten专家，有15年以上使用新技术开发创新web解决方案的经验。

他在项目介绍中表示，该代码的目的是随着时间的推移学习视频背景的构成，使作者能够尝试从背景中删除角色，所有效果都使用Ten在浏览器中实时实现。

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

消失的人

废话不多说，上代码！

有些人可能认为在复杂背景下实现“隐身”很复杂，但实际上只需要200多行JS代码。

1/**

2*@License

3 *版权所有2018 Google llc .保留所有权利.

4 * licensedundertheapachelicense，版本2.0(the ' license ')；

5 * youmaynotusethisfileexceptincompliancewiththelicense。

6 * youmayobtainacopyofthelicenseat

7*

8*

9*

10 * unlessrequiredbyapplicablelaworagreedtoinwriting，软件

11 * distributedunderthelicenseisdistributedonan ' asis ' basis、

12 * withoutwarrantiesorconditionsofanykind、eitherexpressorimplied .

13 * seethelicenseforthespecificlanguagegoverningpermissionsand

14*limitationsundertheLicense。

15 *================================================

16*/

17

18/******************************************************************** 19 * Real-Time-Person-Removal Created by Jason Mayes 2020. 20 * 21 * Get latest code on my Github: 22 *  23 * 24 * Got questions? Reach out to me on social: 25 * Twitter: @jason_mayes 26 * LinkedIn:  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 = c(0, 0, canvas.width, canvas.height); 71  var data = imageDa; 72 73  // Get data from the live webcam view which has all data. 74  var liveData = videoRenderCanvasC(0, 0, canvas.width, canvas.height); 75  var dataL = liveDa; 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 < canvas.width; x += RESOLUTION_MIN) { 80    for (let y = RESOLUTION_MIN; y < canvas.height; y += RESOLUTION_MIN) { 81      // Convert xy co-ords to array offset. 82      let n = y * canvas.width + x; 83 84      let foundBodyPartNearby = false; 85 86      // Let's check around a given pixel if any other pixels were body like. 87      let yMin = y - SEARCH_OFFSET; 88      yMin = yMin < 0 ? 0: yMin; 89 90      let yMax = y + SEARCH_OFFSET; 91      yMax = yMax > canvas.height ? canvas.height : yMax; 92 93      let xMin = x - SEARCH_OFFSET; 94      xMin = xMin < 0 ? 0: xMin; 95 96      let xMax = x + SEARCH_OFFSET; 97      xMax = xMax > canvas.width ? canvas.width : xMax; 98 99      for (let i = xMin; i < xMax; i++) { 100        for (let j = yMin; j < yMax; j++) { 101 102          let offset = j * canvas.width + i; 103          // If any of the pixels in the square we are analysing has a body 104          // part, mark as contaminated. 105          if [offset] !== 0) { 106            foundBodyPartNearby = true; 107            break; 108          }  109        } 110      } 111 112      // Update patch if patch was clean.      113      if (!foundBodyPartNearby) { 114        for (let i = xMin; i < xMax; i++) { 115          for (let j = yMin; j < yMax; j++) { 116            // Convert xy co-ords to array offset. 117            let offset = j * canvas.width + i; 118 119 120            data[offset * 4] = dataL[offset * 4];     121            data[offset * 4 + 1] = dataL[offset * 4 + 1]; 122            data[offset * 4 + 2] = dataL[offset * 4 + 2]; 123            data[offset * 4 + 3] = 255;             124          } 125        } 126      } else { 127        if (DEBUG) { 128          for (let i = xMin; i < xMax; i++) { 129            for (let j = yMin; j < yMax; j++) { 130              // Convert xy co-ords to array offset. 131              let offset = j * canvas.width + i; 132 133 134              data[offset * 4] = 255;     135              data[offset * 4 + 1] = 0; 136              data[offset * 4 + 2] = 0; 137              data[offset * 4 + 3] = 255;             138            } 139          }  140        } 141      } 142 143 144    } 145  } 146  c(imageData, 0, 0); 147} 148 149// Let's load the model with our parameters defined above. 150// Before we can use bodypix class we must wait for it to finish 151// loading. Machine Learning models can be large and take a moment to 152// get everything needed to run. 153var modelHasLoaded = false; 154var model = undefined; 155 156model = bodyPix.load(bodyPixProperties).then(function (loadedModel) { 157  model = loadedModel; 158  modelHasLoaded = true; 159  // Show demo section now model is ready to use. 160  demo('invisible'); 161}); 162 163/******************************************************************** 164// Continuously grab image from webcam stream and classify it. 165********************************************************************/ 166 167var previousSegmentationComplete = true; 168 169// Check if webcam access is supported. 170function hasGetUserMedia() { 171  return !! && 172    naviga); 173} 174 175// This function will repeatidly call itself when the browser is ready to process 176// the next frame from webcam. 177function predictWebcam() { 178  if (previousSegmentationComplete) { 179    // Copy the video frame from webcam to a tempory canvas in memory only (not in the DOM). 180    videoRenderCanva(video, 0, 0); 181    previousSegmentationComplete = false; 182    // Now classify the canvas image we have available. 183    model.segmentPerson(videoRenderCanvas, segmentationProperties).then(function(segmentation) { 184      processSegmentation(webcamCanvas, segmentation); 185      previousSegmentationComplete = true; 186    }); 187  } 188 189  // Call this function again to keep predicting when the browser is ready. 190  window.requestAnimationFrame(predictWebcam); 191} 192 193// Enable the live webcam view and start classification. 194function enableCam(event) { 195  if (!modelHasLoaded) { 196    return; 197  } 198 199  // Hide the button. 200  event.('removed');   201 202  // getUsermedia parameters. 203  const constraints = { 204    video: true 205  }; 206 207  // Activate the webcam stream. 208  naviga(constraints).then(function(stream) { 209    video.addEventListener('loadedmetadata', function() { 210      // Update widths and heights once video is successfully played otherwise 211      // it will have width and height of zero initially causing classification 212      // to fail. 213      webcamCanvas.width = video.videoWidth; 214      webcamCanvas.height = video.videoHeight; 215      videoRenderCanvas.width = video.videoWidth; 216      videoRenderCanvas.height = video.videoHeight; 217      let webcamCanvasCtx = webcamCanvas.getContext('2d'); 218      webcamCanva(video, 0, 0); 219    }); 220 221    video.srcObject = stream; 222 223    video.addEventListener('loadeddata', predictWebcam); 224  }); 225} 226 227// We will create a tempory canvas to render to store frames from  228// the web cam stream for classification. 229var videoRenderCanvas = document.createElement('canvas'); 230var videoRenderCanvasCtx = videoRenderCanvas.getContext('2d'); 231 232// Lets create a canvas to render our findings to the DOM. 233var webcamCanvas = document.createElement('canvas'); 234webcamCanvas.setAttribute('class', 'overlay'); 235liveView.appendChild(webcamCanvas); 236 237// If webcam supported, add event listener to button for when user 238// wants to activate it. 239if (hasGetUserMedia()) { 240  const enableWebcamButton = document.getElementById('webcamButton'); 241  enableWebcamBu('click', enableCam); 242} else { 243  con('getUserMedia() is not supported by your browser'); 244}

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 *  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 20 21/****************************************************** 22 * Stylesheet by Jason Mayes 2020. 23 * 24 * Get latest code on my Github: 25 *  26 * Got questions? Reach out to me on social: 27 * Twitter: @jason_mayes 28 * LinkedIn:  29 *****************************************************/ 30 31 32 33 34body { 35  font-family: helvetica, arial, sans-serif; 36  margin: 2em; 37  color: #3D3D3D; 38} 39 40 41 42 43h1 { 44  font-style: italic; 45  color: #FF6F00; 46} 47 48 49 50 51h2 { 52  clear: both; 53} 54 55 56 57 58em { 59  font-weight: bold; 60} 61 62 63 64 65video { 66  clear: both; 67  display: block; 68} 69 70 71 72 73section { 74  opacity: 1; 75  transition: opacity 500ms ease-in-out; 76} 77 78 79 80 81header, footer { 82  clear: both; 83} 84 85 86 87 88button { 89  z-index: 1000; 90  position: relative; 91} 92 93 94 95 96.removed { 97  display: none; 98} 99 100 101 102 103.invisible { 104  opacity: 0.2; 105} 106 107 108 109 110.note { 111  font-style: italic; 112  font-size: 130%; 113} 114 115 116 117 118.webcam { 119  position: relative; 120} 121 122 123 124 125.webcam, .classifyOnClick { 126  position: relative; 127  float: left; 128  width: 48%; 129  margin: 2% 1%; 130  cursor: pointer; 131} 132 133 134 135 136.webcam p, .classifyOnClick p { 137  position: absolute; 138  padding: 5px; 139  background-color: rgba(255, 111, 0, 0.85); 140  color: #FFF; 141  border: 1px dashed rgba(255, 255, 255, 0.7); 142  z-index: 2; 143  font-size: 12px; 144} 145 146 147 148 149.highlighter { 150  background: rgba(0, 255, 0, 0.25); 151  border: 1px dashed #fff; 152  z-index: 1; 153  position: absolute; 154} 155 156 157 158 159.classifyOnClick { 160  z-index: 0; 161  position: relative; 162} 163 164 165 166 167.classifyOnClick canvas, .webcam canvas.overlay { 168  opacity: 1; 169 170  top: 0; 171  left: 0; 172  z-index: 2; 173} 174 175 176 177 178#liveView { 179  transform-origi

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 11 12 13    <!-- Import the webpage's stylesheet --> 14    <link rel="stylesheet" href=";> 15 16 17 18 19    <!-- Import Ten library --> 20    <script src="; type="text/javascript"></script> 21  </head> 22  <body> 23    <h1>Disappearing People Project</h1> 24 25    <header class="note"> 26      <h2>Removing people from complex backgrounds in real time using Ten</h2> 27    </header> 28 29 30 31 32    <h2>How to use</h2> 33    <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> 34    <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> 35    <iframe width="540" height="812" src=";autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 36 37    <section id="demos" class="invisible"> 38 39 40 41 42      <h2>Demo: Webcam live removal</h2> 43      <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> 44 45      <div id="liveView" class="webcam"> 46        <button id="webcamButton">Enable Webcam</button> 47        <video id="webcam" autoplay></video> 48      </div> 49    </section> 50 51 52 53 54 55    <!-- Include the Glitch button to show what the webpage is about and 56         to make it easier for folks to view source and remix --> 57    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div> 58    <script src=";></script> 59 60    <!-- Load the bodypix model to recognize body parts in images --> 61    <script src=";></script> 62 63    <!-- Import the page's JavaScript to do some stuff --> 64    <script src="; defer></script> 65  </bod 66

实时演示

你也可以在自己的Web浏览器中根据自己的喜好试着复现一下：

Code：https://code/jasonmayes/pen/GRJqgma

Gli：https://gli/~disappearing-people

等待模型加载完成，然后就可以使用了。

这是使用作者自定义算法实现的视频。上半部分是实际镜头，底部是用JavaScript实时删除人物的视频。

用你自己的网络摄像头试一下，要距离摄像头几英尺远，然后来回走动，在底部预览中你会慢慢从画面中消失。赶快试试吧，使用效果别忘了留言和大家一起分享哦！