实时捕获识别摄像头中人物手的骨架效果代码-html代码-BFW代码库

实时捕获识别摄像头中人物手的骨架效果代码

代码语言：html

所属分类：其他

代码描述：实时捕获识别摄像头中人物手的骨架效果代码，注意要在新窗口中预览，不能再iframe中

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.1/control_utils.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="demo.css" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.1/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.1/control_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.2/drawing_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.1/hands.js" crossorigin="anonymous"></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;
            height: 720px;
            width: 1280px;
        }

        .input_video {
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .input_video.selfie {
            transform: scale(-1, 1);
        }

        .output_canvas {
            position: absolute;
            height: 720px;
            width: 1280px;
            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 class="loaded">
    <div class="container">
        <video class="input_video selfie"></video>
        <canvas class="output_canvas" width="1280px" height="720px"></canvas>
        <div class="loading" style="display: none;">
            <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>
    <div class="control-panel">
        <div class="control-panel">
            <div class="control-panel-entry control-panel-text">
                MediaPipe Hands
            </div>
            <div class="control-panel-entry control-panel-fps">
                <canvas width="100" height="100"></canvas><div class="fps-text">
                    7 fps
                </div>
                <div class="fps-30">
                    30
 .........完整代码请登录后点击上方下载按钮下载查看