MediaPipe实现浏览器中离线调用摄像头空中手势绘图空中画板效果代码-html代码-BFW代码库

MediaPipe实现浏览器中离线调用摄像头空中手势绘图空中画板效果代码

代码语言：html

所属分类：多媒体

代码描述：MediaPipe实现浏览器中离线调用摄像头空中手势绘图空中画板效果代码，食指绘画，中指暂停。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AI 空中手势绘图 (MediaPipe)</title>
    <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>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #1e1e1e;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        h1 { margin: 10px 0; font-size: 1.5rem; }

        .container {
            position: relative;
            width: 1280px;
            height: 720px;
            max-width: 100%;
            max-height: 80vh;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        /* 视频和画布重叠 */
        .output_canvas {
        .........完整代码请登录后点击上方下载按钮下载查看