mediapipe的hands实现摄像头手掌手指识别跟踪效果代码
代码语言:html
所属分类:其他
代码描述:mediapipe的hands实现摄像头手掌手指识别跟踪效果代码,通过识别手掌的手指位置重建一个三维手指骨骼模型。
代码标签: mediapipe hands 摄像头 手掌 手指 识别 跟踪
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/control_utils_3d.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/control_utils.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/camera_utils.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/control_utils.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/control_utils_3d.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/drawing_utils.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mediapipe.hands.js"></script> <style> @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .abs { position: absolute; } a { color: white; text-decoration: none; } a:hover { color: lightblue; } body { bottom: 0; font-family: "Titillium Web", sans-serif; color: white; left: 0; margin: 0; position: absolute; right: 0; top: 0; transform-origin: 0px 0px; overflow: hidden; } .container { position: absolute; background-color: #596e73; width: 100%; max-height: 100%; } .input_video { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .input_video.selfie { transform: scale(-1, 1); } .input_image { position: absolute; } .canvas-container { display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; } .output_canvas { width: 100%; display: block; position: relative; left: 0; top: 0; } .logo { bottom: 10px; right: 20px; } .logo .title { color: white; font-size: 28px; } .logo .subtitle { position: relative; color: white; font-size: 10px; left: -30px; top: 20px; } .control-panel { position: absolute; left: 10px; top: 10px; } .loading { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; backface-visibility: hidden; justify-content: center; opacity: 1; transition: opacity 1s; } .loading .message { font-size: x-large; } .loading .spinner { position: absolute; width: 120px; height: 120px; animation: spin 1s linear infinite; border: 32px solid #bebebe; border-top: 32px solid #3498db; border-radius: 50%; } .loaded .loading { opacity: 0; } .shoutout { left: 0; right: 0; bottom: 40px; text-align: center; font-size: 24px; position: absolute; } .square-box { width: 33%; height: 0; padding-top: 33%; position: absolute; right: 20px; top: 20px; } .landmark-grid-container { height: 100%; width: 100%; position: absolute; top:0; left:0; background-color: #99999999; } </style> </head> <body> <div class="container"> <video class="input_video"></video> <canvas class="output_canvas" width="1280px" height="720px"></canvas> <div class="loading"> <div class="spinner"></div> <div class="message"> Loading </div> </div> <a class="abs logo" href="https://www.mediapipe.dev" target="_blank"> <div style="display: flex;align-items: center;bottom: 0;right: 10px;"> <img class="logo" src="logo_white.png" alt="" style=" height: 50px;"> <span class="title">MediaPipe</span> </div> </a> <div class="shoutout"> <div> <a> </a> </div> </div> </div> <div class="control-panel"> </div> <div class='square-box'> <div class="landmark-grid-container"> </div> </div> <script type="module"> import DeviceDetector from "//repo.bfw.wiki/bfwrepo/js/module/device-detector-js.js"; const mpHands = window; const drawingUtils = window; const controls = window; const controls3d = window; // Usage: testSupport({client?: string, os?: string}[]) // Client and os are regular expressions. // See: https://cdn.jsdelivr.net/npm/device-detector-js@2.2.10/README.md for // legal values for client and os testSupport([ { client: 'Chrome|Edge', }, ]); function testSupport(supportedDevices) { const deviceDetector = new DeviceDetector(); const detectedDevice = deviceDetector.parse(navigator.userAgent); let isSupported = false; for (const device of supportedDevices) { if (device.client !== undefined) { const re = new RegExp(`^${device.client}$`); if (!re.test(detectedDevice.client.name)) { continue; } } if (device.os !== undefined) { const re = new RegExp(`^${device.os}$`); if (!re.test(detectedDevice.os.name)) { continue; } } isSupported = true; break; } if (!isSupported) { alert(`This demo, running on ${detectedDevice.client.name}/${detectedDevice.os.name}, ` + `is not well supported at this time.........完整代码请登录后点击上方下载按钮下载查看
网友评论0