mediapipe实现浏览器中调用摄像头双手空中识别操控网页元素缩放示例代码-html代码-BFW代码库

mediapipe实现浏览器中调用摄像头双手空中识别操控网页元素缩放示例代码

代码语言：html

所属分类：多媒体

代码描述：mediapipe实现浏览器中调用摄像头双手空中识别操控网页元素缩放示例代码，双手展示在摄像头中，双手距离长短来控制缩放。

代码标签： mediapipe 浏览器调用摄像头双手空中识别操控网页元素缩放示例代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 手势操控终端 // GESTURE_CORE</title>
    
    <!-- 引入 MediaPipe Hands 库 -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>

    <style>
        /* --- 基础与字体 --- */
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');

        body {
            margin: 0;
            padding: 0;
            background-color: #050505;
            color: #0ff;
            font-family: 'Share Tech Mono', monospace;
            overflow: hidden; /* 隐藏原生滚动条，使用自定义容器 */
            height: 100vh;
            width: 100vw;
            user-select: none;
        }

        /* --- 背景网格特效 --- */
        .cyber-grid {
            position: fixed;
            top: 0; left: 0; width: 200%; height: 200%;
            background: 
                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
            z-index: -1;
            animation: gridMove 20s linear infinite;
            pointer-events: none;
    .........完整代码请登录后点击上方下载按钮下载查看