其他
登顶 GitHub 趋势榜，标星1.8k：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 < 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 (segmentation.data[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 ctx.putImageData(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 demosSection.classList.remove('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 !!(navigator.mediaDevices &&
172 navigator.mediaDevices.getUserMedia);
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 videoRenderCanvasCtx.drawImage(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.target.classList.add('removed');
201
202 // getUsermedia parameters.
203 const constraints = {
204 video: true
205 };
206
207 // Activate the webcam stream.
208 navigator.mediaDevices.getUserMedia(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 webcamCanvasCtx.drawImage(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 enableWebcamButton.addEventListener('click', enableCam);
242} else {
243 console.warn('getUserMedia() is not supported by your browser');
244}
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}
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 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="/style.css">
15
16
17
18
19 <!-- Import TensorFlow.js library -->
20 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" 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 TensorFlow.js</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="https://www.youtube.com/embed/0LqEuc32uTc?controls=0&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="https://button.glitch.me/button.js"></script>
59
60 <!-- Load the bodypix model to recognize body parts in images -->
61 <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>
62
63 <!-- Import the page's JavaScript to do some stuff -->
64 <script src="/script.js" defer></script>
65 </bod
66