Introduction So, who doesn't love to have superpowers in real life? And I think today, with the advancement in AI, it's getting closer and closer. Who knows? Maybe one day technology will make us feel like real superheroes. This is why I created the Seeing Power Project. A web-based face tracking. I will explain some of the important parts of the code that I used and give a demo if you want to try it yourself. But why in a web browser? It's an easy question to run directly in a web browser; anyone can try it and use it. Don't need super phones or anything; any phone could work. You don't need to install anything. And most importantly, it uses camera and canvas layering. Detecting Face Invisibility The face is detected using dots on the face. So, real face detection is used in MediaPipe. But I wanted it to be clean. What would it look like if you took a picture of your superpowers with dots all over your face? So, this is why face mesh works in the background. Key Code Snippets So, what is the code I used to build it? AI helped me a lot during the design of the code. Let's talk coding. Eye landmark selection const leftEye = landmarks[468];
const rightEye = landmarks[473]; const leftEye = landmarks[468];
const rightEye = landmarks[473]; Laser direction (side view logic) ctx.moveTo(x, y);
ctx.lineTo(x + jitter, y + 1200);
ctx.stroke(); ctx.moveTo(x, y);
ctx.lineTo(x + jitter, y + 1200);
ctx.stroke(); Camera initialisation const video = document.getElementById("video");
const camera = new Camera(video, {
  onFrame: async () => {
    await faceMesh.send({ image: video });
  },
  width: 1280,
  height: 720
});
camera.start(); const video = document.getElementById("video");
const camera = new Camera(video, {
  onFrame: async () => {
    await faceMesh.send({ image: video });
  },
  width: 1280,
  height: 720
});
camera.start(); Face mesh setup const faceMesh = new FaceMesh({
  locateFile: file =>
    `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4/${file}`
});
faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.6,
  minTrackingConfidence: 0.6
}); const faceMesh = new FaceMesh({
  locateFile: file =>
    `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4/${file}`
});
faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.6,
  minTrackingConfidence: 0.6
}); If you'd like to try it yourself or see the project in real life, here's a demo. demo What This Project Proves Real-time computer vision is possible even with simple tools. Second, creative AR doesn't need a heavy framework. And most importantly, making people's dreams a reality with just simple code. Real-time computer vision is possible even with simple tools. Second, creative AR doesn't need a heavy framework. And most importantly, making people's dreams a reality with just simple code. Conclusion Start anywhere with a vision. A small project can be a great deal for you if you begin with it. And this project proves that it's not that hard for anyone.

Seeing Power: Building a Side-View Laser Eye Effect Using Web-Based Face Tracking

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Building a DIY Keypad Circuit With Diodes and AI Tools

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

Building a DIY Keypad Circuit With Diodes and AI Tools

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps