整理 | 夕顏
出品 | 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代碼：
<code> 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 canvas.height ? canvas.height : yMax; 92 93 let xMin = x - SEARCH_OFFSET; 94 xMin = xMin canvas.width ? canvas.width : xMax; 98 99 for (let i = xMin; i /<code>CSS：
<code> 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 20 21/****************************************************** 22 * Stylesheet by Jason Mayes 2020. 23 * 24 * Get latest code on my Github: 25 * https://github.com/jasonmayes/Real-Time-Person-Removal 26 * Got questions? Reach out to me on social: 27 * Twitter: @jason_mayes 28 * LinkedIn: https://www.linkedin.com/in/creativetech 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} 99100101102103.invisible {104 opacity: 0.2;105}106107108109110.note {111 font-style: italic;112 font-size: 130%;113}114115116117118.webcam {119 position: relative;120}121122123124125.webcam, .classifyOnClick {126 position: relative;127 float: left;128 width: 48%;129 margin: 2% 1%;130 cursor: pointer;131}132133134135136.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}145146147148149.highlighter {150 background: rgba(0, 255, 0, 0.25);151 border: 1px dashed #fff;152 z-index: 1;153 position: absolute;154}155156157158159.classifyOnClick {160 z-index: 0;161 position: relative;162}163164165166167.classifyOnClick canvas, .webcam canvas.overlay {168 opacity: 1;169170 top: 0;171 left: 0;172 z-index: 2;173}174175176177178#liveView {179 transform-origi/<code>Html:
<code> 1html> 2 3 4 <title>Disappearing People Project/<title> 5 6 7 8 910111213 14 <link>1516171819 20 <script>21 22 23Disappearing People Project
2425 <header>26Removing people from complex backgrounds in real time using TensorFlow.js
27 /<header>2829303132How to use
33Please wait for the model to load before trying the demos below at which point they will become visible when ready to use.
34Here 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!
35 <iframe>3637 3839404142Demo: Webcam live removal
43Try 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.
444546 <button>Enable Webcam/<button>47 <video>4849 /505152535455 57 58 <script>5960 61 <script>6263 64 <script>65 /<code>
實時演示
你也可以在自己的Web瀏覽器中根據自己的喜好試著復現一下：
Codepen.io：https://codepen.io/jasonmayes/pen/GRJqgma
Glitch.com：https://glitch.com/~disappearing-people
等待模型加載完成，然後就可以使用了。
這是使用作者自定義算法實現的視頻。上半部分是實際鏡頭，底部是用JavaScript實時刪除人物的視頻。
用你自己的網絡攝像頭試一下，要距離攝像頭幾英尺遠，然後來回走動，在底部預覽中你會慢慢從畫面中消失。趕快試試吧，使用效果別忘了留言和大家一起分享哦！
分享到:
閱讀更多 CSDN 的文章
