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>橡胶果实实时拉脸特效</title>
<!-- 引入 Tailwind CSS 构建现代动漫风面板 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 MediaPipe 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
<style>
body {
background-color: #1a1a2e;
font-family: 'PingFang SC', system-ui, -apple-system, sans-serif;
}
/* 动漫黑框描边风格 */
.anime-border {
border: 4px solid #000;
box-shadow: 6px 6px 0px #000;
}
.anime-btn {
border: 3px solid #000;
box-shadow: 3px 3px 0px #000;
transition: all 0.1s ease;
}
.anime-btn:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0px #000;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4 md:p-8 text-white">
<!-- 顶部标题 -->
<div class="text-center mb-6 max-w-lg">
<h1 class="text-3xl md:text-4xl font-extrabold text-[#FFD369] tracking-wider uppercase" style="text-shadow: 3px 3px 0px #000, -1px -1px 0px #000;">
GOMU GOMU NO...
</h1>
<p class="text-xs md:text-sm text-gray-400 mt-2 font-medium">
实时动作捕捉：用单手食指和拇指“捏住”嘴角或脸颊往外拉，松开瞬间触发橡胶回弹！
</p>
</div>
<!-- 核心区域 -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 max-w-6xl w-full items-center">
<!-- 左侧：画布与摄像头容器 -->
<div class="lg:col-span-8 flex flex-col items-center">
<div class="relative anime-border bg-black rounded-lg overflow-hidden w-[640px] max-w-full aspect-[4/3]">
<!-- 主渲染画面 -->
<canvas id="outputCanvas" width="640" height="480" class="w-full h-full block transform scale-x-1"></canvas>
<!-- 隐藏的原始视频流（用于 MediaPipe 帧捕获） -->
<video id="webcam" autoplay playsinline class="absolute top-0 left-0 w-0 h-0 opacity-0"></video>
<!-- 初始化遮罩/加载提示 -->
<div id="loader" class="absolute inset-0 bg-[#16213e]/95 flex flex-col items-center justify-center z-10 transition-opacity duration-500">
<div class="w-12 h-12 border-4 border-[#FF9F1C] border-t-transparent rounded-full animate-spin mb-4"></div>
<p class="text-sm font-semibold tracking-wider text-yellow-400">正在载入 MediaPipe 视觉模型与初始化相机...</p>
<p class="text-xs text-gray-400 mt-2">首次加载可能需要10-20秒，请在浏览器弹窗中允许相机权限</p>
</div>
</div>
</div>
<!-- 右侧：交互参数与指示说明 -->
<div class="lg:col-span-4 space-y-6">
<!-- 指导卡片 -->
<div class="bg-[#16213e] anime-border p-5 rounded-lg space-y-4">
<h3 class="text-lg font-bold text-[#FF9F1C] border-b-2 border-black pb-2">💡 动作秘籍</h3>
<ul class="text-xs space-y-3 text-gray-300 leading-relaxed">
<li class="flex items-start gap-2">
<span class="bg-[#FF9F1C] text-black font-extrabold text-[10px] px-1.5 py-0.5 rounded">步骤 1</span>
<span>正对摄像头，伸手靠近自己的<b class="text-[#FF9F1C]">左/右嘴角</b>或<b class="text-[#FF9F1C]">脸颊</b>。</span>
</li>
<li class="flex items-start gap-2">
<span class="bg-[#FF9F1C] text-black font-extrabold text-[10px] px-1.5 py-0.5 rounded">步骤 2</span>
<span>将拇指与食指捏合（Pinch 动作），此时画面会锁定锚点。</span>
</li>
<li class="flex items-start gap-2">
<span class="bg-[#FF9F1C] text-black font-extrabold text-[10px] px-1.5 py-0.5 rounded">步骤 3</span>
<span>按住不放往外拉，脸部像素会跟随手平滑变形。</span>
</li>
<li class="flex items-start gap-2">
<span class="bg-[#FF9F1C] text-black font-extrabold text-[10px] px-1.5 py-0.5 rounded">步骤 4</span>
<span>松开手指，体验弹性物理抖动回弹！</span>
</li>
</ul>
</div>
<!-- 参数微调 -->
<div class="bg-[#16213e] anime-border p-5 rounded-lg space-y-4">
<h3 class="text-md font-bold text-white">⚙️ 橡胶参数调节</h3>
<div class=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0