DEV Community
·
使用Supabase和WebGazer.js构建实时眼动追踪体验
💡
原文英文，约3000词，阅读约需11分钟。
📝
内容提要
该项目“凝视深渊”利用Supabase和WebGazer.js实现实时眼动追踪。用户在黑屏上凝视，系统通过SVG展示眼睛并检测眨眼。项目探索了无数据库表的实时功能，成功实现了简单而复杂的视觉体验。
🎯
关键要点
- 项目名称为“凝视深渊”，利用Supabase和WebGazer.js实现实时眼动追踪。
- 用户在黑屏上凝视，系统通过SVG展示眼睛并检测眨眼。
- 项目探索了无数据库表的实时功能，成功实现了简单而复杂的视觉体验。
- 项目使用了Supabase的实时功能，允许最多10个参与者在一个频道中。
- 实现了眼动追踪功能，用户的视线位置和眨眼状态被实时传输。
- 使用WebGazer.js进行眼动追踪，结合动态阈值检测眨眼。
- 项目中包含了校准功能，以提高眼动追踪的准确性。
- 眼睛的SVG实现经过美化，具有动画效果，能够跟随用户的眼动。
- 背景音乐和动画效果增强了用户体验，使用Stable Audio生成背景音乐。
- 项目展示了如何利用Supabase的实时能力实现眼动追踪的实验性项目。
❓
延伸问答
项目‘凝视深渊’的主要功能是什么？
该项目利用Supabase和WebGazer.js实现实时眼动追踪，用户在黑屏上凝视，系统通过SVG展示眼睛并检测眨眼。
如何实现眼动追踪的准确性？
项目中包含了校准功能，用户需要点击屏幕上的红点以提高眼动追踪的准确性。
Supabase在这个项目中起到了什么作用？
Supabase提供了实时功能，允许最多10个参与者在一个频道中进行眼动追踪互动，而无需使用数据库表。
项目中如何处理用户的眨眼状态？
使用WebGazer.js结合动态阈值检测眨眼，通过计算眼睛亮度来判断用户是否眨眼。
项目的用户体验是如何增强的？
项目通过背景音乐和动画效果增强用户体验，使用Stable Audio生成背景音乐，增加了沉浸感。
项目中使用了哪些技术栈？
项目使用了Supabase、React、WebGazer.js、Motion One和anime.js等技术。
➡️
