整活~使用webAI做一个网页AR吃豆人小游戏

2024-04-06 07:27:12

一个好习惯，先给结论

使用网页端深度学习框架识别人脸，做一个AR吃豆人小游戏。吃豆人会随着人脸在镜头内的移动而移动，吃完全部豆子即为获胜。

在线体验地址：点我预览

代码地址：点我github

本文首发于：blog.gis1024.com/web-ai-ar-p…

技术选型

vite 作为构建工具
face-api.js 作为人脸识别工具，这是基于 tensorflow.js 的一个网页人脸识别库
webrtc-adapter 作为调用摄像的兼容垫片库

下面将把主要实现思路抽出来讲一下。

调用摄像头

在 index.html 中创建 video 标签

<!--      视频画面  -->
<video id="video"></video>
复制代码

引入 webrtc-adapter 垫片，方便在不同平台上都能调用摄像头，一开始没用这个包，在iPhone上调用摄像头死活失败。

调用后，把摄像头拍摄的流播放到 video 标签上。

需要注意的是，摄像头拍出来的画面是镜像的，你头往左动，画面里的头会往右动，所以我们需要给 video 标签加上 transform: rotateY(180deg); 样式，让他水平翻转180°。

既然它进行了翻转，后面识别人脸位置的x坐标，也必须要进行计算，取镜像值。

import adapter from "webrtc-adapter";navigator.mediaDevices.getUserMedia({ video: {} }).then(success).catch(error);async function success(stream) {video.srcObject = stream;video.play();
}function error(error) {alert(`访问用户媒体设备失败，请打开摄像头权限${error.name}, ${error.message}`);console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
复制代码

人脸识别

人脸识别使用 face-api.js，这是基于 tensorflow.js 的一个网页人脸识别库，我们这术语是站在两个巨人的肩膀上了，2333。

face-api.js （官方地址）可以识别 img 、 canvas 甚至 video 标签，所以我们上面的 video 标签是可以直接用的。

根据官方文档，这个库是支持好几种机器学习模型识别的，模型包有大有小。

我一眼就相中了 tiny Face Detector 这个模型，只有 190KB 大，对于网页来说也太友好了。

但是的但是，我用了第一张静态图片测试就没识别出来，

整活~使用webAI做一个网页AR吃豆人小游戏相关推荐

基于C++控制台（Windows平台）的一个吃豆人小游戏
PacManX --南京大学2019秋季学期 "高级程序设计 "课程设计一基于C++控制台(Windows平台)的一个吃豆人小游戏已实现的目标: 地图支持自定义编辑(可编辑地图 ...
使用Vue做一个可自动拼图的拼图小游戏（二）
背景以及最终效果在上一篇文章中我们已经写完了一个可以正常玩的拼图小游戏,但是这还没有结束,我们还要接着试一下让拼图游戏可以自己完成拼图. 在线体验本部分是这篇文章的第二部分,主要讲的是实现自动拼图 ...
利用python做一个小游戏_如何使用python做一个简单的猜数字的小游戏
1 首先小编先打开IDLE,如下图: 2 然后这里点击菜单栏的'File',然后点击菜单"New File",如下图: 3 然后我们就在idle中新建了一个python文件,如下图 ...
canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
如何用Cocos Creator做一个胶体（果冻效果）小游戏（四）+测试收尾
一.游戏测试测试环节是检测游戏,发现游戏缺陷的一个必不可少的环节.通过进行游戏测试能够不断发现游戏存在的问题以及可能出现的问题,寻找有效可行的解决方案,不断改进,提升游戏的质量,让游戏趋于完善. 一 ...
cocos creator做一个儿童数字答题的微信小游戏（1）
接了个外包要做个数字答题的微信小游戏给小学生玩的准备大概15天完成吧,每天抽点一两个小时做一下今天第一天先做主界面,先用cocos creator拼一个主界面出来下面的每个按钮都是一个butt ...
使用Vue做一个可自动拼图的拼图小游戏（一）
背景以及最终效果随着几个项目的提测,也闲下来了,恰好玩了一把拼图游戏,于是突发奇想打算自己写一个试试. 在线体验实现的功能有: 普通拼图的功能自动拼图本部分是这篇文章的第一部分,主要讲的是实现 ...
如何用Cocos Creator做一个胶体（果冻效果）小游戏（三）+JavaScript
游戏实现部分一.游戏关卡实现这里就只放两个关卡(其余大部分重复性,还不好看:( ),关卡设计图的草纸找不到了,就不放出来了. 初始情况下,玩家控制的胶体方块角色出现在屏幕左下角的盒子中,上方的白字 ...
【Unity小游戏】Unity 结合声网音频SDK做一个《打地猫》小游戏，还可以跟好友们边聊天边撸猫~
目录

最新文章

热门文章