tensorflow从摄像头中实时除去人物效果
代码语言:html
所属分类:视觉差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /** * @license * Copyright 2018 Google LLC. All Rights Reserved. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ============================================================================= */ /****************************************************** * Stylesheet by Jason Mayes 2020. * * Get latest code on my Github: * https://github.com/jasonmayes/Real-Time-Person-Removal * Got questions? Reach out to me on social: * Twitter: @jason_mayes * LinkedIn: https://www.linkedin.com/in/creativetech *****************************************************/ body { font-family: helvetica, arial, sans-serif; margin: 2em; color: #3D3D3D; } h1 { font-style: italic; color: #FF6F00; } h2 { clear: both; } em { font-weight: bold; } video { clear: both; display: block; } section { opacity: 1; transition: opacity 500ms ease-in-out; } header, footer { clear: both; } button { z-index: 1000; position: relative; } .removed { display: none; } .invisible { opacity: 0.2; } .note { font-style: italic; font-size: 130%; } .webcam { position: relative; } .webcam, .classifyOnClick { position: relative; float: left; width: 48%; margin: 2% 1%; cursor: pointer; } .webcam p, .classifyOnClick p { position: absolute; padding: 5px; background-color: rgba(255, 111, 0, 0.85); color: #FFF; border: 1px dashed rgba(255, 255, 255, 0.7); z-index: 2; font-size: 12px; } .highlighter { background: rgba(0, 255, 0, 0.25); border: 1px dashed #fff; z-index: 1; position: absolute; } .classifyOnClick { z-index: 0; position: relative; } .classifyOnClick canvas, .webcam canvas.overlay { opacity: 1; top: 0; left: 0; z-index: 2; } #liveView { transform-origin: top left; transform: scale(1); } </style> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/tf.min.js"></script> </head> <body> <h1>人物消失项目</h1> <header class="note"> <h2>用tensorflow实时除去摄像头中将人物隐形</h2> </header> <section id="demos" class="invisible"> <p>打开摄像头并离摄像头远一点左右走动试试,你消失了</p> <div id="liveView" class="webcam"> <button id="webcamButton">打开摄像头</button> <video id="webcam" autoplay></video> </div> </section> <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/body-pix@2.0.js"></script> <script > /** * @license * Copyright 2018 Google LLC. All Rights Reserved. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ============================================================================= */ /******************************************************************** * Real-Time-Person-Removal Created by Jason Mayes 2020. * * Get latest code on my Github: * https://github.com/jasonmayes/Real-Time-Person-Removal * * Got questions? Reach out to me on social: * Twitter: @jason_mayes * LinkedIn: https://www.linkedin.com/in/creativetech ********************************************************************/ const video = document.getElementById('webcam'); const liveView = document.getElementById('liveView'); const demosSection = document.getElementById('demos'); const DEBUG = false; // An object to configure parameters to set for the bodypix model. // See github docs for explanations. const bodyPixProperties = { architecture: 'MobileNetV1', outputStride: 16, multiplier: 0.75, quantBytes: 4 }; // An object to configure parameters for detection. I have raised // the segmentation threshold to 90% confidence to reduce the // number of false positives. const segmentationProperties = { flipHorizontal: false, internalResolution: 'high', segmentationThreshold: 0.9 }; // Must be even. The size of square we wish to search for body parts. // This is the smallest area that will render/not render depending on // if a body part is found in that square. const SEARCH_RADIUS = 300; const SEARCH_OFFSET = SEARCH_RADIUS / 2; // RESOLUTION_MIN should be smaller than SEARCH RADIUS. About 10x smaller seems to // work well. Effects overlap in search space to clean up body overspill for things // that were not classified as body but infact were. const RESOLUTION_MIN = 20; // Render returned segmentation data to a given canvas context. function processSegmentation(canvas, segmentation) { var ctx = canvas.getContext('2d'); // Get data from our overlay canvas which is attempting to estimate background. var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.da.........完整代码请登录后点击上方下载按钮下载查看
网友评论0