mediapipe的holistic实现摄像头识别全身（包括手指与脸部、身体骨骼）效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：mediapipe的holistic实现摄像头识别全身（包括手指与脸部、身体骨骼）效果代码

代码标签： mediapipe holistic 摄像头识别全身手指脸部身体骨骼

下面为部分代码预览，完整代码请点击下载或在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.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/drawing_utils.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mediapipeholistic.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 {
  max-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;
}
</style>


</head>

<body >
  <div class="container">
    <video class="input_video"></video>
    <div class="canvas-container">
    <canvas class="output_canvas" width="1280px" height="720px">
    </canvas>
    </div>
    <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 href="">
         
        </a>
      </div>
    </div>
  </div>
  <div class="control-panel">
  </div>
  
  
      <script  type="module">
import DeviceDetector from "//repo.bfw.wiki/bfwrepo/js/module/device-detector-js.js";
// 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, continue at your own risk.`);
    }
}
const controls = window;
const mpHolistic = window;
const drawingUtils = window;
const config = { locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/holistic@` +
            `${mpHolistic.VERSION}/${file}`;
    } };
// Our input frames will come from here.
const videoElement = document.getElementsByClassName('input_video')[0];
const canvasElement = document.getElementsByClassName('output_canvas')[0];
const controlsElement = document.getElementsByClassName('control-panel')[0];
const canvasCtx = canvasElement.getContext('2d');
// We'll add this to our control panel later, but we'll save it here so we can
// call tick() each time the graph runs.
const fpsControl = new controls.FPS();
// Optimization: Turn off animated spinner after its hiding animation is done.
const spinner = document.querySelector('.loading');
spinner.ontransitionend = () => {
    spinner.style.display = 'none';
};
function removeElements(landmarks, elements) {
    for (const element of elements) {
        delete landmarks[element];
    }
}
function removeLandmarks(results) {
    if (results.poseLandmarks) {
        removeElements(results.poseLandmarks, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 16, 17, 18, 19, 20, 21, 22]);
    }
}
function connect(ctx, connectors) {
    const canvas = ctx.canvas;
    for (const connector of connectors) {
        const from = connector[0];
        const to = connector[1];
        if (from && to) {
            if (from.visibility && to.visibility &&
                (from.visibility < 0.1 || to.visibility < 0.1)) {
                continue;
            }
            ctx.beginPath();
            ctx.moveTo(from.x * canvas.width, from.y * canvas.height);
            ctx.lineTo(to.x * canvas.width, to.y * canvas.height);
            ctx.stroke();
        }
    }
}
let activeEffect = 'mask';
function onResults(results) {
    // Hide the spinner.
    document.body.classList.add('loaded');
    // Remove landmarks we don't want to draw.
    removeLandmarks(results.........完整代码请登录后点击上方下载按钮下载查看