如何在本地电脑运行Codepen上的MediaPipe人脸检测Demo

修复步骤 #

1. 补充缺失的依赖引入 #

Codepen平台默认在全局注入了Demo依赖的三个外部脚本，你本地没有引入，所以相关API无法正常调用。在<head>标签末尾添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.1/control_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.1/drawing_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_detection@0.4/face_detection.js"></script>

2. 修正CSS语法 #

你复制的CSS是Sass嵌套语法，原生浏览器不支持，需要把所有嵌套选择器展开为标准CSS写法，比如：

/* 原嵌套写法 */
a {
    color: white;
    text-decoration: none;
    &:hover {
        color: lightblue;
    }
}
/* 修改为标准写法 */
a {
    color: white;
    text-decoration: none;
}
a:hover {
    color: lightblue;
}

所有带&符号的嵌套规则都按照上述逻辑修改即可。

3. 调整script标签位置 #

你当前把<script type="module">写在了</html>标签之外，不符合HTML规范，需要把整个script块移动到</body>标签之前，保证DOM加载完成后再执行脚本逻辑。

4. 启动服务测试 #

修改完成后重新运行python3 -m http.server，在Chrome中访问http://localhost:8000，授权摄像头权限后即可正常运行Demo。

内容的提问来源于stack exchange，提问作者Alok