实时捕获识别摄像头中人物手的骨架效果代码-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;
   .........完整代码请登录后点击上方下载按钮下载查看